<?xml version="1.0" encoding="utf-8" ?>
<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:r="clr-namespace:Billing.Languages"
                xmlns:ui="clr-namespace:Billing.UI"
                xmlns:v="clr-namespace:Billing.Views"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Billing.Views.CategorySelectPage"
                x:Name="categorySelectPage"
                x:DataType="v:CategorySelectPage"
                BindingContext="{x:Reference categorySelectPage}"
                Title="{r:Text SelectCategory}">

    <ContentPage.Resources>
        <ui:IconConverter x:Key="iconConverter"/>
        <ui:SelectBackgroundColorConverter x:Key="backgroundConverter"/>
    </ContentPage.Resources>

    <Grid ColumnDefinitions=".5*, .5*">
        <ScrollView>
            <ui:GroupStackLayout ItemsSource="{Binding TopCategories}" Padding="0, 10, 0, 0"
                                 GroupHeight="36" RowHeight="44">
                <ui:GroupStackLayout.GroupHeaderTemplate>
                    <DataTemplate x:DataType="v:CategoryGrouping">
                        <StackLayout Orientation="Horizontal" Padding="10, 0" VerticalOptions="End">
                            <Label Text="{Binding Key}"
                                   TextColor="{DynamicResource SecondaryTextColor}"/>
                        </StackLayout>
                    </DataTemplate>
                </ui:GroupStackLayout.GroupHeaderTemplate>
                <ui:GroupStackLayout.ItemTemplate>
                    <DataTemplate x:DataType="v:UICategory">
                        <Grid Padding="20, 0, 10, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *"
                              BackgroundColor="{Binding IsChecked, Converter={StaticResource backgroundConverter}}">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding TapTopCategory, Source={x:Reference categorySelectPage}}"
                                                      CommandParameter="{Binding .}"/>
                            </Grid.GestureRecognizers>
                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
                                          ui:TintHelper.TintColor="{Binding TintColor}"
                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                   HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                   FontSize="Default" FontAttributes="Bold"/>
                        </Grid>
                    </DataTemplate>
                </ui:GroupStackLayout.ItemTemplate>
            </ui:GroupStackLayout>
        </ScrollView>

        <ScrollView Grid.Column="1">
            <ui:GroupStackLayout ItemsSource="{Binding SubCategories}" RowHeight="44" Padding="0, 50, 0, 0">
                <ui:GroupStackLayout.ItemTemplate>
                    <DataTemplate x:DataType="v:UICategory">
                        <Grid Padding="20, 0, 10, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *"
                              BackgroundColor="{Binding IsChecked, Converter={StaticResource backgroundConverter}}">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding TapSubCategory, Source={x:Reference categorySelectPage}}"
                                                      CommandParameter="{Binding .}"/>
                            </Grid.GestureRecognizers>
                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
                                          ui:TintHelper.TintColor="{Binding TintColor}"
                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                   HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                   FontSize="Default" FontAttributes="Bold"/>
                        </Grid>
                    </DataTemplate>
                </ui:GroupStackLayout.ItemTemplate>
            </ui:GroupStackLayout>
        </ScrollView>
    </Grid>
</ui:BillingPage>