<?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.MainPage"
             Title="Home"
             Style="{StaticResource PageFlyoutTrigger}">


    <Grid Style="{StaticResource GridFlyoutTrigger}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        
        <ContentView Style="{StaticResource FlyoutStyle}" Grid.Column="0" BackgroundColor="black"></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="album1.jpg" SemanticProperties.Description="Album 1" Style="{StaticResource Pochette}"/>
                        <Label Text="Adios Bahamas" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album2.jpg" SemanticProperties.Description="Album 2" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album3.jpg" SemanticProperties.Description="Album 3" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album4.jpg" SemanticProperties.Description="Album 4" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>
                    
                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album5.jpg" SemanticProperties.Description="Album 5" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album6.jpg" SemanticProperties.Description="Album 6" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album7.png" SemanticProperties.Description="Album 7" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album8.jpg" SemanticProperties.Description="Album 8" Style="{StaticResource Pochette}"/>
                        <Label Text="Album" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album9.jpg" SemanticProperties.Description="Album 9" Style="{StaticResource Pochette}"/>
                        <Label Text="Night Visions" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album10.jpg" SemanticProperties.Description="Album 10" Style="{StaticResource Pochette}"/>
                        <Label Text="Smoke &amp; Mirrors" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album11.jpg" SemanticProperties.Description="Album 11" Style="{StaticResource Pochette}"/>
                        <Label Text="Evolve" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album12.jpg" SemanticProperties.Description="Album 12" Style="{StaticResource Pochette}"/>
                        <Label Text="Origins" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album13.jpg" SemanticProperties.Description="Album 13" Style="{StaticResource Pochette}"/>
                        <Label Text="Mercury Act 1" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="album14.jpg" SemanticProperties.Description="Album 14" Style="{StaticResource Pochette}"/>
                        <Label Text="Mercury Act 2" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                </FlexLayout>

            </VerticalStackLayout>

        </ScrollView>

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

    </Grid>

</ContentPage>
