<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C1CollectionView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1fg="using:C1.Xaml.FlexGrid"
    x:Class="C1CollectionView.MainPage"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- view model -->
        <local:ViewModel x:Key="_vm" />
        
        <!-- style for titles -->
        <Style x:Key="_stTitle" TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Margin" Value="8" />
            <Setter Property="FontSize" Value="24" />
        </Style>

        <!-- style for panel borders -->
        <Style x:Key="_stBorder"  TargetType="Border" >
            <Setter Property="Margin" Value="12" />
            <Setter Property="Padding" Value="22" />
            <Setter Property="BorderBrush" Value="#40ffffff" />
            <Setter Property="BorderThickness" Value="4" />
            <Setter Property="CornerRadius" Value="12" />
        </Style>

        <!-- templates -->
        <DataTemplate x:Key="_lbTemplate" >
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding ID}" Width="40" TextAlignment="Right" Margin="4 0" />
                <TextBlock Text="{Binding Name}" Width="120" Margin="4 0" />
                <TextBlock Text="{Binding Country}" Width="120" Margin="4 0" />
                <TextBlock Text="{Binding Created}" Width="120" Margin="4 0" />
                <TextBlock Text="{Binding Sales}" Width="120" TextAlignment="Right" Margin="4 0" />
                <TextBlock Text="{Binding Growth}" Width="120" TextAlignment="Right" Margin="4 0" />
                <TextBlock Text="{Binding Assets}" Width="120" TextAlignment="Right" Margin="4 0" />
                <TextBlock Text="{Binding Value}" Width="120" TextAlignment="Right" Margin="4 0" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource _vm}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- C1CollectionView title -->
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="C1CollectionView" Style="{StaticResource _stTitle}"/>
            <Button Content="Add Item" Command="{Binding AddCustomer}" Margin="12"/>
            <Button Content="Insert Item" Command="{Binding InsertCustomer}" Margin="12"/>
            <Button Content="Remove Item" Command="{Binding RemoveCustomer}" Margin="12"/>
            <CheckBox Content="Apply Filter" IsChecked="{Binding FilterData, Mode=TwoWay}" Margin="12"/>
            <CheckBox Content="Group Data" IsChecked="{Binding GroupData, Mode=TwoWay}" Margin="12"/>
            <Button Content="Refresh" Command="{Binding Refresh}" Margin="12"/>
            <TextBlock Style="{StaticResource _stTitle}" Margin="12" >
                <Run Text="Items in view: " />
                <Run Text="{Binding Customers.Count}" />
            </TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Margin="20 0 0 0">
            <TextBlock FontSize="{StaticResource ControlContentThemeFontSize}">
                <Run Text="Current Customer" FontWeight="Bold"/>
                <LineBreak />
                <Run Text="ID: " />
                <Run Text="{Binding Customers.CurrentItem.ID}" FontWeight="Bold"/>
                <LineBreak />
                <Run Text="Name: " />
                <Run Text="{Binding Customers.CurrentItem.Name}" FontWeight="Bold"/>
                <LineBreak />
                <Run Text="Country: " />
                <Run Text="{Binding Customers.CurrentItem.Country}" FontWeight="Bold"/>
            </TextBlock>
        </StackPanel>
        
        <!-- C1FlexGrid -->
        <StackPanel Orientation="Horizontal" Grid.Row="2" >
            <TextBlock Text="C1FlexGrid" Style="{StaticResource _stTitle}"/>
        </StackPanel>
        <c1fg:C1FlexGrid 
            Name="_flexGrid" Grid.Row="3" 
            ItemsSource="{Binding Customers}"
            KeepCurrentVisible="True"
            AllowAddNew="True" 
            NewRowPosition="Top"
            ShowOutlineBar="True" 
            AutoGenerateColumns="False">
            <c1fg:C1FlexGrid.Columns>
                <c1fg:Column Binding="{Binding ID}" />
                <c1fg:Column Binding="{Binding Name, Mode=TwoWay}" Width="200" />
                <c1fg:Column Binding="{Binding Country, Mode=TwoWay}" />
                <c1fg:Column Binding="{Binding Created, Mode=TwoWay}" Format="d"/>
                <c1fg:Column Binding="{Binding Sales, Mode=TwoWay}" Format="n0" GroupAggregate="Sum"/>
                <c1fg:Column Binding="{Binding Growth, Mode=TwoWay}" Format="0%" GroupAggregate="Average"/>
                <c1fg:Column Binding="{Binding Assets, Mode=TwoWay}" Format="n0" GroupAggregate="Sum"/>
                <c1fg:Column Binding="{Binding Value, Mode=TwoWay}" Format="n0" GroupAggregate="Sum"/>
                <c1fg:Column Binding="{Binding Active, Mode=TwoWay}" />
            </c1fg:C1FlexGrid.Columns>
        </c1fg:C1FlexGrid>

        <!-- ListBox -->
        <StackPanel Orientation="Horizontal" Grid.Row="4" >
            <TextBlock Text="ListBox" Style="{StaticResource _stTitle}"/>
        </StackPanel>
        <ListBox 
            Name="_listBox" Grid.Row="5" 
            ItemsSource="{Binding Customers}"
            ItemTemplate="{StaticResource _lbTemplate}"/>
    </Grid>
</Page>
