<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.HomePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlExplorer"
    xmlns:common="using:ControlExplorer.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <!-- Collection of items displayed by this page -->
            <CollectionViewSource
                x:Name="itemsViewSource"
                Source="{Binding Favorites}"
                />
            <CollectionViewSource
                x:Name="newFeaturesViewSource"
                Source="{Binding NewFeatures}" />
            <DataTemplate x:Key="wideLayoutSection">
                <GridView 
                    Padding="0" 
                    RequestedTheme="Dark"
                    x:Name="itemGridView"
                    AutomationProperties.AutomationId="ItemsGridView"
                    AutomationProperties.Name="Items"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    SelectionMode="None"
                    Margin="0 25 0 0"
                    IsItemClickEnabled="True"
                    ItemClick="ItemView_ItemClick" 
                    Style="{StaticResource wideLayoutGridView}">
                </GridView>
            </DataTemplate>
            <DataTemplate x:Key="narrowLayoutSection">
                <GridView 
                    Padding="0" 
                    RequestedTheme="Dark"
                    x:Name="itemGridView"
                    AutomationProperties.AutomationId="ItemsGridView"
                    AutomationProperties.Name="Items"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    SelectionMode="None"
                    Margin="0 25 0 0"
                    IsItemClickEnabled="True"
                    ItemClick="ItemView_ItemClick" 
                    Style="{StaticResource narrowLayoutGridView}">
                </GridView>
            </DataTemplate>
        </ResourceDictionary>
    </Page.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 ControlExplorerBackgroundThemeBrush}">
        <Border Background="{ThemeResource ControlExplorerLightStripeThemeBrush}" Height="70" VerticalAlignment="Top" Margin="0 80 0 0">
        </Border>

        <!-- Body -->
        <Hub SectionHeaderClick="Hub_SectionHeaderClick" Background="Transparent">
            <Hub.Header>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
                    <Image x:Name="logo" Source="/Assets/logo_Studio_UWP_0215.png" Tapped="logo_Tapped" Height="70" Margin="-12 -12 -12 0" />
                </StackPanel>
            </Hub.Header>
            <HubSection VerticalContentAlignment="Stretch">
                <HubSection.Header>
                    <Border Height="70" Width="285">
                        <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=About_Text}" Foreground="{StaticResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="20 20 0 0"/>
                    </Border>
                </HubSection.Header>
                <DataTemplate>
                    <!-- Left Panel -->
                    <Border Margin="0 25 0 0" Width="280" VerticalAlignment="Stretch">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB1_Text}" Foreground="Gray" FontSize="20" FontFamily="Segoe WP" FontWeight="Light" />
                            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB2_Text}" Grid.Row="1" FontFamily="Segoe WP" FontWeight="SemiBold" FontSize="20" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap"/>
                            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB3_Text}" Margin="0 30" Grid.Row="2" FontFamily="Segoe WP" FontWeight="Light" FontSize="14" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" TextWrapping="Wrap">
                            </TextBlock>
                            <TextBlock Grid.Row="3" Margin="0 0 0 20" ><Hyperlink NavigateUri="https://www.componentone.com/Download/" FontSize="15" Foreground="{ThemeResource ControlExplorerHyperlinkThemeBrush}" FontWeight="Bold"><Run Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LeftPanelTB4_Text}"></Run></Hyperlink></TextBlock>
                        </Grid>
                    </Border>
                </DataTemplate>
            </HubSection>
            <HubSection >
                <HubSection.Header>
                    <Border Height="70" Width="285">
                        <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=New_Text}" Foreground="{StaticResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="0 20 0 0"/>
                    </Border>
                </HubSection.Header>
                <DataTemplate>
                    <local:C1GridView ItemsSource="{Binding Source={StaticResource newFeaturesViewSource}}" 
                                      x:Name="newFeaturesGridView"
                                      SelectionMode="None"
                                      IsItemClickEnabled="True"
                                      Margin="0 25 0 0"
                                      Padding="0"
                                      ItemClick="newFeaturesGridView_ItemClick">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" ItemWidth="170" ItemHeight="170" MaximumRowsOrColumns="3"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                <Setter Property="Margin" Value="0 0 15 15" />
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="#FF2C383D" BorderThickness="2">
                                    <Grid>
                                        <Image Source="{Binding ImageSource}" Stretch="UniformToFill" />
                                        <Border VerticalAlignment="Bottom" Background="#FF2C383D">
                                            <TextBlock Text="{Binding Title}" Foreground="White" FontFamily="Segoe WP" FontSize="18" VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Margin="2"/>
                                        </Border>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </local:C1GridView>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="ControlsHub" IsHeaderInteractive="True" ContentTemplate="{StaticResource wideLayoutSection}">
                <HubSection.Header>
                    <Border Height="70" Width="190">
                        <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=ControlsHub_Text}" Foreground="{StaticResource ControlExplorerHubSectionHeaderThemeBrush}" Margin="20 20 0 0"/>
                    </Border>
                </HubSection.Header>
                <HubSection.Resources>
                    <Style TargetType="HubSection">
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                        <Setter Property="VerticalContentAlignment" Value="Top"/>
                        <Setter Property="Padding" Value="12,10,12,0"/>
                        <Setter Property="IsTabStop" Value="False"/>
                        <Setter Property="UseSystemFocusVisuals" Value="True"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="HubSection">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                        <Border.Resources>
                                            <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                                                <Grid x:Name="ButtonRoot" Background="Transparent">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal">
                                                                <Storyboard>
                                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="PointerOver">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHyperlinkBaseMediumBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Pressed">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Disabled">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="ImitatedTextBlock">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextBaseHighBrush}"/>
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" VerticalAlignment="Center"/>
                                                </Grid>
                                            </ControlTemplate>
                                            <ControlTemplate x:Key="SeeMoreButtonTemplate" TargetType="Button">
                                                <Grid  x:Name="ButtonRoot" Background="Transparent">
                                                    <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=ControlsHub_Text}"></TextBlock>
                                                </Grid>
                                            </ControlTemplate>
                                        </Border.Resources>
                                        <Grid HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
                                            <Grid Grid.Row="1" Margin="0 -2 0 0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="0"/>
                                                </Grid.ColumnDefinitions>
                                                <Button x:Name="HeaderButton" Foreground="{StaticResource ControlExplorerHubSectionHeaderThemeBrush}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}" UseSystemFocusVisuals="True" VerticalAlignment="Bottom"/>
                                                <Button x:Name="SeeMoreButton" Foreground="{StaticResource ControlExplorerHubSectionHeaderThemeBrush}" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Column="0" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Template="{StaticResource SeeMoreButtonTemplate}" UseSystemFocusVisuals="True" />
                                            </Grid>
                                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </HubSection.Resources>
            </HubSection>
        </Hub>
        <StackPanel x:Name="logoPanel" Orientation="Horizontal" Margin="20 20 20 20" VerticalAlignment="Bottom" HorizontalAlignment="Right">
            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LogoPanelTB1_Text}" FontFamily="Segoe WP" FontWeight="Light" FontSize="18" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}"/>
            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LogoPanelTB2_Text}" FontFamily="Segoe WP" FontWeight="ExtraBold" FontSize="18" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}"/>
            <TextBlock Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=LogoPanelTB3_Text}" FontFamily="Segoe WP" FontWeight="SemiBold" FontSize="12" Foreground="{ThemeResource ControlExplorerSimpleTextForegroundThemeBrush}" Margin="4 5 0 0"/>
        </StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ControlsHub.ContentTemplate" Value="{StaticResource narrowLayoutSection}"></Setter>
                        <Setter Target="logoPanel.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
