<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:conv="clr-namespace:MauiSpark.Convertisseurs"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSpark.Pages.PlateauPage"
             xmlns:vues="clr-namespace:MauiSpark.Vues"
             Title="PlateauPage">

    <ContentPage.Resources>
        <conv:CouleurVersCouleurMAUI x:Key="CouleurVersCouleurMAUI"/>
        <conv:IndicateurVersCouleurMAUI x:Key="IndicateurVersCouleurMAUI"/>
        <conv:JetonVersTexte x:Key="JetonVersTexte"/>
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid RowDefinitions="*" ColumnDefinitions="*, *">
            <Grid RowDefinitions="*" ColumnDefinitions="*" Margin="50">
                <Border
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand"
                    StrokeThickness="2"
                    StrokeShape="RoundRectangle 10">

                    <StackLayout BindableLayout.ItemsSource="{Binding Plateau}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Grid 
                                    RowDefinitions="*, auto"
                                    ColumnDefinitions="*, 3*"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="FillAndExpand">

                                    <StackLayout
                                        Orientation="Horizontal"
                                        BindableLayout.ItemsSource="{Binding [1]}">

                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <Label Text="O"/>
                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </StackLayout>

                                    <StackLayout
                                        Orientation="Horizontal"
                                        Grid.Column="1"
                                        BindableLayout.ItemsSource="{Binding [0]}">

                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <vues:JetonVue
                                                    Couleur="{Binding Couleur, Converter={StaticResource CouleurVersCouleurMAUI}}"
                                                    VerticalOptions="FillAndExpand"
                                                    HorizontalOptions="FillAndExpand"/>
                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </StackLayout>

                                    <BoxView
                                        Grid.ColumnSpan="2"
                                        Grid.Row="1"
                                        HeightRequest="1"
                                        VerticalOptions="End"/>
                                </Grid>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>

                </Border>
            </Grid>

            <Grid Grid.Column="1" RowDefinitions="*, 2*, *" ColumnDefinitions="*" Margin="50">
                <Label Text="{Binding Joueur}" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Center"/>

                <Border
                    HorizontalOptions="FillAndExpand"
                    Grid.Row="1"
                    StrokeThickness="2"
                    StrokeShape="RoundRectangle 10">

                    <Grid
                        RowDefinitions="*, auto, *, *" 
                        ColumnDefinitions="*, *, *, *, *, *">

                        <Label FontSize="Medium" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="X">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="SupprimerDernierJeton"/>
                            </Label.GestureRecognizers>
                        </Label>

                        <StackLayout
                            Orientation="Horizontal"
                            Grid.Column="1"
                            Grid.ColumnSpan="4"
                            BindableLayout.ItemsSource="{Binding Code.Jetons}">

                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <vues:JetonVue
                                        Couleur="{Binding Couleur, Converter={StaticResource CouleurVersCouleurMAUI}}"
                                        VerticalOptions="FillAndExpand"
                                        HorizontalOptions="FillAndExpand"/>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>

                        <Label FontSize="Medium" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="5" Text="V">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="ValiderCode"/>
                            </Label.GestureRecognizers>
                        </Label>

                        <BoxView Grid.Row="1" Grid.ColumnSpan="6" HeightRequest="1" VerticalOptions="Center"/>

                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Rouge}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"></vues:JetonVue>
                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Vert}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2"/>
                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Bleu}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="4" Grid.Row="2" Grid.ColumnSpan="2"/>

                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Jaune}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2"/>
                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Noir}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="2" Grid.Row="3" Grid.ColumnSpan="2"/>
                        <vues:JetonVue Couleur="{x:Static conv:CouleurVersCouleurMAUI.Blanc}" Code="{Binding Code}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="4" Grid.Row="3" Grid.ColumnSpan="2"/>
                    </Grid>
                </Border>

                <Label Grid.Row="2" Text="{Binding Numero}" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="Center"/>
            </Grid>

            <vues:BoutonReglesVue Grid.Column="1" VerticalOptions="Start" HorizontalOptions="End"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>