<?xml version="1.0" encoding="utf-8" ?>
<local:PopularPageControlBase
    x:Class="BiliCopilot.UI.Controls.Popular.PopularMainHeader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:extensions="using:BiliCopilot.UI.Extensions"
    xmlns:ic="using:FluentIcons.WinUI"
    xmlns:items="using:BiliCopilot.UI.ViewModels.Items"
    xmlns:local="using:BiliCopilot.UI.Controls.Popular"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <UserControl.Resources>
        <DataTemplate x:Key="SectionTemplate" x:DataType="items:PopularSectionItemViewModel">
            <local:PopularSectionItemControl FontWeight="Bold" ViewModel="{x:Bind}" />
        </DataTemplate>
        <DataTemplate x:Key="PartitionTemplate" x:DataType="items:PopularRankPartitionViewModel">
            <local:PopularRankParitionItemControl FontWeight="Bold" ViewModel="{x:Bind}" />
        </DataTemplate>
        <extensions:PopularSectionTemplateSelector
            x:Key="SectionSelector"
            PartitionTemplate="{StaticResource PartitionTemplate}"
            SectionTemplate="{StaticResource SectionTemplate}" />
    </UserControl.Resources>

    <Grid Padding="16,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ContentControl
            VerticalAlignment="Center"
            Content="{x:Bind ViewModel.SelectedSection, Mode=OneWay}"
            ContentTemplateSelector="{StaticResource SectionSelector}" />
        <Button
            Grid.Column="1"
            VerticalAlignment="Center"
            AutomationProperties.Name="{extensions:Locale Name=Refresh}"
            Command="{x:Bind ViewModel.RefreshVideoCommand}">
            <StackPanel Orientation="Horizontal" Spacing="8">
                <ic:SymbolIcon
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                    Symbol="ArrowSync" />
                <TextBlock VerticalAlignment="Center" Text="{extensions:Locale Name=Refresh}" />
            </StackPanel>
        </Button>
    </Grid>
</local:PopularPageControlBase>
