<local:XboxAccountPageBase
    x:Class="Bili.App.Pages.Xbox.XboxAccountPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Bili.App.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:loc="using:Bili.App.Resources.Extension"
    xmlns:local="using:Bili.App.Pages.Xbox"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <local:XboxAccountPageBase.Resources>
        <Style
            x:Key="CommandButtonStyle"
            BasedOn="{StaticResource DefaultButtonStyle}"
            TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="Padding" Value="0,16" />
        </Style>
    </local:XboxAccountPageBase.Resources>

    <Grid Padding="{x:Bind CoreViewModel.PageHorizontalPadding, Converter={StaticResource HorizontalThicknessConverter}, Mode=OneWay}" ColumnSpacing="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel VerticalAlignment="Center" Spacing="12">
            <controls:UserAvatar
                Width="120"
                Height="120"
                HorizontalAlignment="Center"
                Avatar="{x:Bind ViewModel.AccountViewModel.Avatar, Mode=OneWay}"
                AvatarRadius="60"
                IsEnabled="False" />
            <TextBlock
                HorizontalAlignment="Center"
                FontSize="28"
                FontWeight="Bold"
                Text="{x:Bind ViewModel.AccountViewModel.DisplayName, Mode=OneWay}"
                TextAlignment="Center"
                TextWrapping="Wrap" />
        </StackPanel>
        <StackPanel
            Grid.Column="1"
            VerticalAlignment="Center"
            Spacing="24"
            XYFocusDownNavigationStrategy="RectilinearDistance"
            XYFocusKeyboardNavigation="Enabled"
            XYFocusUpNavigationStrategy="RectilinearDistance">
            <Button
                x:Name="FavoriteButton"
                Style="{StaticResource CommandButtonStyle}"
                Command="{x:Bind ViewModel.GotoFavoritePageCommand}"
                XYFocusDown="{x:Bind ViewLaterButton}">
                <controls:IconTextBlock
                    FontSize="20"
                    IconFontSize="24"
                    Symbol="StarLineHorizontal320"
                    Text="{loc:Locale Name=MyFavorite}" />
            </Button>
            <Button
                x:Name="ViewLaterButton"
                Style="{StaticResource CommandButtonStyle}"
                Command="{x:Bind ViewModel.GotoViewLaterPageCommand}"
                XYFocusDown="{x:Bind HistoryButton}"
                XYFocusUp="{x:Bind FavoriteButton}">
                <controls:IconTextBlock
                    FontSize="20"
                    IconFontSize="24"
                    Symbol="CalendarClock16"
                    Text="{loc:Locale Name=ViewLater}" />
            </Button>
            <Button
                x:Name="HistoryButton"
                Style="{StaticResource CommandButtonStyle}"
                Command="{x:Bind ViewModel.GotoHistoryPageCommand}"
                XYFocusDown="{x:Bind SignOutButton}"
                XYFocusUp="{x:Bind ViewLaterButton}">
                <controls:IconTextBlock
                    FontSize="20"
                    IconFontSize="24"
                    Symbol="History20"
                    Text="{loc:Locale Name=ViewHistory}" />
            </Button>
            <Button
                x:Name="SignOutButton"
                Style="{StaticResource CommandButtonStyle}"
                Command="{x:Bind ViewModel.SignOutCommand}"
                XYFocusUp="{x:Bind HistoryButton}">
                <controls:IconTextBlock
                    FontSize="20"
                    Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                    IconFontSize="24"
                    Symbol="SignOut20"
                    Text="{loc:Locale Name=SignOut}" />
            </Button>
        </StackPanel>
    </Grid>
</local:XboxAccountPageBase>
