<?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:m="clr-namespace:Billing.Models"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Billing.Views.AccountPage"
                x:Name="accountPage"
                x:DataType="v:AccountPage"
                Title="{r:Text Accounts}"
                BindingContext="{x:Reference accountPage}"
                Shell.TabBarIsVisible="True">

    <ContentPage.Resources>
        <ui:MoneyConverter x:Key="moneyConverter"/>
        <ui:AccountCategoryConverter x:Key="categoryConverter"/>
        <ui:IconConverter x:Key="iconConverter"/>
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
        <ToolbarItem Order="Primary" IconImageSource="plus.png" Command="{Binding EditAccount}"/>
    </ContentPage.ToolbarItems>

    <ScrollView>
        <StackLayout>
            <Grid HeightRequest="100" BackgroundColor="{DynamicResource PromptBackgroundColor}" ColumnDefinitions="Auto, *">
                <!--<Grid.Effects>
                    <ui:ShadowEffect Offect="0, 3" Color="Black" Opacity=".4"/>
                </Grid.Effects>-->
                <StackLayout VerticalOptions="Center" Margin="20, 0" Spacing="4">
                    <Label FontSize="Small" Text="{r:Text Balance}"/>
                    <Label FontSize="24" FontFamily="{DynamicResource FontSemiBold}"
                           Text="{Binding Balance, Converter={StaticResource moneyConverter}}"/>
                </StackLayout>
                <Grid Grid.Column="1" Margin="20, 0" VerticalOptions="Center" HorizontalOptions="End"
                      ColumnDefinitions="Auto, Auto" RowDefinitions="Auto, Auto" IsVisible="False">
                    <Label FontSize="Small" HorizontalOptions="End" Text="{r:Text Assets}"/>
                    <Label Grid.Column="1" FontSize="Small" Margin="10, 0, 0, 0" HorizontalOptions="End"
                           Text="{Binding Asset, Converter={StaticResource moneyConverter}}"/>
                    <Label Grid.Row="1" FontSize="Small" HorizontalOptions="End" Text="{r:Text Liability}"/>
                    <Label Grid.Row="1" Grid.Column="1" FontSize="Small" Margin="10, 0, 0, 0" HorizontalOptions="End"
                           TextColor="{DynamicResource RedColor}"
                           Text="{Binding Liability, Converter={StaticResource moneyConverter}}"/>
                </Grid>
            </Grid>
            <ui:GroupStackLayout x:Name="groupLayout" ItemsSource="{Binding Accounts}" Margin="0, 10, 0, 0"
                                 GroupHeight="36" RowHeight="44">
                <ui:GroupStackLayout.GroupHeaderTemplate>
                    <DataTemplate x:DataType="v:AccountGrouping">
                        <StackLayout Orientation="Horizontal" Padding="10, 0" VerticalOptions="End">
                            <Label Text="{Binding Key, Converter={StaticResource categoryConverter}}"
                                   TextColor="{DynamicResource SecondaryTextColor}"/>
                            <Label Text="{Binding Balance, Converter={StaticResource moneyConverter}}"
                                   Margin="10, 0" TextColor="{DynamicResource SecondaryTextColor}"/>
                        </StackLayout>
                    </DataTemplate>
                </ui:GroupStackLayout.GroupHeaderTemplate>
                <ui:GroupStackLayout.ItemTemplate>
                    <DataTemplate x:DataType="m:Account">
                        <ui:LongPressGrid Padding="20, 0, 10, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *, Auto, Auto"
                                          LongCommand="{Binding DeleteAccount, Source={x:Reference accountPage}}"
                                          LongCommandParameter="{Binding .}">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding EditAccount, Source={x:Reference accountPage}}"
                                                      CommandParameter="{Binding .}"/>
                            </Grid.GestureRecognizers>
                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                   HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                   FontSize="Default" FontAttributes="Bold"/>
                            <Label Grid.Column="2" Text="{Binding Balance, Converter={StaticResource moneyConverter}}"
                                   TextColor="{DynamicResource SecondaryTextColor}"
                                   VerticalOptions="Center"/>
                            <ui:TintImage Grid.Column="3" Source="right.png" HeightRequest="20"/>
                        </ui:LongPressGrid>
                    </DataTemplate>
                </ui:GroupStackLayout.ItemTemplate>
            </ui:GroupStackLayout>
        </StackLayout>
    </ScrollView>
</ui:BillingPage>