<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:p="clr-namespace:Pixiview"
       xmlns:i="clr-namespace:Pixiview.Illust"
       xmlns:r="clr-namespace:Pixiview.Resources"
       xmlns:u="clr-namespace:Pixiview.UI"
       xmlns:util="clr-namespace:Pixiview.Utils"
       x:Class="Pixiview.AppShell"
       BackgroundColor="{DynamicResource NavColor}"
       ForegroundColor="{DynamicResource TintColor}"
       TitleColor="{DynamicResource TextColor}"
       UnselectedColor="{DynamicResource SubTextColor}"
       FlyoutBackgroundColor="{DynamicResource WindowColor}">
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid RowSpacing="0" BackgroundColor="{DynamicResource WindowColor}" Padding="20, 0, 0, 20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>
                <u:CircleImage Aspect="AspectFill" Source="userprofile.jpg"
                               HeightRequest="60" WidthRequest="60"
                               VerticalOptions="End" HorizontalOptions="Start"/>
                <Label Grid.Row="1" VerticalOptions="End" FontAttributes="Bold"
                       Text="Tsanie" TextColor="{DynamicResource TextColor}"/>
                <Label Grid.Row="2" VerticalOptions="Center" FontSize="Small"
                       Text="@tsanie" TextColor="{DynamicResource SubTextColor}"/>
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
    <Shell.ItemTemplate>
        <DataTemplate x:DataType="BaseShellItem">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="{DynamicResource WindowColor}"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="{DynamicResource NavSelectedColor}"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       HorizontalOptions="Center" VerticalOptions="Center"
                       HeightRequest="22"/>
                <Label Grid.Column="1" TextColor="{DynamicResource TextColor}"
                       Text="{Binding Title}"
                       FontSize="{x:OnPlatform Android=14, iOS=Small}"
                       VerticalTextAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"
                Route="{x:Static util:Routes.Illust}">
        <Tab Icon="{DynamicResource FontIconUser}"
             Title="{r:Text Follow}"
             Route="{x:Static util:Routes.Follow}">
            <ShellContent ContentTemplate="{DataTemplate i:MainPage}"/>
        </Tab>
        <Tab Icon="{DynamicResource FontIconSparkles}"
             Title="{r:Text Recommends}"
             Route="{x:Static util:Routes.Recommends}">
            <ShellContent ContentTemplate="{DataTemplate i:RecommendsPage}"/>
        </Tab>
        <Tab Icon="{DynamicResource FontIconOrder}"
             Title="{r:Text Ranking}"
             Route="{x:Static util:Routes.Ranking}">
            <ShellContent ContentTemplate="{DataTemplate i:RankingPage}"/>
        </Tab>
        <Tab Icon="{DynamicResource FontIconFavorite}"
             Title="{r:Text Favorites}"
             Route="{x:Static util:Routes.Favorites}">
            <ShellContent ContentTemplate="{DataTemplate i:FavoritesPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Icon="{DynamicResource FontIconOption}"
                Title="{r:Text Option}"
                Route="{x:Static util:Routes.Option}">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate p:OptionPage}"/>
        </Tab>
    </FlyoutItem>
</Shell>
