<?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.ChangePassword"
             Title="ChangePassword"
            BackgroundColor="{StaticResource BackgroundPrimary}">

    <ScrollView>
        <Grid
            Margin="20"
            RowDefinitions="Auto, Auto, Auto, *">

            <!-- Change Password label and return button -->
            <Grid
                Grid.Row="0"
                RowDefinitions="Auto, *"
                ColumnDefinitions="*, 3*"
                Margin="0, 0, 0, 40">
                <HorizontalStackLayout>
                    <ImageButton 
                        Grid.Column="0" 
                        Clicked="OnBackButtonClicked"
                        HeightRequest="50"
                        WidthRequest="50"
                        Source="arrow_back.svg"/>
                </HorizontalStackLayout>
                <Label 
                    Grid.Column="1"
                    FontSize="24"
                    TextColor="{StaticResource TextColorPrimary}"
                    Text="Change Password"
                    FontFamily="PoppinsBold"
                    VerticalOptions="Center"/>
            </Grid>

            <!-- User inputs -->
            <Grid
                Grid.Row="2"
                Margin="0, 20, 0, 0"
                RowDefinitions="Auto, *, Auto, *,Auto,*">
                <VerticalStackLayout>
                    <Label 
                        Grid.Row="0"
                        Text="Old Password Here :"
                        FontFamily="PoppinsBold"
                        TextColor="{StaticResource TextColorSecondary}"/>

                    <Border
                        Style="{StaticResource SecondaryBorder}"
                        Margin="0,30,10,20">
                        <Grid
                            Padding="5"
                            BackgroundColor="{StaticResource BackgroundSecondary}"
                            ColumnDefinitions="Auto,Auto,*">

                            <Image 
                                Grid.Column="1"
                                Source="password_icon.svg">
                            </Image>
                            <Entry 
                                Style="{StaticResource UserInput}"
                                Grid.Column="2"
                                Placeholder="Old Password"
                                IsPassword="True"/>
                        </Grid>
                    </Border>

                    <Label 
                        Grid.Row="0"
                        Text="New Password Here :"
                        FontFamily="PoppinsBold"
                        TextColor="{StaticResource TextColorSecondary}"/>

                    <Border
                        Style="{StaticResource SecondaryBorder}"
                        Margin="0,30,0,20">
                        <Grid
                            Padding="5"
                            BackgroundColor="{StaticResource BackgroundSecondary}"
                            ColumnDefinitions="Auto,Auto,*">

                            <Image 
                                Grid.Column="1"
                                Source="password_icon.svg">
                            </Image>
                            <Entry 
                                Style="{StaticResource UserInput}"
                                Grid.Column="2"
                                Placeholder="New Password"
                                IsPassword="True"/>
                        </Grid>
                    </Border>

                    <Label 
                        Grid.Row="0"
                        Text="Confirm New Password Here :"
                        FontFamily="PoppinsBold"
                        Margin="0,0,0,0"
                        TextColor="{StaticResource TextColorSecondary}"/>
                
                    <Border
                        Style="{StaticResource SecondaryBorder}"
                        Margin="0,30,0,20">
                        <Grid
                            Padding="5"
                            BackgroundColor="{StaticResource BackgroundSecondary}"
                            ColumnDefinitions="Auto,Auto,*">

                            <Image 
                                Grid.Column="1"
                                Source="password_icon.svg">
                            </Image>
                            <Entry 
                                Style="{StaticResource UserInput}"
                                Grid.Column="2"
                                Placeholder="New Password"
                                IsPassword="True"/>
                        </Grid>
                    </Border>
                </VerticalStackLayout>



            </Grid>


            <!-- Save button -->

            <VerticalStackLayout
                Grid.Row="3"
                VerticalOptions="End">
                <Border
                    Margin="0, 30, 0, 0"
                    Stroke="{StaticResource BackgroundPrimary}"
                    StrokeShape="RoundRectangle 12">
                    <Button
                        HeightRequest="50"
                        Style="{StaticResource UserButton}"
                        BackgroundColor="{StaticResource ActionButton}"
                        Text="SAVE"/>
                </Border>
            </VerticalStackLayout>


        </Grid>

    </ScrollView>

</ContentPage>