<?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="GameAtlas.Views.PageJeu"
             Title="PageJeu">

    <Grid x:Name="outerGrid">

        <Grid.Background>
            <LinearGradientBrush EndPoint="1,0">
                <GradientStop Color="#DFE4FF"
                          Offset="0.1" />
                <GradientStop Color="#FDF7E6"
                          Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>

        <ScrollView>
            <Grid RowDefinitions="166,*" ColumnDefinitions="30,*,30" Padding="10,20,10,0">

                <Image Source="arrowback" VerticalOptions="Start" WidthRequest="30">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="Back_Tapped"/>
                    </Image.GestureRecognizers>
                </Image>

                <Border Grid.Row="0" Grid.Column="1" WidthRequest="290" HeightRequest="166" StrokeShape="RoundRectangle 5" VerticalOptions="Start" HorizontalOptions="Center">
                    <Border.Shadow>
                        <Shadow Brush="Black" Offset="0,4" Radius="4" Opacity="0.4" />
                    </Border.Shadow>
                    <Frame HasShadow="False" CornerRadius="5" IsClippedToBounds="True">
                        <Image Source="{Binding JeuModel.Image}" Aspect="AspectFill"/>
                    </Frame>
                </Border>

                <VerticalStackLayout Grid.Row="1" Grid.ColumnSpan="3" Padding="20" Spacing="8">

                    <Label Text="{Binding JeuModel.Nom}" FontFamily="PTSansCBold" FontSize="14" TextColor="{StaticResource Black}"/>

                    <Label Text="{Binding JeuModel.Sortie}" FontFamily="RobotoRegular" FontSize="11" TextColor="{StaticResource Gray500}"/>

                    <FlexLayout Direction="Row" JustifyContent="Start" AlignItems="Start" Wrap="Wrap" >
                        <BindableLayout.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>XONE</x:String>
                                <x:String>PS5</x:String>
                                <x:String>PC</x:String>
                                <x:String>SWITCH</x:String>
                            </x:Array>
                        </BindableLayout.ItemsSource>
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Grid RowDefinitions="18" ColumnDefinitions="auto">
                                    <Frame BackgroundColor="{StaticResource Tertiary}" HeightRequest="18" CornerRadius="9" Padding="10,0" Margin="0,0,5,5">
                                        <Label Text="{Binding .}" FontFamily="RobotoRegular" FontSize="11" TextColor="{StaticResource Gray500}" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
                                    </Frame>
                                </Grid>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </FlexLayout>

                    <Label FontFamily="RobotoRegular" FontSize="14">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="Développeur:     " TextColor="{StaticResource Gray500}" />
                                <Span Text="{Binding JeuModel.Developpeur}" TextColor="{StaticResource Black}" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label FontFamily="RobotoRegular" FontSize="14">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="Editeur:               " TextColor="{StaticResource Gray500}" />
                                <Span Text="{Binding JeuModel.Editeur}" TextColor="{StaticResource Black}" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>

                    <Frame CornerRadius="5" HeightRequest="40" BackgroundColor="{StaticResource Primary}" Margin="0,10,0,0">
                        <HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center" Spacing="15">
                            <Image Source="plus" HeightRequest="15"/>
                            <Label Text="Ajouter à" FontFamily="PTSansCBold" FontSize="13" TextColor="{StaticResource Black}" VerticalOptions="Center"/>
                        </HorizontalStackLayout>
                        <Frame.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnAddTapped"/>
                        </Frame.GestureRecognizers>
                    </Frame>

                    <Grid RowDefinitions="50" ColumnDefinitions="auto,*,auto,*,auto,*,auto" Margin="0,5">
                        <Frame BorderColor="{StaticResource Black}" CornerRadius="5" Padding="15" BackgroundColor="Transparent">
                            <Grid RowDefinitions="auto,auto" ColumnDefinitions="auto,*" ColumnSpacing="15" VerticalOptions="Center">
                                <Image Grid.RowSpan="2" Source="trophy" WidthRequest="20" VerticalOptions="Center"/>
                                <Label Grid.Column="1" Text="{Binding JeuModel.Note}" FontFamily="RobotoRegular" FontSize="16" TextColor="{StaticResource Black}" VerticalOptions="Center"/>
                                <Label Grid.Row="1" Grid.Column="1" Text="Note" FontFamily="RobotoRegular" FontSize="12" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>
                            </Grid>
                        </Frame>

                        <Frame Grid.Column="2" BorderColor="{StaticResource Black}" CornerRadius="5" Padding="15,15,20,15" BackgroundColor="Transparent">
                            <Grid RowDefinitions="auto,auto" ColumnDefinitions="*" ColumnSpacing="15" VerticalOptions="Center">
                                <Label Grid.Column="0" Text="243" FontFamily="RobotoRegular" FontSize="16" TextColor="{StaticResource Black}" VerticalOptions="Center"/>
                                <Label Grid.Row="1" Grid.Column="0" Text="Voulus" FontFamily="RobotoRegular" FontSize="12" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>
                            </Grid>
                        </Frame>

                        <Frame Grid.Column="4" BorderColor="{StaticResource Black}" CornerRadius="5" Padding="15" BackgroundColor="Transparent">
                            <Grid RowDefinitions="auto,auto" ColumnDefinitions="*" ColumnSpacing="15" VerticalOptions="Center">
                                <Label Grid.Column="0" Text="95" FontFamily="RobotoRegular" FontSize="16" TextColor="{StaticResource Black}" VerticalOptions="Center"/>
                                <Label Grid.Row="1" Grid.Column="0" Text="Possédés" FontFamily="RobotoRegular" FontSize="12" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>
                            </Grid>
                        </Frame>

                        <Frame Grid.Column="6" BorderColor="{StaticResource Black}" CornerRadius="5" Padding="15,15,30,15" BackgroundColor="Transparent">
                            <Grid RowDefinitions="auto,auto" ColumnDefinitions="*" ColumnSpacing="15" VerticalOptions="Center">
                                <Label Grid.Column="0" Text="20" FontFamily="RobotoRegular" FontSize="16" TextColor="{StaticResource Black}" VerticalOptions="Center"/>
                                <Label Grid.Row="1" Grid.Column="0" Text="Avis" FontFamily="RobotoRegular" FontSize="12" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>
                            </Grid>
                        </Frame>
                    </Grid>

                    <Frame HeightRequest="35" CornerRadius="5" BackgroundColor="{StaticResource Tertiary}" Margin="0,20,0,0">
                        <StackLayout Orientation="Horizontal" Spacing="15" Padding="15,0,5,0">
                            <Image Source="store" HeightRequest="19" VerticalOptions="Center"/>
                            <Label Text="Disponible sur les plateformes" FontFamily="RobotoRegular" FontSize="12" TextColor="{StaticResource Gray600}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                            <Image Source="arrowback" HeightRequest="20" Rotation="180" VerticalOptions="Center"/>
                        </StackLayout>
                    </Frame>

                    <Label Text="Genres" FontFamily="PTSansCBold" FontSize="14" TextColor="{StaticResource Black}" Margin="0,10,0,0"/>

                    <FlexLayout Direction="Row" JustifyContent="Start" AlignItems="Start" Wrap="Wrap" >
                        <BindableLayout.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>🧙🏻 Jeu de rôle</x:String>
                                <x:String>🏹 Aventure</x:String>
                            </x:Array>
                        </BindableLayout.ItemsSource>
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Grid RowDefinitions="20" ColumnDefinitions="auto">
                                    <Frame BackgroundColor="Transparent" BorderColor="{StaticResource Black}" HeightRequest="20" CornerRadius="10" Padding="8,0" Margin="0,0,5,5">
                                        <Label Text="{Binding .}" FontFamily="PTSansNRegular" FontSize="10" TextColor="{StaticResource Gray500}" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
                                    </Frame>
                                </Grid>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </FlexLayout>

                    <Label Text="Résumé" FontFamily="PTSansCBold" FontSize="14" TextColor="{StaticResource Black}" Margin="0,10,0,0"/>

                    <Label Text="Hogwarts Legacy est un jeu de rôle d'action et d'aventure solo basé sur l'univers de Harry Potter, dans lequel le joueur incarne un nouveau venu dans le château enchanté tant apprécié des fans des livres et de la franchise cinématographique." FontFamily="PTSansNRegular" FontSize="10" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>

                    <VerticalStackLayout Spacing="10" Margin="0,15,0,0">
                        <BindableLayout.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>XONE</x:String>
                                <x:String>PS5</x:String>
                                <x:String>PC</x:String>
                                <x:String>SWITCH</x:String>
                            </x:Array>
                        </BindableLayout.ItemsSource>
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Frame CornerRadius="5" BackgroundColor="{StaticResource Tertiary}" Padding="15">
                                    <Grid ColumnDefinitions="30,*" RowDefinitions="30,auto" ColumnSpacing="10" RowSpacing="10">
                                        <Frame Grid.Row="0" WidthRequest="30" HeightRequest="30" CornerRadius="15" VerticalOptions="Start" HorizontalOptions="End" >
                                            <Frame.Background>
                                                <LinearGradientBrush EndPoint="1,0">
                                                    <GradientStop Color="#C57CFF"
                                                              Offset="0.1" />
                                                    <GradientStop Color="#8F00FF"
                                                              Offset="1.0" />
                                                </LinearGradientBrush>
                                            </Frame.Background>
                                            <Frame HeightRequest="28" WidthRequest="28" CornerRadius="14" VerticalOptions="Center" HorizontalOptions="Center" IsClippedToBounds="True">
                                                <Image Source="https://codefirst.iut.uca.fr/git/avatars/4045f9272217b1c04fb71402eac9c97d" Aspect="AspectFill"/>
                                            </Frame>
                                        </Frame>

                                        <VerticalStackLayout Grid.Column="1" VerticalOptions="Center" Spacing="3">
                                            <Label Text="Pseudonyme" FontSize="14" FontFamily="AladinRegular" TextColor="{StaticResource Black}"/>
                                            <HorizontalStackLayout Spacing="3">
                                                <Image Source="starrating" HeightRequest="10" VerticalOptions="Center" Margin="0,-2,0,0"/>
                                                <Label Text="5" FontSize="10" FontFamily="RobotoRegular" TextColor="{StaticResource Gray600}" VerticalOptions="Center"/>
                                            </HorizontalStackLayout>
                                        </VerticalStackLayout>

                                        <Label Grid.Row="1" Grid.ColumnSpan="2" Text="Hogwarts Legacy est un jeu de rôle d'action et d'aventure solo basé sur l'univers de Harry Potter, dans lequel le joueur incarne un nouveau venu dans le château enchanté tant apprécié des fans des livres et de la franchise cinématographique." FontFamily="PTSansNRegular" FontSize="10" TextColor="{StaticResource Gray500}" VerticalOptions="Center"/>

                                    </Grid>
                                </Frame>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </VerticalStackLayout>

                </VerticalStackLayout>

            </Grid>
        </ScrollView>
    </Grid>


</ContentPage>
