<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Views.Animaux"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             Title="Wikipet's"
             IconImageSource="{FontImage FontFamily=Raleway}">
    <ScrollView>
        <!-- To manage the position of elements on the page -->
        <toolkit:DockLayout>
            <!-- To add a pet -->
            <Button Text="+" 
                    toolkit:DockLayout.DockPosition="Bottom"
                    VerticalOptions="End"
                    HorizontalOptions="End"
                    Clicked="Button_OnClick"
                    FontSize="30"
                    Padding="2"/>
            <VerticalStackLayout>
                <Grid RowDefinitions="Auto, *" 
                      RowSpacing="20">
                    <!-- To display the list of pets -->
                    <ListView ItemsSource="{Binding ListeAnimaux}" 
                              Grid.Row="1"
                              ItemTapped="OnClick">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Margin="0,10,0,10">
                                        <Border>
                                            <Grid ColumnDefinitions="Auto, *" 
                                                  RowDefinitions="3*"
                                                  ColumnSpacing="15">
                                                <!-- To display the image -->
                                                <Frame Grid.RowSpan="3">
                                                    <Image Source="{Binding Image}"/>
                                                </Frame>
                                                <VerticalStackLayout Grid.Column="1">
                                                    <!-- To display the pet's name -->
                                                    <Label Text="{Binding Nom}" 
                                                           FontSize="Large"/>

                                                    <!-- To display species -->
                                                    <Label Text="{Binding Espece}"
                                                           FontSize="12"
                                                           FontFamily="Raleway"/>
                                                </VerticalStackLayout>
                                            </Grid>
                                        </Border>
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </VerticalStackLayout>
        </toolkit:DockLayout>
    </ScrollView>
</ContentPage>