<?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.AlbumPage"
             xmlns:local="clr-namespace:Linaris"
             xmlns:avatarview="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             Title="Album">

    <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}"/>

                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1000*"/>
                    </Grid.RowDefinitions>
                    <VerticalStackLayout Grid.Column="0">
                        <avatarview:SfAvatarView 
                            Style="{StaticResource pdp}"
                            ImageSource="album9.jpg"/>
                        <Label Text="Night Visions"
                                Style="{StaticResource Titre}">
                        </Label>
                        <Label Text="Description"
                               Style="{StaticResource SousTitre}">
                        </Label>

                        <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.Column="1"
                                VerticalOptions="Fill"
                                BackgroundColor="gray">
                        <FlexLayout Direction="Row"
                            AlignItems="Start"
                            JustifyContent="SpaceAround"
                            Wrap="Wrap"
                            VerticalOptions="Fill">
                            <VerticalStackLayout HorizontalOptions="Fill">
                                <Label Text="Informations complémentaires"
                                       TextColor="White"
                                       HorizontalOptions="Center">
                                </Label>

                                <Label
                                       TextColor="White"
                                       HorizontalOptions="Center"
                                       VerticalOptions="End">
                                    <Label.Text>
                                        Plein d'informations sur ce bel album, plein de chiffres etc...
                                    </Label.Text>
                                </Label>
                            </VerticalStackLayout>
                        </FlexLayout>
                    </ScrollView>
                </Grid>

            </VerticalStackLayout>

        </ScrollView>

    </Grid>

</ContentPage>