<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Linaris"
             x:Class="Linaris.PlaylistsPage"
             Title="PlaylistsPage"
             Style="{StaticResource PageFlyoutTrigger}">

    <Grid Style="{StaticResource GridFlyoutTrigger}">
        <Grid.RowDefinitions>
            <RowDefinition Height="8*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ContentView Style="{StaticResource FlyoutStyle}" Grid.Column="0"></ContentView>

        <ScrollView Grid.Column="1" BackgroundColor="#404040">

            <VerticalStackLayout>

                <SearchBar Style="{StaticResource SearchBar}"/>

                <FlexLayout Direction="Row" AlignItems="Start" JustifyContent="SpaceAround" Wrap="Wrap">

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist.jpg" SemanticProperties.Description="Playlist 1980's" Style="{StaticResource Pochette}"/>
                        <Label Text="1980's" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist1.png" SemanticProperties.Description="Playlist 1990's" Style="{StaticResource Pochette}"/>
                        <Label Text="1990's" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist2.jpg" SemanticProperties.Description="Playlist 2000's" Style="{StaticResource Pochette}"/>
                        <Label Text="2000's" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist3.jpg" SemanticProperties.Description="Playlist 2010's" Style="{StaticResource Pochette}"/>
                        <Label Text="2010's" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist4.png" SemanticProperties.Description="Playlist 2020" Style="{StaticResource Pochette}"/>
                        <Label Text="2020" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist5.jpg" SemanticProperties.Description="Playlist 2021" Style="{StaticResource Pochette}"/>
                        <Label Text="2021" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist6.png" SemanticProperties.Description="Playlist 2022" Style="{StaticResource Pochette}"/>
                        <Label Text="2022" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="playlist7.png" SemanticProperties.Description="Playlist 2023" Style="{StaticResource Pochette}"/>
                        <Label Text="2023" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                </FlexLayout>

            </VerticalStackLayout>

        </ScrollView>
        
        <local:FooterPage Grid.Row="1" Grid.ColumnSpan="2"/>

    </Grid>

</ContentPage>
