<prism:VisualStateAwarePage
    x:Name="pageRoot"
    x:Class="ModernShoppingList.Views.SearchResultsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ModernShoppingList.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="using:Microsoft.Practices.Prism.StoreApps"
    xmlns:common="using:ModernShoppingList.Common"
    mc:Ignorable="d"
    prism:ViewModelLocator.AutoWireViewModel="True">

    <prism:VisualStateAwarePage.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">Search Results</x:String>
    </prism:VisualStateAwarePage.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="headerGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="0" />
            </Grid.RowDefinitions>
            <Button x:Name="backButton"
                    Style="{StaticResource BackButtonStyle}"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" />
            <TextBlock x:Name="pageTitle"
                       x:Uid="searchPageTitle"
                       Grid.Column="1"
                       Text="Search"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageHeaderTextStyle}" />
            <StackPanel x:Name="searchHeader"
                        Orientation="Horizontal"
                        Grid.Column="2">
                <TextBlock x:Name="resultNumber"
                           x:Uid="ResultsNumberLabel"
                           Text="{Binding TotalCount}"
                           IsHitTestVisible="false"
                           Margin="0,0,10,40"
                           Style="{StaticResource PageSubheaderTextStyle}" />
                <TextBlock x:Name="resultText"
                           x:Uid="ResultsForLabel"
                           Text="Results for"
                           IsHitTestVisible="false"
                           Margin="0,0,10,40"
                           Style="{StaticResource PageSubheaderTextStyle}" />
                <TextBlock x:Name="queryText"
                           Text="{Binding QueryText}"
                           IsHitTestVisible="false"
                           Style="{StaticResource PageSubheaderTextStyle}" />
            </StackPanel>
        </Grid>
        <Grid x:Name="resultsPanel" Grid.Row="1">
            <!--
            Dans la plupart des états d'affichage, le corps de la page utilise des contrôles d'éléments pour créer plusieurs cases d'option
            en vue d'un filtrage sur une grille de résultats de recherche à défilement horizontal
        -->
            <Grid x:Name="typicalPanel">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
<!--
                <ItemsControl
                    x:Name="filtersItemsControl"
                    Canvas.ZIndex="1"
                    Margin="120,-3,120,30"
                    ItemsSource="{Binding Source={StaticResource filtersViewSource}}"
                    Visibility="{Binding ShowFilters, Converter={StaticResource BooleanToVisibilityConverter}}">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <RadioButton
                                Margin="0,0,30,0"
                                GroupName="Filters"
                                IsChecked="{Binding Active, Mode=TwoWay}"
                                Checked="Filter_Checked"
                                Style="{StaticResource TextBlockButtonStyle}">
                                <TextBlock Text="{Binding Description}"  TextWrapping="NoWrap"
                                           Margin="3,-7,3,10" Style="{StaticResource SubheaderTextBlockStyle}" />
                            </RadioButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                -->

                <GridView
                    x:Name="resultsGridView"
                    AutomationProperties.AutomationId="ResultsGridView"
                    AutomationProperties.Name="Search Results"
                    TabIndex="1"
                    Grid.Row="1"
                    Margin="0,-238,0,0"
                    Padding="110,240,110,46"
                    SelectionMode="None"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    common:ListViewItemClickedToAction.Action="{Binding NavDetailCommand}"
                    ItemsSource="{Binding Results}">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="294" Margin="6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,0,0,10" Width="40" Height="40">
                                    <Image Source="{Binding Picture}" Stretch="UniformToFill"/>
                                </Border>
                                <StackPanel Grid.Column="1" Margin="10,-10,0,0">
                                    <TextBlock Text="{Binding Title}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}"/>
                                    <!--<TextBlock Text="{Binding Subtitle}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"/>
                                    <TextBlock Text="{Binding Description}" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"/>-->
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Height" Value="70"/>
                            <Setter Property="Margin" Value="0,0,38,8"/>
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </Grid>
        </Grid>

        <TextBlock
            x:Name="noResultsTextBlock"
            Grid.Row="1"
            Margin="120,50,0,0"
            Visibility="Collapsed"
            Style="{StaticResource SubheaderTextBlockStyle}"
            Text="No results match your search." />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ResultStates">
                <VisualState x:Name="ResultsFound" />
                <!-- S'il n'y a aucun résultat, le panneau de résultats est remplacé par un TextBlock d'informations -->
                <VisualState x:Name="NoResultsFound">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultsGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
</prism:VisualStateAwarePage>