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

    <Grid x:Name="ContentArea"
          Padding="10"
          RowSpacing="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0"
                   Style="{StaticResource TitleLargeTextBlockStyle}"
                   Text="Books" />

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <ComboBox x:Name="genreFilterComboBox"
                      Grid.Row="1"
                      PlaceholderText="Filter Genre" 
                      ItemsSource="{x:Bind ViewModel.Genres}"
                      SelectedItem="{x:Bind ViewModel.SelectedGenre, Mode=TwoWay}" />
            <Button x:Name="clearGenreFilterButton"
                    Content="Clear" Command="{x:Bind ViewModel.ClearFilterCommand}" />
        </StackPanel>

        <ItemsView x:Name="booksGridView" Grid.Row="2" ItemsSource="{x:Bind ViewModel.Books, Mode=OneWay}" >
            <ItemsView.Layout>
                <LinedFlowLayout ItemsStretch="Fill"
                                 LineHeight="160"
                                 LineSpacing="5"
                                 MinItemSpacing="5" />
            </ItemsView.Layout>
            <ItemsView.ItemTemplate>
                <DataTemplate x:DataType="model:Book">
                    <ItemContainer>
                        <Grid>
                            <Image MinWidth="70"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Source="{x:Bind ImageUrl}"
                                   Stretch="UniformToFill" />
                            <StackPanel Height="40"
                                        Padding="5,1,5,1"
                                        VerticalAlignment="Bottom"
                                        Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                                        Opacity=".75"
                                        Orientation="Vertical">
                                <TextBlock Foreground="{ThemeResource SystemControlForegroundAltHighBrush}" Text="{x:Bind Title}" />
                                <TextBlock Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                           Style="{ThemeResource CaptionTextBlockStyle}"
                                           Text="{x:Bind Genre}" />
                            </StackPanel>
                        </Grid>
                    </ItemContainer>
                </DataTemplate>
            </ItemsView.ItemTemplate>
        </ItemsView>
    </Grid>
</Page>
