<Page
    x:Class="AmbientSounds.Views.CompactPage"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    Background="{ThemeResource ContentBackgroundBrush}"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="NarrowSoundTemplate" x:DataType="viewmodels:SoundViewModel">
            <!--
                The control below gets its viewmodel/datacontext
                via the itemRepeater's OnElementPrepared event.
            -->
            <controls:SoundListItem />
        </DataTemplate>

        <muxc:StackLayout
            x:Name="VerticalStackLayout"
            Orientation="Vertical"
            Spacing="4" />
    </Page.Resources>

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

        <toolkit:ImageEx
            x:Name="BackgroundImage"
            Grid.RowSpan="2"
            x:Load="False"
            IsCacheEnabled="True"
            Source="{x:Bind BackgroundImagePath}"
            Stretch="UniformToFill" />

        <Grid
            Padding="20,32,20,4"
            Background="{ThemeResource AcrylicBackplateBrush}"
            Canvas.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>

            <controls:PlayerControl />

            <Button
                x:Uid="CloseCompactMode"
                Grid.Column="2"
                Click="CloseCompactClicked"
                Style="{StaticResource TransparentRoundButtonStyle}">
                <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEB1E;" />
            </Button>
        </Grid>

        <controls:SoundGridControl
            Grid.Row="1"
            InnerMargin="12"
            ItemTemplate="{StaticResource NarrowSoundTemplate}"
            Layout="{StaticResource VerticalStackLayout}" />
    </Grid>
</Page>
