<?xml version="1.0" encoding="utf-8" ?>
<abstract:EventDetailsPageAbstract
    x:Class="Wino.Calendar.Views.EventDetailsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Mail.WinUI.Views.Abstract"
    xmlns:calendar="using:Wino.Core.Domain.Entities.Calendar"
    xmlns:calendarHelpers="using:Wino.Calendar.Helpers"
    xmlns:calendarViewModels="using:Wino.Calendar.ViewModels"
    xmlns:controls="using:Wino.Controls"
    xmlns:coreControls="using:Wino.Mail.WinUI.Controls"
    xmlns:ctControls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:Wino.Calendar.ViewModels.Data"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:enums="using:Wino.Core.Domain.Enums"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:local="using:Wino.Calendar.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:selectors="using:Wino.Mail.WinUI.Selectors"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

    <Page.Resources>
        <selectors:RsvpStatusIconTemplateSelector x:Key="RsvpStatusIconSelector">
            <selectors:RsvpStatusIconTemplateSelector.NotRespondedTemplate>
                <DataTemplate>
                    <coreControls:WinoFontIcon
                        FontSize="20"
                        Foreground="{ThemeResource SystemAccentColor}"
                        Icon="EventRespond" />
                </DataTemplate>
            </selectors:RsvpStatusIconTemplateSelector.NotRespondedTemplate>
            <selectors:RsvpStatusIconTemplateSelector.ConfirmedTemplate>
                <DataTemplate>
                    <coreControls:WinoFontIcon
                        FontSize="20"
                        Foreground="#527257"
                        Icon="EventAccept" />
                </DataTemplate>
            </selectors:RsvpStatusIconTemplateSelector.ConfirmedTemplate>
            <selectors:RsvpStatusIconTemplateSelector.TentativeTemplate>
                <DataTemplate>
                    <coreControls:WinoFontIcon
                        FontSize="20"
                        Foreground="#805682"
                        Icon="EventTentative" />
                </DataTemplate>
            </selectors:RsvpStatusIconTemplateSelector.TentativeTemplate>
            <selectors:RsvpStatusIconTemplateSelector.CancelledTemplate>
                <DataTemplate>
                    <coreControls:WinoFontIcon
                        FontSize="20"
                        Foreground="{ThemeResource DeleteBrush}"
                        Icon="EventDecline" />
                </DataTemplate>
            </selectors:RsvpStatusIconTemplateSelector.CancelledTemplate>
        </selectors:RsvpStatusIconTemplateSelector>

        <Style x:Key="ActionBarElementContainerStackStyle" TargetType="StackPanel">
            <Setter Property="Spacing" Value="6" />
            <Setter Property="Padding" Value="10,0,4,0" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Orientation" Value="Horizontal" />
        </Style>

        <Style x:Key="EventDetailsPanelGridStyle" TargetType="Grid">
            <Setter Property="Padding" Value="12,6" />
            <Setter Property="Margin" Value="0,12" />
            <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
            <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
        </Style>

        <Style
            x:Key="EventDetailsPanelTitleStyle"
            BasedOn="{StaticResource SubtitleTextBlockStyle}"
            TargetType="TextBlock">
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Margin" Value="0,0,0,20" />
        </Style>
    </Page.Resources>
    <Grid Padding="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Action Bar  -->
        <Border
            VerticalAlignment="Top"
            Background="{ThemeResource WinoContentZoneBackgroud}"
            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="7">
            <Grid Padding="8">
                <ctControls:WrapPanel
                    x:Name="ActionBarWrapGrid"
                    HorizontalAlignment="Left"
                    HorizontalSpacing="4"
                    VerticalSpacing="4">

                    <!--  Save  -->
                    <Button Command="{x:Bind ViewModel.SaveCommand}" Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="Save" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Buttons_Save}" />
                        </StackPanel>
                    </Button>

                    <!--  Delete  -->
                    <Button Command="{x:Bind ViewModel.DeleteCommand}" Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="Delete" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Buttons_Delete}" />
                        </StackPanel>
                    </Button>

                    <Border
                        Width="1"
                        Height="24"
                        Margin="4,0"
                        VerticalAlignment="Center"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                    <!--  Join Online  -->
                    <Button
                        Command="{x:Bind ViewModel.JoinOnlineCommand}"
                        IsEnabled="{x:Bind calendarHelpers:CalendarXamlHelpers.HasOnlineMeetingLink(ViewModel.CurrentEvent), Mode=OneWay}"
                        Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="EventJoinOnline" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventDetails_JoinOnline}" />
                        </StackPanel>
                    </Button>

                    <Border
                        Width="1"
                        Height="24"
                        Margin="4,0"
                        VerticalAlignment="Center"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                    <!--  RSVP Button  -->
                    <Button
                        Background="{ThemeResource CardBackgroundFillColorDefault}"
                        Command="{x:Bind ViewModel.ToggleRsvpPanelCommand}"
                        Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <ContentControl Content="{x:Bind ViewModel.CurrentRsvpStatus, Mode=OneWay}" ContentTemplateSelector="{StaticResource RsvpStatusIconSelector}" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.CurrentRsvpText, Mode=OneWay}" />
                        </StackPanel>
                    </Button>

                    <Border
                        Width="1"
                        Height="24"
                        Margin="4,0"
                        VerticalAlignment="Center"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                    <!--  Show as  -->
                    <StackPanel
                        Padding="12,0"
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        Spacing="8">
                        <coreControls:WinoFontIcon FontSize="20" Icon="CalendarShowAs" />
                        <ComboBox
                            Width="150"
                            VerticalAlignment="Center"
                            ItemsSource="{x:Bind ViewModel.ShowAsOptions}"
                            SelectedItem="{x:Bind ViewModel.SelectedShowAsOption, Mode=TwoWay}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="calendarViewModels:ShowAsOption">
                                    <TextBlock Text="{x:Bind DisplayText}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </StackPanel>

                    <!--  Reminder  -->
                    <Button Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="Reminder" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventDetails_Reminder}" />
                        </StackPanel>
                        <Button.Flyout>
                            <Flyout>
                                <ListView
                                    Width="200"
                                    MaxHeight="300"
                                    ItemsSource="{x:Bind ViewModel.ReminderOptions}"
                                    SelectionMode="None">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="calendarViewModels:ReminderOption">
                                            <CheckBox Content="{x:Bind DisplayText}" IsChecked="{x:Bind IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Flyout>
                        </Button.Flyout>
                    </Button>

                    <Border
                        Width="1"
                        Height="24"
                        Margin="4,0"
                        VerticalAlignment="Center"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                    <!--  Test Notification  -->
                    <Button Command="{x:Bind ViewModel.CreateTestNotificationCommand}" Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="Reminder" />
                            <TextBlock VerticalAlignment="Center" Text="Test notification" />
                        </StackPanel>
                    </Button>

                    <!--  Edit Series  -->
                    <Border
                        Width="1"
                        Height="24"
                        Margin="4,0"
                        VerticalAlignment="Center"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}"
                        Visibility="{x:Bind ViewModel.CanEditSeries, Mode=OneWay}" />

                    <Button
                        Command="{x:Bind ViewModel.ViewSeriesCommand}"
                        Style="{StaticResource TransparentActionButtonStyle}"
                        Visibility="{x:Bind ViewModel.CanEditSeries, Mode=OneWay}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="16" Icon="EventEditSeries" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventDetails_EditSeries}" />
                        </StackPanel>
                    </Button>
                </ctControls:WrapPanel>
            </Grid>
        </Border>

        <!--  RSVP Panel  -->
        <Border
            Grid.Row="1"
            Margin="0,8,0,0"
            Padding="16"
            VerticalAlignment="Top"
            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="7"
            Visibility="{x:Bind ViewModel.IsRsvpPanelVisible, Mode=OneWay}">
            <Grid RowSpacing="6">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--  Close Button  -->
                <Button
                    Grid.Column="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Command="{x:Bind ViewModel.CloseRsvpPanelCommand}"
                    Style="{StaticResource TransparentActionButtonStyle}">
                    <coreControls:WinoFontIcon FontSize="16" Icon="Dismiss" />
                </Button>

                <!--  RSVP Buttons  -->
                <StackPanel Orientation="Horizontal" Spacing="4">
                    <!--  Accept  -->
                    <Button
                        Command="{x:Bind ViewModel.SendRsvpResponseCommand}"
                        CommandParameter="{x:Bind enums:AttendeeStatus.Accepted}"
                        Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon
                                FontSize="20"
                                Foreground="#527257"
                                Icon="EventAccept" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventRsvpPanel_Accept, Mode=OneTime}" />
                        </StackPanel>
                    </Button>

                    <!--  Tentative  -->
                    <Button
                        Command="{x:Bind ViewModel.SendRsvpResponseCommand}"
                        CommandParameter="{x:Bind enums:AttendeeStatus.Tentative}"
                        Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon
                                FontSize="20"
                                Foreground="#805682"
                                Icon="EventTentative" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventRsvpPanel_Tentative, Mode=OneTime}" />
                        </StackPanel>
                    </Button>

                    <!--  Decline  -->
                    <Button
                        Command="{x:Bind ViewModel.SendRsvpResponseCommand}"
                        CommandParameter="{x:Bind enums:AttendeeStatus.Declined}"
                        Style="{StaticResource TransparentActionButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon
                                FontSize="20"
                                Foreground="{ThemeResource DeleteBrush}"
                                Icon="EventDecline" />
                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventRsvpPanel_Decline, Mode=OneTime}" />
                        </StackPanel>
                    </Button>
                </StackPanel>

                <!--  Reply Message TextBox  -->
                <TextBox
                    Grid.Row="1"
                    Grid.ColumnSpan="2"
                    VerticalAlignment="Center"
                    AcceptsReturn="True"
                    PlaceholderText="{x:Bind domain:Translator.CalendarEventRsvpPanel_AddMessage, Mode=OneTime}"
                    Text="{x:Bind ViewModel.RsvpMessage, Mode=TwoWay}"
                    TextWrapping="Wrap">
                    <TextBox.Header>
                        <StackPanel Orientation="Horizontal" />
                    </TextBox.Header>
                </TextBox>
            </Grid>
        </Border>

        <!--  Event details  -->
        <ScrollViewer Grid.Row="2">
            <Grid ColumnSpacing="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!--  Details  -->
                <Grid x:Name="DetailsGrid" Style="{StaticResource EventDetailsPanelGridStyle}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_Details}" />

                    <!--  Read-Only Event  -->
                    <Grid
                        x:Name="ReadOnlyDetailsGrid"
                        Grid.Row="1"
                        RowSpacing="6">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <!--  Title  -->
                        <TextBlock
                            Style="{StaticResource SubheaderTextBlockStyle}"
                            Text="{x:Bind ViewModel.CurrentEvent.Title, Mode=OneWay}"
                            TextWrapping="Wrap" />

                        <!--  Date and Duration  -->
                        <TextBlock
                            Grid.Row="1"
                            Text="{x:Bind calendarHelpers:CalendarXamlHelpers.GetEventDetailsDateString(ViewModel.CurrentEvent, ViewModel.CurrentSettings), Mode=OneWay}"
                            TextWrapping="Wrap" />

                        <!--  Recurrence Info  -->
                        <Grid
                            Grid.Row="2"
                            ColumnSpacing="6"
                            Visibility="{x:Bind ViewModel.CurrentEvent.IsRecurringParent, Mode=OneWay}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <coreControls:WinoFontIcon FontSize="14" Icon="CalendarEventRepeat" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="{x:Bind calendarHelpers:CalendarXamlHelpers.GetRecurrenceString(ViewModel.CurrentEvent, ViewModel.CurrentSettings), Mode=OneWay}"
                                TextWrapping="Wrap" />
                        </Grid>

                        <!--  WebView  -->
                        <WebView2 x:Name="EventDetailsWebView" Grid.Row="3" />
                    </Grid>
                </Grid>

                <!--  People  -->
                <Grid
                    x:Name="PeopleGrid"
                    Grid.Column="1"
                    Style="{StaticResource EventDetailsPanelGridStyle}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_People}" />

                    <Grid Grid.Row="1" RowSpacing="6">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <AutoSuggestBox
                            Margin="6,0"
                            BorderThickness="0"
                            PlaceholderText="{x:Bind domain:Translator.CalendarEventDetails_InviteSomeone}"
                            Visibility="{x:Bind ViewModel.IsCurrentUserOrganizer, Mode=OneWay}" />

                        <ListView
                            Grid.Row="1"
                            Margin="-12,0"
                            IsItemClickEnabled="True"
                            ItemsSource="{x:Bind ViewModel.CurrentEvent.Attendees, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="calendar:CalendarEventAttendee">
                                    <Grid Margin="0,6" ColumnSpacing="12">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <controls:ImagePreviewControl
                                            Width="40"
                                            Height="40"
                                            Address="{x:Bind Email}"
                                            DisplayNameOverride="{x:Bind Name}" />

                                        <Grid Grid.Column="1" RowSpacing="4">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>

                                            <TextBlock FontWeight="SemiBold" Text="{x:Bind Name}" />
                                            <TextBlock
                                                Grid.Row="1"
                                                FontSize="13"
                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                Text="{x:Bind Email}" />
                                            <StackPanel
                                                Grid.Row="2"
                                                Orientation="Horizontal"
                                                Spacing="6">
                                                <Border
                                                    Padding="6,2"
                                                    Background="{ThemeResource AccentFillColorDefaultBrush}"
                                                    CornerRadius="4"
                                                    Visibility="{x:Bind IsOrganizer}">
                                                    <TextBlock
                                                        FontSize="11"
                                                        FontWeight="SemiBold"
                                                        Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
                                                        Text="{x:Bind domain:Translator.CalendarEventDetails_Organizer}" />
                                                </Border>

                                            </StackPanel>
                                        </Grid>
                                        <Border
                                            Grid.Column="2"
                                            Padding="6,2"
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Center"
                                            Background="{ThemeResource CardStrokeColorDefaultBrush}"
                                            CornerRadius="4"
                                            Visibility="{x:Bind calendarHelpers:CalendarXamlHelpers.GetAttendeeStatusVisibility(AttendenceStatus)}">
                                            <TextBlock
                                                FontSize="11"
                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                Text="{x:Bind calendarHelpers:CalendarXamlHelpers.GetAttendeeStatusText(AttendenceStatus)}" />
                                        </Border>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </Grid>

                <!--  Attachments  -->
                <Grid
                    x:Name="AttachmentsGrid"
                    Grid.Column="2"
                    Style="{StaticResource EventDetailsPanelGridStyle}"
                    Visibility="{x:Bind ViewModel.HasAttachments, Mode=OneWay}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_Attachments}" />

                    <ListView
                        Grid.Row="1"
                        Margin="-12,0"
                        IsItemClickEnabled="True"
                        ItemClick="AttachmentClicked"
                        ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
                        SelectionMode="None">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="data:CalendarAttachmentViewModel">
                                <Grid Height="51">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="50" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid
                                        Grid.Row="0"
                                        Height="50"
                                        Margin="-8,0,0,0"
                                        Background="Transparent"
                                        ColumnSpacing="3">
                                        <ToolTipService.ToolTip>
                                            <ToolTip Content="{x:Bind FileName}" />
                                        </ToolTipService.ToolTip>
                                        <Grid.ContextFlyout>
                                            <MenuFlyout Placement="Right">
                                                <MenuFlyoutItem
                                                    Click="OpenCalendarAttachment_Click"
                                                    CommandParameter="{x:Bind}"
                                                    Text="{x:Bind domain:Translator.Buttons_Open}">
                                                    <MenuFlyoutItem.Icon>
                                                        <PathIcon Data="{StaticResource OpenFilePathIcon}" />
                                                    </MenuFlyoutItem.Icon>
                                                </MenuFlyoutItem>
                                                <MenuFlyoutItem
                                                    Click="SaveCalendarAttachment_Click"
                                                    CommandParameter="{x:Bind}"
                                                    Text="{x:Bind domain:Translator.Buttons_Save}">
                                                    <MenuFlyoutItem.Icon>
                                                        <PathIcon Data="{StaticResource SaveAttachmentPathIcon}" />
                                                    </MenuFlyoutItem.Icon>
                                                </MenuFlyoutItem>
                                            </MenuFlyout>
                                        </Grid.ContextFlyout>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="40" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <!--  Icon  -->
                                        <ContentControl
                                            VerticalAlignment="Center"
                                            Content="{x:Bind AttachmentType}"
                                            ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />

                                        <!--  Name && Size  -->
                                        <Grid
                                            Grid.Column="1"
                                            MaxWidth="200"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>

                                            <TextBlock
                                                FontSize="13"
                                                MaxLines="1"
                                                Text="{x:Bind FileName}"
                                                TextTrimming="CharacterEllipsis"
                                                TextWrapping="Wrap" />

                                            <TextBlock
                                                Grid.Row="1"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Bottom"
                                                FontSize="11"
                                                Foreground="Gray"
                                                Text="{x:Bind ReadableSize}" />
                                        </Grid>
                                    </Grid>
                                    <ProgressBar
                                        Grid.Row="1"
                                        Margin="0,-5,0,0"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Top"
                                        IsIndeterminate="{x:Bind IsBusy, Mode=OneWay}"
                                        ShowError="False"
                                        ShowPaused="False"
                                        Visibility="{x:Bind IsBusy, Mode=OneWay}" />
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </Grid>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowWidthStates">
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1200" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="MediumState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  Details takes left side (full height), People and Attachments share right side vertically  -->
                        <Setter Target="DetailsGrid.(Grid.Row)" Value="0" />
                        <Setter Target="DetailsGrid.(Grid.Column)" Value="0" />
                        <Setter Target="DetailsGrid.(Grid.RowSpan)" Value="2" />
                        <Setter Target="DetailsGrid.(Grid.ColumnSpan)" Value="1" />
                        <Setter Target="PeopleGrid.(Grid.Row)" Value="0" />
                        <Setter Target="PeopleGrid.(Grid.Column)" Value="1" />
                        <Setter Target="PeopleGrid.(Grid.ColumnSpan)" Value="2" />
                        <!--  People grid spans both rows when attachments are hidden  -->
                        <Setter Target="PeopleGrid.(Grid.RowSpan)" Value="2" />
                        <Setter Target="AttachmentsGrid.(Grid.Row)" Value="1" />
                        <Setter Target="AttachmentsGrid.(Grid.Column)" Value="1" />
                        <Setter Target="AttachmentsGrid.(Grid.ColumnSpan)" Value="2" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  Stack all panels vertically  -->
                        <Setter Target="DetailsGrid.(Grid.Row)" Value="0" />
                        <Setter Target="DetailsGrid.(Grid.Column)" Value="0" />
                        <Setter Target="DetailsGrid.(Grid.ColumnSpan)" Value="3" />
                        <Setter Target="PeopleGrid.(Grid.Row)" Value="1" />
                        <Setter Target="PeopleGrid.(Grid.Column)" Value="0" />
                        <Setter Target="PeopleGrid.(Grid.ColumnSpan)" Value="3" />
                        <Setter Target="AttachmentsGrid.(Grid.Row)" Value="2" />
                        <Setter Target="AttachmentsGrid.(Grid.Column)" Value="0" />
                        <Setter Target="AttachmentsGrid.(Grid.ColumnSpan)" Value="3" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</abstract:EventDetailsPageAbstract>

