<ui:Page xmlns:props="clr-namespace:Ink_Canvas.Properties" x:Class="Ink_Canvas.Windows.SettingsViews.Pages.AnnouncementCenterPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
      xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
      xmlns:converter="clr-namespace:Ink_Canvas.Converter"
      mc:Ignorable="d"
      Title="{x:Static props:AnnouncementStrings.CenterTitle}">

    <ScrollViewer PanningMode="VerticalFirst" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
        <Grid Margin="59,0,59,24">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="48" />
            </Grid.RowDefinitions>
            <Grid.Resources>
                <converter:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
                <Style x:Key="SettingsSectionHeaderTextBlockStyle"
                       BasedOn="{StaticResource BodyStrongTextBlockStyle}"
                       TargetType="TextBlock">
                    <Setter Property="Margin" Value="1,30,0,6" />
                </Style>
                <Style x:Key="AnnouncementMetaTextBlockStyle"
                       BasedOn="{StaticResource CaptionTextBlockStyle}"
                       TargetType="TextBlock">
                    <Setter Property="Opacity" Value="0.65" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
            </Grid.Resources>

            <TextBlock Text="{x:Static props:AnnouncementStrings.CenterTitle}"
                       Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

            <Border Grid.Row="1"
                    Margin="0,8,0,12"
                    Padding="16"
                    CornerRadius="10"
                    Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <ui:FontIcon Grid.Column="0"
                                 Width="36"
                                 Height="36"
                                 Margin="0,0,14,0"
                                 Icon="{x:Static ui:SegoeFluentIcons.Message}"
                                 FontSize="24"
                                 VerticalAlignment="Top" />

                    <StackPanel Grid.Column="1">
                        <TextBlock Text="{x:Static props:AnnouncementStrings.CenterHint}"
                                   FontSize="16"
                                   FontWeight="SemiBold"
                                   TextWrapping="Wrap" />
                        <TextBlock x:Name="AnnouncementCountTextBlock"
                                   Margin="0,6,0,0"
                                   Opacity="0.72"
                                   TextWrapping="Wrap" />
                    </StackPanel>

                    <StackPanel Grid.Column="2"
                                Orientation="Horizontal"
                                VerticalAlignment="Center"
                                Margin="16,0,0,0">
                        <Button Content="{x:Static props:AnnouncementStrings.MarkAllAsRead}"
                                Margin="0,0,8,0"
                                Click="MarkAllAsReadButton_Click" />
                        <Button Content="{x:Static props:AnnouncementStrings.ClearHistory}"
                                Click="ClearHistoryButton_Click" />
                    </StackPanel>
                </Grid>
            </Border>

            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="320" />
                    <ColumnDefinition Width="16" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Border Grid.Column="0"
                        CornerRadius="10"
                        Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
                    <ui:ListView x:Name="AnnouncementListBox"
                                 BorderThickness="0"
                                 Background="Transparent"
                                 HorizontalContentAlignment="Stretch"
                                 SelectionChanged="AnnouncementListBox_SelectionChanged">
                        <ui:ListView.Template>
                            <ControlTemplate TargetType="ui:ListView">
                                <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                                                  VerticalScrollBarVisibility="Auto">
                                        <ItemsPresenter HorizontalAlignment="Stretch" />
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </ui:ListView.Template>
                        <ui:ListView.ItemContainerStyle>
                            <Style TargetType="ui:ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="MinHeight" Value="36" />
                            </Style>
                        </ui:ListView.ItemContainerStyle>
                        <ui:ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel />
                            </ItemsPanelTemplate>
                        </ui:ListView.ItemsPanel>
                        <ui:ListView.ItemTemplate>
                            <DataTemplate>
                                <Border Padding="12" Margin="4" CornerRadius="8">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <ui:FontIcon Grid.Column="0"
                                                     Width="28"
                                                     Height="28"
                                                     Margin="0,2,10,0"
                                                     Icon="{x:Static ui:SegoeFluentIcons.Message}"
                                                     Opacity="0.85" />
                                        <StackPanel Grid.Column="1">
                                            <DockPanel LastChildFill="True">
                                                <Grid DockPanel.Dock="Right"
                                                      Width="18"
                                                      Height="18"
                                                      Margin="8,0,0,0"
                                                      Visibility="{Binding IsUnread, Converter={StaticResource BooleanToVisibilityConverter}}">
                                                    <Ellipse Fill="{DynamicResource SystemAccentColorBrush}" />
                                                    <TextBlock Text="1"
                                                               Foreground="White"
                                                               FontSize="10"
                                                               FontWeight="SemiBold"
                                                               HorizontalAlignment="Center"
                                                               VerticalAlignment="Center" />
                                                </Grid>
                                                <TextBlock Text="{Binding Type}"
                                                           DockPanel.Dock="Right"
                                                           Style="{StaticResource AnnouncementMetaTextBlockStyle}"
                                                           FontSize="11"
                                                           Margin="8,0,0,0" />
                                                <TextBlock Text="{Binding Title}"
                                                           FontWeight="SemiBold"
                                                           TextTrimming="CharacterEllipsis" />
                                            </DockPanel>
                                            <TextBlock Text="{Binding Summary}"
                                                       Margin="0,5,0,0"
                                                       MaxHeight="42"
                                                       TextWrapping="Wrap"
                                                       TextTrimming="CharacterEllipsis"
                                                       Opacity="0.76" />
                                            <TextBlock Text="{Binding CreatedAt, StringFormat={}{0:yyyy-MM-dd HH:mm}}"
                                                       Margin="0,7,0,0"
                                                       Style="{StaticResource AnnouncementMetaTextBlockStyle}" />
                                        </StackPanel>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ui:ListView.ItemTemplate>
                    </ui:ListView>
                </Border>

                <Border Grid.Column="2"
                        Padding="20"
                        CornerRadius="10"
                        Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TextBlock x:Name="DetailTitleTextBlock"
                                   FontSize="22"
                                   FontWeight="SemiBold"
                                   TextWrapping="Wrap" />

                        <ikw:SimpleStackPanel Grid.Row="1"
                                              Margin="0,10,0,16"
                                              Orientation="Horizontal"
                                              Spacing="12">
                            <TextBlock x:Name="DetailTypeTextBlock"
                                       Style="{StaticResource AnnouncementMetaTextBlockStyle}" />
                            <TextBlock x:Name="DetailTimeTextBlock"
                                       Style="{StaticResource AnnouncementMetaTextBlockStyle}" />
                        </ikw:SimpleStackPanel>

                        <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
                            <StackPanel>
                                <TextBlock x:Name="DetailContentTextBlock"
                                           TextWrapping="Wrap"
                                           LineHeight="22" />
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </Border>

                <TextBlock x:Name="EmptyTextBlock"
                           Grid.ColumnSpan="3"
                           Text="{x:Static props:AnnouncementStrings.NoItems}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Opacity="0.65"
                           Visibility="Collapsed" />
            </Grid>
        </Grid>
    </ScrollViewer>
</ui:Page>
