<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="HelloXaml.Views.PersonListPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml.Views"
    xmlns:model="using:HelloXaml.Models"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="rootGrid"
      Width="300"
      Margin="20"
      HorizontalAlignment="Center"
      d:DataContext="{d:DesignInstance Type=model:Person}"
      ColumnSpacing="10"
      RowSpacing="5">
        <!--<Grid.Background>
        <LinearGradientBrush>
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Black" Offset="0" />
                <GradientStop Color="White" Offset="1" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Grid.Background>-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0"
               Grid.Column="0"
               VerticalAlignment="Center"
               Text="Name" />
        <TextBox Grid.Row="0"
             Grid.Column="1"
             Text="{x:Bind ViewModel.NewPerson.Name, Mode=TwoWay}" TextChanged="{x:Bind ViewModel.RefreshNameValidation}" />

        <TextBlock Grid.Row="1"
               Grid.Column="0"
               VerticalAlignment="Center"
               Text="Age" />
        <Grid Grid.Row="1"
          Grid.Column="1"
          ColumnSpacing="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0"
                Grid.Column="0"
                Command="{x:Bind ViewModel.DecreaseAgeCommand}"
                Content="-" />
            <TextBox Grid.Row="0"
                 Grid.Column="1"
                 Text="{x:Bind ViewModel.NewPerson.Age, Mode=TwoWay}" />
            <Button Grid.Row="0"
                Grid.Column="2"
                Command="{x:Bind ViewModel.IncreaseAgeCommand}"
                Content="+" />
        </Grid>

        <Button Grid.Row="2"
            Grid.Column="1"
            HorizontalAlignment="Right"
            Click="{x:Bind ViewModel.AddPersonToList }" IsEnabled="{x:Bind ViewModel.IsNonEmptyName, Mode=OneWay}">
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Add" />
                <TextBlock Margin="5,0,0,0" Text="Add" />
            </StackPanel>
        </Button>

        <ListView Grid.Row="3"
              Grid.ColumnSpan="2"
              BorderBrush="DarkGray"
              BorderThickness="1"
              ItemsSource="{x:Bind ViewModel.People}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:Person">
                    <Grid>
                        <TextBlock Text="{x:Bind Name}" />
                        <TextBlock HorizontalAlignment="Right" Text="{x:Bind Age}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>
