<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:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:controls="using:AmbientSounds.Controls"
    xmlns:converters="using:AmbientSounds.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="CompactPageSoundTemplate" x:DataType="viewmodels:SoundViewModel">
            <GridViewItem Margin="4" AutomationProperties.Name="{x:Bind Name}">
                <GridViewItem.Resources>
                    <!--  These two removes the border on hover and on pressed  -->
                    <SolidColorBrush x:Key="SystemControlHighlightListLowBrush" Color="Transparent" />
                    <SolidColorBrush x:Key="SystemControlHighlightListMediumBrush" Color="Transparent" />
                </GridViewItem.Resources>
                <Grid
                    Width="140"
                    Height="80"
                    extensions:VisualExtensions.CenterPoint="70,40,0"
                    CornerRadius="4"
                    PointerEntered="GridScaleUp"
                    PointerExited="GridScaleNormal">
                    <animations:Implicit.Animations>
                        <animations:ScaleAnimation Duration="0:0:0.5" />
                    </animations:Implicit.Animations>
                    <Grid.Background>
                        <ImageBrush Stretch="UniformToFill">
                            <ImageBrush.ImageSource>
                                <BitmapImage UriSource="{x:Bind ImagePath}" />
                            </ImageBrush.ImageSource>
                        </ImageBrush>
                    </Grid.Background>

                    <Grid
                        Margin="0,0,0,20"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Background="{StaticResource BackgroundAcrylicBrush}"
                        CornerRadius="20"
                        Visibility="{x:Bind IsCurrentlyPlaying, Mode=OneWay}">
                        <FontIcon
                            Margin="10"
                            FontFamily="{StaticResource FluentUIGlyphs}"
                            FontSize="18"
                            Foreground="White"
                            Glyph="&#xEB7D;" />
                    </Grid>

                    <Grid VerticalAlignment="Bottom" Background="{StaticResource BackgroundAcrylicBrush}">
                        <TextBlock
                            Margin="8,0,0,2"
                            FontFamily="Calibri"
                            FontSize="16"
                            Foreground="White"
                            Text="{x:Bind Name}"
                            TextWrapping="Wrap" />
                    </Grid>
                </Grid>
            </GridViewItem>
        </DataTemplate>
    </Page.Resources>

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

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

            <controls:SleepTimerControl />

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

        <controls:SoundGridControl Grid.Row="1" ItemTemplate="{StaticResource CompactPageSoundTemplate}" />

        <Grid
            Grid.Row="2"
            Padding="20,8"
            Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
            <controls:PlayerControl HorizontalAlignment="Center" />
        </Grid>
    </Grid>
</Page>
