<Page
    x:Class="AmbientSounds.Views.CataloguePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:AmbientSounds.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:strings="using:AmbientSounds.Strings"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    NavigationCacheMode="Enabled"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle
            x:Name="HeaderBackplate"
            Fill="{ThemeResource SystemControlAcrylicWindowBrush}"
            Stretch="Fill" />

        <Grid
            x:Name="HeaderGrid"
            Margin="0,32,0,12"
            Padding="{StaticResource NarrowPageMargin}">

            <Grid HorizontalAlignment="Left">
                <Border
                    Height="40"
                    HorizontalAlignment="Stretch"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    CornerRadius="20" />
                <StackPanel Orientation="Horizontal">
                    <Button
                        Height="40"
                        Padding="12,0"
                        AutomationProperties.Name="{x:Bind strings:Resources.Home}"
                        Background="Transparent"
                        Click="GoBack"
                        Content="{x:Bind strings:Resources.Home}"
                        CornerRadius="20" />
                    <Grid x:Name="CatalogueBackplate" Margin="4,0,0,0">
                        <toolkit:DropShadowPanel Style="{StaticResource SubtleShadow}">
                            <Rectangle
                                Width="{Binding ElementName=CatalogueTextGrid, Path=ActualWidth}"
                                Height="48"
                                Fill="{ThemeResource FallbackBackgroundOppositeBrush}"
                                RadiusX="24"
                                RadiusY="24" />
                        </toolkit:DropShadowPanel>
                        <Grid
                            x:Name="CatalogueTextGrid"
                            Height="48"
                            Padding="20,0">
                            <TextBlock
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                                Text="{x:Bind strings:Resources.Catalogue}" />
                        </Grid>
                    </Grid>
                </StackPanel>
            </Grid>

        </Grid>

        <controls:CatalogueListControl
            x:Name="CatalogueList"
            Grid.Row="1"
            InnerMargin="16,24,16,16" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="NarrowLayout" />
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideWindowBreakpoint}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="HeaderGrid.Padding" Value="{StaticResource WidePageMargin}" />
                        <Setter Target="CatalogueList.InnerMargin" Value="40,24,40,32" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="RegularBackgroundState" />
                <VisualState x:Name="ImageBackgroundState">
                    <VisualState.Setters>
                        <Setter Target="HeaderBackplate.Fill" Value="{ThemeResource AcrylicBackplateBrush}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
