<?xml version="1.0" encoding="utf-8" ?>
<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
                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.CategoryPage"
                x:Name="categoryPage"
                x:DataType="v:CategoryPage"
                BindingContext="{x:Reference categoryPage}">

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

    <ScrollView>
        <ui:GroupStackLayout x:Name="groupLayout" ItemsSource="{Binding Categories}" 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">
                    <ui:LongPressGrid Padding="20, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *, Auto"
                                      LongCommand="{Binding LongPressed, Source={x:Reference categoryPage}}"
                                      LongCommandParameter="{Binding .}">
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Tapped, Source={x:Reference categoryPage}}"
                                                  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"/>
                        <ui:TintImage Grid.Column="2" Source="right.png" HeightRequest="20"
                                      IsVisible="{Binding IsTopCategory}"/>
                    </ui:LongPressGrid>
                </DataTemplate>
            </ui:GroupStackLayout.ItemTemplate>
        </ui:GroupStackLayout>
    </ScrollView>
</ui:BillingPage>