<?xml version="1.0" encoding="utf-8" ?>

<!-- To diplay breed name -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Views.DetailRace"
             Title="{Binding Nom}"
             IconImageSource="{FontImage FontFamily=Raleway}">
    <ScrollView>
        <VerticalStackLayout>
            <!-- To diplay breed image -->
            <Image Source="{Binding Image}"
                   MaximumWidthRequest="300"
                   Margin="20"
                   HorizontalOptions="Center"/>
            <Border VerticalOptions="Start"
                        Grid.Column="1"
                        Margin="0,10,0,10">
                <Grid RowDefinitions="Auto, Auto, Auto, Auto, Auto"
                          ColumnDefinitions="*, *"
                          RowSpacing="8">
                    <!-- To diplay breed scientific name -->
                    <Label Text="Nom scientifique"/>
                    <Label Grid.Column="1"
                               HorizontalOptions="End"
                               Text="{Binding NomScientifique}"
                               FontAttributes="None"
                               FontFamily="Raleway"/>

                    <!-- To diplay breed life expectancy -->
                    <Label Grid.Row="1"
                               Text="Espérance de vie"/>
                    <Label Grid.Column="2"
                               Grid.Row="1"
                               HorizontalOptions="End"
                               Text="{Binding EsperanceVie}"
                               FontAttributes="None"
                               FontFamily="Raleway"/>

                    <!-- To diplay breed average weight -->
                    <Label Grid.Row="2"
                               Text="Poids moyen"/>
                    <Label Grid.Column="2"
                               Grid.Row="2"
                               HorizontalOptions="End"
                               Text="{Binding PoidsMoyen}"
                               FontAttributes="None"
                               FontFamily="Raleway"/>

                    <!-- To diplay breed average height -->
                    <Label Grid.Row="3"
                               Text="Taille moyenne"/>
                    <Label Grid.Column="2"
                               Grid.Row="3"
                               HorizontalOptions="End"
                               Text="{Binding TailleMoyenne}"
                               FontAttributes="None"
                               FontFamily="Raleway"/>
                </Grid>
            </Border>

            <!-- To diplay information on the breed behavior -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Comportement"
                       FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Comportement}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>

            <!-- To diplay information on the breed health -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Santé"
                   FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Sante}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>

            <!-- To diplay information on the breed education -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Education"
                       FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Education}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>

            <!-- To diplay information on the breed maintenance -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Entretien"
                       FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Entretien}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>

            <!-- To diplay information on the breed cost -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Coût potentiel"
                       FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Cout}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>

            <!-- To diplay breed advice -->
            <VerticalStackLayout Margin="0,10,0,10">
                <Label Text="Conseils"
                       FontSize="Large"/>
                <Border>
                    <Label Text="{Binding Conseil}"
                           FontAttributes="None"
                           FontFamily="Raleway"/>
                </Border>
            </VerticalStackLayout>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>