<?xml version="1.0" encoding="UTF-8"?>
<i:IllustRankingDataCollectionPage xmlns="http://xamarin.com/schemas/2014/forms"
                                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                                   xmlns:i="clr-namespace:Pixiview.Illust"
                                   xmlns:u="clr-namespace:Pixiview.UI"
                                   xmlns:r="clr-namespace:Pixiview.Resources"
                                   xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                                   x:Class="Pixiview.Illust.RankingPage"
                                   BackgroundColor="{DynamicResource WindowColor}"
                                   Title="{r:Text Ranking}">
    <Shell.TitleView>
        <Grid VerticalOptions="Fill" ColumnSpacing="6"
               HorizontalOptions="{x:OnPlatform Android=Start, iOS=Fill}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{OnPlatform Android=Auto}"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackLayout Grid.Column="1" Orientation="Horizontal" Spacing="6">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </StackLayout.GestureRecognizers>
                <Label Text="{Binding Title}"
                       TextColor="{DynamicResource TextColor}"
                       FontSize="{OnPlatform Android=18}"
                       LineBreakMode="HeadTruncation"
                       VerticalTextAlignment="Center" FontAttributes="Bold"/>
                <Label x:Name="labelCaret"
                       Text="{DynamicResource IconCaretDown}"
                       TextColor="{DynamicResource TextColor}"
                       FontFamily="{DynamicResource IconSolidFontFamily}"
                       FontSize="Small"
                       VerticalTextAlignment="Center"/>
            </StackLayout>
        </Grid>
    </Shell.TitleView>
    <ContentPage.ToolbarItems>
        <ToolbarItem Order="Primary"
                     Command="{Binding ToolbarCommand}" CommandParameter="prev"
                     IconImageSource="{DynamicResource FontIconCaretCircleLeft}"/>
        <ToolbarItem Order="Primary"
                     Command="{Binding ToolbarCommand}" CommandParameter="select"
                     IconImageSource="{DynamicResource FontIconCalendarDay}"/>
        <ToolbarItem Order="Primary"
                     Command="{Binding ToolbarCommand}" CommandParameter="next"
                     IconImageSource="{DynamicResource FontIconCaretCircleRight}"/>
    </ContentPage.ToolbarItems>
    <Grid>
        <ScrollView x:Name="scrollView" Scrolled="ScrollView_Scrolled"
                    HorizontalOptions="Fill" HorizontalScrollBarVisibility="Never">
            <StackLayout>
                <ActivityIndicator x:Name="activityLoading" Margin="0, -40, 0, 0"
                                   HeightRequest="40"
                                   IsRunning="{Binding IsLoading}"
                                   IsVisible="{Binding IsLoading}"/>
                <u:FlowLayout ItemsSource="{Binding Illusts}" MaxHeightChanged="FlowLayout_MaxHeightChanged"
                              HorizontalOptions="Fill" Column="{Binding Columns}"
                              Margin="16" RowSpacing="16" ColumnSpacing="16"
                              ItemTemplate="{StaticResource cardView}"/>
                <ActivityIndicator x:Name="activityBottomLoading" Margin="0, -10, 0, 16"
                                   IsRunning="{Binding IsBottomLoading}"
                                   IsVisible="{Binding IsBottomLoading}"/>
            </StackLayout>
        </ScrollView>
        <u:BlurryPanel x:Name="panelFilter" VerticalOptions="Start" Opacity="0"
                       Margin="{Binding PanelTopMargin}"
                       BackgroundColor="{DynamicResource WindowColor}"
                       HeightRequest="{Binding Height, Source={x:Reference gridFilter}}"/>
        <Grid x:Name="gridFilter" VerticalOptions="Start" Opacity="0"
              Margin="{Binding PageTopMargin}" Padding="10">
            <Grid RowSpacing="0" HorizontalOptions="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <u:SegmentedControl Margin="6, 6, 6, 3" VerticalOptions="Center"
                                    SelectedSegmentIndex="{Binding SegmentDate, Mode=TwoWay}"
                                    SelectedTextColor="{DynamicResource TextColor}"
                                    TintColor="{DynamicResource CardBackgroundColor}">
                    <u:SegmentedControl.Children>
                        <u:SegmentedControlOption Text="{r:Text Daily}"/>
                        <u:SegmentedControlOption Text="{r:Text Weekly}"/>
                        <u:SegmentedControlOption Text="{r:Text Monthly}"/>
                        <u:SegmentedControlOption Text="{r:Text Male}"/>
                    </u:SegmentedControl.Children>
                </u:SegmentedControl>
                <u:SegmentedControl Grid.Row="1" HorizontalOptions="Start"
                                    IsVisible="{Binding SegmentTypeVisible}"
                                    Margin="6, 3, 6, 6" VerticalOptions="Center"
                                    SelectedSegmentIndex="{Binding SegmentType, Mode=TwoWay}"
                                    SelectedTextColor="{DynamicResource TextColor}"
                                    TintColor="{DynamicResource CardBackgroundColor}">
                    <u:SegmentedControl.Children>
                        <u:SegmentedControlOption Text="{r:Text General}"/>
                        <u:SegmentedControlOption Text="{r:Text R18}"/>
                    </u:SegmentedControl.Children>
                </u:SegmentedControl>
                <Button Grid.Row="1" HorizontalOptions="End" VerticalOptions="Center"
                        Text="{DynamicResource IconCircleCheck}"
                        FontFamily="{DynamicResource IconSolidFontFamily}"
                        BackgroundColor="Transparent"
                        TextColor="{DynamicResource TintColor}"
                        FontSize="20" Margin="0, 0, 6, 0"
                        Clicked="Filter_Clicked"/>
            </Grid>
        </Grid>

        <DatePicker x:Name="datePicker" IsVisible="False"
                    ios:DatePicker.UpdateMode="WhenFinished"
                    Date="{Binding SelectedDate}"
                    MaximumDate="{Binding MaximumDate}"
                    DateSelected="DatePicker_DateSelected"/>
    </Grid>
</i:IllustRankingDataCollectionPage>
