<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MangaMap"
    x:Class="MangaMap.Views.listPage"
    BackgroundColor="Black"
    x:Name="listPage">

    <Grid RowDefinitions="40, *">
        <local:NewContent1 HeightRequest="40" VerticalOptions="Start" Padding="10, 0"/>

        <ScrollView
            Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Label Text="Watching" TextColor="White" FontSize="Title" Margin="50,10,0,0" Grid.Row="0"/>

                <Frame Grid.Row="1" BackgroundColor="Black" Margin="20" BorderColor="Black">
                    <Grid BackgroundColor="#333333" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid Margin="20" Grid.Row="0" ColumnDefinitions="*,300,300">
                            <Label Grid.Column="0"
                           Text="Titre" FontSize="Large" TextColor="White"
                           HorizontalOptions="Start" VerticalOptions="Center"/>
                            <Label Grid.Column="1"
                           Text="Score" FontSize="Large" TextColor="White"
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                            <Label Grid.Column="2"
                           Text="Progression" FontSize="Large" TextColor="White"
                           HorizontalOptions="End" VerticalOptions="Center"/>
                        </Grid>

                        <ScrollView Grid.Row="1" VerticalScrollBarVisibility="Always">
                            <!--<VerticalStackLayout BindableLayout.ItemsSource="{Binding ListeOeuvreEnVisionnage}" Spacing="10">-->
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
                                            <ImageButton Grid.Column="0" Source="{Binding Affiche}" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                            <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                            <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                            <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                        </Grid>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>

                            <!--</VerticalStackLayout>-->
                        </ScrollView>
                    </Grid>
                </Frame>

                <Label Text="Completed" TextColor="White" FontSize="Title" Margin="50,10,0,0" Grid.Row="2"/>

                <Frame Grid.Row="3" BackgroundColor="Black" Margin="20" BorderColor="Black">
                    <Grid BackgroundColor="#333333" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid Margin="20" Grid.Row="0" ColumnDefinitions="*,300,300">
                            <Label Grid.Column="0"
                           Text="Titre" FontSize="Large" TextColor="White"
                           HorizontalOptions="Start" VerticalOptions="Center"/>
                            <Label Grid.Column="1"
                           Text="Score" FontSize="Large" TextColor="White"
                           HorizontalOptions="Center" VerticalOptions="Center"/>
                            <Label Grid.Column="2"
                           Text="Progression" FontSize="Large" TextColor="White"
                           HorizontalOptions="End" VerticalOptions="Center"/>
                        </Grid>

                        <ScrollView Grid.Row="3" VerticalScrollBarVisibility="Always">
                            <VerticalStackLayout Spacing="10">

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">

                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">
                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">

                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">

                                    <ImageButton Grid.Column="0" BackgroundColor="#FFFFFF" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">

                                    <ImageButton Grid.Column="0" BackgroundColor="Blue" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                                <Grid Margin="20,0,20,0" ColumnDefinitions="*,*,300,300">

                                    <ImageButton Grid.Column="0" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start"/>
                                    <Label Grid.Column="1" Text="Test Titre" FontSize="Medium" VerticalOptions="Center" Margin="15"/>
                                    <Label Grid.Column="2" Text="4/5" VerticalOptions="Center" HorizontalOptions="Center"/>
                                    <Label Grid.Column="3" Text="10/85" VerticalOptions="Center" HorizontalOptions="End"/>
                                </Grid>

                            </VerticalStackLayout>
                        </ScrollView>
                    </Grid>
                </Frame>

            </Grid>

        </ScrollView>

    </Grid>

</ContentPage>