<?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.PlaylistPage"
             xmlns:avatarview="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             Title="PlaylistPage">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="6*"/>
        </Grid.ColumnDefinitions>
        <ContentView Style="{StaticResource FlyoutStyle}" Grid.Column="0"></ContentView>
        <ScrollView Grid.Column="1"
                             BackgroundColor="#404040">
            <VerticalStackLayout>

                <SearchBar Style="{StaticResource SearchBar}"/>
                <avatarview:SfAvatarView 
                        Style="{StaticResource pdp}"
                        ImageSource="playlist.jpg"/>
                <Label Text="Playlist 2023"
                            Style="{StaticResource Titre}">
                </Label>
                <Label Text="Description"
                            Style="{StaticResource SousTitre}">
                </Label>
                <Grid BackgroundColor="Transparent" MinimumHeightRequest="0">
                    <FlexLayout Direction="Row" AlignItems="Center" JustifyContent="SpaceEvenly" Wrap="Wrap">
                        <Button Text="Aléatoire" Style="{StaticResource PlayButton}"/>
                        <Button Text="Lecture" Style="{StaticResource PlayButton}"/>
                        <Button Text="Modifier" Style="{StaticResource PlayButton}"/>
                        <Button Text="Partager" Style="{StaticResource PlayButton}"/>
                    </FlexLayout>
                </Grid>
                

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 1"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 2"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 3"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 4"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 5"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 6"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>

                <Frame Style="{StaticResource Song}">
                    <Label Text="Morceau 7"
                                FontSize="20"
                                TextColor="white"
                                HorizontalTextAlignment="Center"/>
                </Frame>
            </VerticalStackLayout>
        </ScrollView>
    </Grid>
</ContentPage>