<?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="Ohara.NewPage2"
             BackgroundColor="#e2edf1">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <VerticalStackLayout BackgroundColor="#72a3b3" Grid.Row="0" Grid.Column="0" Spacing="10">

            <Image Source="ohara2.png" HeightRequest="300" HorizontalOptions="Center" >
                <Image.Clip>
                    <EllipseGeometry Center="150,90"  RadiusX="80"  RadiusY="80"/>
                </Image.Clip>
            </Image>


            <Button Style="{StaticResource buttonMenu}" Text="Accueil"/>
            <Button Style="{StaticResource buttonMenu}" Text="Carte"/>
            <Button Style="{StaticResource buttonMenu2}" Text="Personnages"/>
            <Button Style="{StaticResource buttonMenu}" Text="Fruits du démon"/>
            <Button Style="{StaticResource buttonMenu}" Text="Bateaux"/>
            <Button Style="{StaticResource buttonMenu}" Text="Îles"/>
            <Button Style="{StaticResource buttonMenu}" Text="Bestiaire"/>
            <Button Style="{StaticResource buttonMenu}" Text="Équipages"/>
        </VerticalStackLayout>
        <VerticalStackLayout Grid.Row="0" Grid.Column="1" Spacing="40">
            <Grid BackgroundColor="#72a3b3" Padding="10" ColumnSpacing="50" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="10*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions >
                    <ColumnDefinition Width="20*"/>
                    <ColumnDefinition Width="25*"/>
                    <ColumnDefinition Width="10*"/>
                    <ColumnDefinition Width="10*"/>
                </Grid.ColumnDefinitions>
                <SearchBar Placeholder="Rechercher..." BackgroundColor="#bfe5ef" Grid.Column="0"/>
                <Frame CornerRadius="20" BackgroundColor="#bfe5ef" BorderColor="#bfe5ef" Grid.Column="2">
                    <Label Text="Filtrer" HorizontalTextAlignment="Center" />
                </Frame>

                <Frame CornerRadius="20" BackgroundColor="#bfe5ef" BorderColor="#bfe5ef" Grid.Column="3">
                    <Label Text="Trier" HorizontalTextAlignment="Center"  />
                </Frame>
            </Grid>
            <ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Always">
                <HorizontalStackLayout Spacing="40" Padding="40">

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="luffy.png" HeightRequest="800" HorizontalOptions="Start" Grid.Row="0"/>
                        <Frame CornerRadius="20" BorderColor="#72a3b3" BackgroundColor="#72a3b3" Margin="20, 50" Padding="20" WidthRequest="350" HeightRequest="200" Grid.Row="0" VerticalOptions="End">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Text="Monkey D. Luffy" FontAttributes="Bold" FontSize="22" TextColor="White" Grid.Row="0" HorizontalOptions="Center" Margin="10"/>
                                <Label Text="________________________" FontAttributes="Bold" FontSize="20" TextColor="White" Grid.Row="1" HorizontalOptions="Center" Margin="-15"/>
                                <Label Text="Cliquez ici pour voir en détail" FontAttributes="Bold,Italic" FontSize="15" TextColor="White" Grid.Row="2" TextDecorations="Underline" HorizontalOptions="Center"/>
                            </Grid>
                        </Frame>
                    </Grid>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="nami.png" HeightRequest="800" HorizontalOptions="Start"/>
                        <Frame CornerRadius="20" BorderColor="#72a3b3" BackgroundColor="#72a3b3" Margin="20, 50" Padding="20" WidthRequest="350" HeightRequest="200" Grid.Row="0" VerticalOptions="End">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Text="Nami" FontAttributes="Bold" FontSize="22" TextColor="White" Grid.Row="0" HorizontalOptions="Center" Margin="10"/>
                                <Label Text="________________________" FontAttributes="Bold" FontSize="20" TextColor="White" Grid.Row="1" HorizontalOptions="Center" Margin="-15"/>
                                <Label Text="Cliquez ici pour voir en détail" FontAttributes="Bold,Italic" FontSize="15" TextColor="White" Grid.Row="2" TextDecorations="Underline" HorizontalOptions="Center"/>
                            </Grid>
                        </Frame>
                    </Grid>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="usopp.png" HeightRequest="800" HorizontalOptions="Start"/>
                        <Frame CornerRadius="20" BorderColor="#72a3b3" BackgroundColor="#72a3b3" Margin="20, 50" Padding="20" WidthRequest="350" HeightRequest="200" Grid.Row="0" VerticalOptions="End">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Text="Usopp" FontAttributes="Bold" FontSize="22" TextColor="White" Grid.Row="0" HorizontalOptions="Center" Margin="10"/>
                                <Label Text="________________________" FontAttributes="Bold" FontSize="20" TextColor="White" Grid.Row="1" HorizontalOptions="Center" Margin="-15"/>
                                <Label Text="Cliquez ici pour voir en détail" FontAttributes="Bold,Italic" FontSize="15" TextColor="White" Grid.Row="2" TextDecorations="Underline" HorizontalOptions="Center"/>
                            </Grid>
                        </Frame>
                    </Grid>

                    
                </HorizontalStackLayout>
            </ScrollView>
        </VerticalStackLayout>



        <!--<Rectangle WidthRequest="200" HeightRequest="300" HorizontalOptions="Start"   BackgroundColor="#72a3b3">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="#cdffd8" Offset="0.0" />-->
        <!--<GradientStop Color="#94b9ff" Offset="1.0" /></LinearGradientBrush></Rectangle.Fill></Rectangle>-->




    </Grid>


</ContentPage>
