<?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"
             x:Class="Linaris.LocalFilesPage"
             xmlns:control="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"
             xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             xmlns:local="clr-namespace:Linaris"
             Title="LocalFilesPage"
             Style="{StaticResource PageFlyoutTrigger}">
    
    <Grid Style="{StaticResource GridFlyoutTrigger}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>

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

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

            <VerticalStackLayout>

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

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

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="mp3.png" SemanticProperties.Description="MP3" Style="{StaticResource Pochette}"/>
                        <Label Text="The Last Breath" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="wav.png" SemanticProperties.Description="WAV" Style="{StaticResource Pochette}"/>
                        <Label Text="Love" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="ogg.png" SemanticProperties.Description="OGG" Style="{StaticResource Pochette}"/>
                        <Label Text="Winter" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="midi.png" SemanticProperties.Description="MIDI" Style="{StaticResource Pochette}"/>
                        <Label Text="Croissant" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="mp3.png" SemanticProperties.Description="MP3" Style="{StaticResource Pochette}"/>
                        <Label Text="Fredo et Louis" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="mp3.png" SemanticProperties.Description="MP3" Style="{StaticResource Pochette}"/>
                        <Label Text="end" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="wav.png" SemanticProperties.Description="WAV" Style="{StaticResource Pochette}"/>
                        <Label Text="calm" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                    <VerticalStackLayout Margin="10">
                        <ImageButton Source="mp3.png" SemanticProperties.Description="MP3" Style="{StaticResource Pochette}"/>
                        <Label Text="Lessgooo" Style="{StaticResource Titre}"></Label>
                    </VerticalStackLayout>

                </FlexLayout>

            </VerticalStackLayout>

        </ScrollView>

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

    </Grid>
</ContentPage>