<?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="ShoopNCook.Pages.ProfilePage"
             Title="Profile"
             BackgroundColor="{StaticResource BackgroundPrimary}">

    <ScrollView>
        <Grid
            Padding="20"
            RowDefinitions="Auto, Auto, Auto, *">
        
            <!-- Profile label and return button -->
            <Grid
                Grid.Row="0"
                Padding="10, 20, 0, 30"
                ColumnDefinitions="*"
                MaximumHeightRequest="60">

                <ImageButton 
                    Grid.Column="0" 
                    HeightRequest="50"
                    WidthRequest="50"
                    Source="arrow_back.svg"
                    HorizontalOptions="Start"
                    Clicked="OnBackButtonClicked"/>

                <Label 
                    Grid.Column="0"
                    FontSize="24"
                    TextColor="{StaticResource TextColorPrimary}"
                    Text="Profile"
                    MaximumHeightRequest="60"
                    FontFamily="PoppinsBold"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"/>
            </Grid>

            <!-- Profile picture and name -->
            <Grid
                Grid.Row="1"
                RowDefinitions="*, Auto, Auto">


                <Border
                    Grid.Row="0"
                    StrokeShape="RoundRectangle 10000"
                    MaximumHeightRequest="150"
                    MaximumWidthRequest="150"
                    HorizontalOptions="Center"
                    Stroke="{StaticResource BackgroundPrimary}"
                    BackgroundColor="{StaticResource BackgroundSecondary}">
                    <ImageButton
                        Grid.Row="0"
                        Source="default_profile_picture.png"/>
                </Border>

                <Label 
                    Grid.Row="1"
                    FontSize="30"
                    HorizontalOptions="Center"
                    TextColor="{StaticResource TextColorPrimary}"
                    Text="%Profile_Name%"
                    FontFamily="PoppinsBold"/>
                <Label 
                    Grid.Row="2"
                    FontSize="16"
                    HorizontalOptions="Center"
                    TextColor="{StaticResource TextColorSecondary}"
                    Text="Profile settings"
                    FontFamily="PoppinsBold"/>

            </Grid>

            <!-- User inputs -->
            <Grid
                Grid.Row="2"
                Padding="0, 20, 0, 0"
                RowDefinitions="Auto, *, Auto, Auto,Auto">
                <Label 
                    Grid.Row="0"
                    Text="Name"
                    FontFamily="PoppinsBold"
                    TextColor="{StaticResource TextColorSecondary}"/>

                <Border
                    Grid.Row="1"
                    Style="{StaticResource SecondaryBorderShadow}">
                    <Entry
                        Style="{StaticResource UserInput}"
                        Text="%Profile_Name%"
                        Placeholder="Place your name here"/>
                </Border>

                <Label 
                    Grid.Row="2"
                    Text="Your Email"
                    FontFamily="PoppinsBold"
                    TextColor="{StaticResource TextColorSecondary}"/>

                <Border
                    Grid.Row="3"
                    Style="{StaticResource SecondaryBorderShadow}">
                    <Entry
                        Style="{StaticResource UserInput}"
                        Text="%Profile_Mail%"
                        Placeholder="Place your email address here"/>
                </Border>
                <Border
                    Grid.Row="4"
                    Margin="0, 30, 0, 0"
                    Stroke="{StaticResource BackgroundPrimary}"
                    StrokeShape="RoundRectangle 12">
                    <Button
                        BackgroundColor="{StaticResource ActionButton}"
                        FontFamily="PoppinsMedium"
                        TextColor="White"
                        Text="Change My Password"
                        Clicked="ChangeMyPasswordClicked"/>
                </Border>



            </Grid>


            <!-- Save button -->

            <VerticalStackLayout
                Grid.Row="3"
                VerticalOptions="End">
                <Border
                    Margin="0, 30, 0, 0"
                    Stroke="{StaticResource BackgroundPrimary}"
                    StrokeShape="RoundRectangle 12">
                    <Button
                        BackgroundColor="{StaticResource ActionButton}"
                        FontFamily="PoppinsMedium"
                        TextColor="White"
                        Text="SAVE"/>
                </Border>
            </VerticalStackLayout>


        </Grid>

    </ScrollView>


</ContentPage>