<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
         prism:ViewModelLocator.AutowireViewModel="True"
         xmlns:ci="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
         x:Class="PetCompanion.Shared.Views.User.UserProfilePage"
         NavigationPage.HasNavigationBar="True"
         x:Name="ProfilePage"
         Title="{Binding Username}">

    <ContentPage.Content>
        <ScrollView x:Name="UserPageScrollView">
            <StackLayout>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="210" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="5"/>
                    </Grid.ColumnDefinitions>

                    <!-- Basic User information -->
                    <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="120"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="5"/>
                        </Grid.ColumnDefinitions>

                        <Image x:Name="BackgroundImage" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="2"  Source="{Binding BackgroundPicturePath}" Aspect="AspectFill" BackgroundColor="Green"></Image>


                        <Grid Grid.Row="1" Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="150" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="150"/>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Image x:Name="ProfileImage" Aspect="AspectFill" BackgroundColor="White" Grid.Row="0" Grid.Column="1" Source="{Binding ProfilePicturePath}"/>
                        </Grid>

                        <Label Grid.Row="2" Grid.Column="1" Text="{Binding Username}"  x:Name="UserNameLabel" StyleClass="Header2" HorizontalTextAlignment="Center"/>

                        <Label Grid.Row="3" Grid.Column="1" MaxLines="3" Text="{Binding Description}" />
                        <Button Grid.Row="4" WidthRequest="100" Grid.Column="1" Text="Éditer le profil" StyleClass="RoundLargeButton" BackgroundColor="Transparent" Clicked="OnEditProfileButtonClicked"/>

                        <StackLayout Grid.Row="5" Grid.Column="1" Spacing="25" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                            <ImageButton x:Name="AddFriendButton" Source="addFriend.png" StyleClass="RoundImageButton" Clicked="OnAddFriendButtonClicked" />
                            <ImageButton IsVisible="false" x:Name="RemoveFriendButton" Source="message.png" StyleClass="RoundImageButton" Clicked="OnRemoveFriendButtonClicked"/>
                            <ImageButton x:Name="MessageButton" Source="message.png" StyleClass="RoundImageButton" Clicked="OnMessageButtonClicked" />
                            <ImageButton x:Name="MoreButton" Source="ic_more.png" StyleClass="RoundImageButton" Clicked="OnMoreButtonClicked"/>
                        </StackLayout>
                    </Grid>

                    <BoxView Grid.Row="1" Grid.Column="1" VerticalOptions="Center"
                               HeightRequest="1"
                               Color="#5b5d68"/>

                    <ListView  x:Name="petListView" Grid.Row="2" Grid.Column="1" RowHeight="70">
                        <ListView.Header>
                            <StackLayout Orientation="Horizontal">
                                <Label StyleClass="Header2" Text="Animaux"/>
                            </StackLayout>
                        </ListView.Header>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout BackgroundColor="#FCFCFC" Orientation="Vertical">
                                        <StackLayout Orientation="Horizontal">
                                            <ci:CircleImage Source="{Binding ImagePath}" Aspect="AspectFit" WidthRequest="60" HeightRequest="60" VerticalOptions="LayoutOptions.Center" HorizontalOptions="LayoutOptions.Center"/>

                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="20"/>
                                                    <RowDefinition Height="20"/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="270"/>
                                                    <ColumnDefinition Width="20"/>
                                                    <ColumnDefinition Width="20"/>
                                                </Grid.ColumnDefinitions>

                                                <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Name}" TextColor="#f35e20" FontSize="15"></Label>

                                                <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
                                                    <Label.FormattedText>
                                                        <FormattedString>
                                                            <Span TextColor="Black" FontSize="12" Text="{Binding StrBreed}"/>
                                                            <Span TextColor="Black" FontSize="12" Text=" - "/>
                                                            <Span TextColor="Black" FontSize="14" Text="{Binding StrSex}"/>
                                                        </FormattedString>
                                                    </Label.FormattedText>
                                                </Label>

                                                <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding StrAge}" TextColor="Black" FontSize="12"></Label>
                                            </Grid>

                                        </StackLayout>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </StackLayout>
        </ScrollView>
</ContentPage.Content>
</ContentPage>