<?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.LoginPage"
             Title="Login"
             BackgroundColor="{StaticResource BackgroundPrimary}">
    <VerticalStackLayout
        Margin="20, 75, 20, 20">
        <Label 
            FontFamily="PoppinsBold"
            Text="Welcome Back!"
            FontSize="32"
            TextColor="{StaticResource TextColorPrimary}"
            FontAttributes="Bold"
            VerticalOptions="Start" 
            HorizontalOptions="Start" />

        <Label 
            Text="Fill in your credentials or continue with social media"
            FontFamily="PoppinsBold"
            FontSize="20"
            TextColor="{StaticResource TextColorSecondary}"
            VerticalOptions="Start" 
            HorizontalOptions="Start" />

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

                <Image 
                    Grid.Column="1"
                    Source="email_icon.svg">
                </Image>
                <Entry 
                    Style="{StaticResource UserInput}"
                    Grid.Column="2"
                    Placeholder="Mail address"
                    x:Name="EmailEntry"/>
            </Grid>
        </Border>

        <Border
            Style="{StaticResource SecondaryBorderShadow}"
            >
            <Grid
                Padding="5"
                BackgroundColor="{StaticResource BackgroundSecondary}"
                ColumnDefinitions="Auto,Auto,*,Auto">

                <Image 
                    Grid.Column="1"
                    Source="password_icon.svg">
                </Image>
                <Entry 
                    Style="{StaticResource UserInput}"
                    Grid.Column="2"
                    Placeholder="Password"
                    x:Name="PasswordEntry"
                    IsPassword="True"/>
                <ImageButton
                    Grid.Column="3"
                    Source="visibility_off.svg"
                    HeightRequest="30">
                </ImageButton>
            </Grid>
        </Border>

        <Label 
            TextColor="{StaticResource TextColorSecondary}"
            HorizontalOptions="End"
            Text="Forgot Password ?"
            BackgroundColor="Transparent">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="ForgotPasswordTapped" />
            </Label.GestureRecognizers>
        </Label>

        <Border
            Margin="0, 30, 0, 0"
            Stroke="{StaticResource BackgroundPrimary}"
            StrokeShape="RoundRectangle 12">
            <Button
                BackgroundColor="{StaticResource Selected}"
                FontFamily="PoppinsMedium"
                TextColor="{StaticResource ButtonText}"
                Text="LOG IN"
                Clicked="OnLoginButtonClicked"/>
        </Border>

        <HorizontalStackLayout
            HorizontalOptions="Center"
            Margin="0, 20, 0, 0"
            Spacing="6">
            <Rectangle 
                BackgroundColor="Gray"
                WidthRequest="15"
                HeightRequest="3"/>
            <Label
                TextColor="{StaticResource TextColorSecondary}">
                Or continue with</Label>
            <Rectangle 
                BackgroundColor="Gray"
                WidthRequest="15"
                HeightRequest="3"/>
        </HorizontalStackLayout>

        <HorizontalStackLayout
            Margin="0, 20, 0, 0"
            Spacing="15"
            HorizontalOptions="Center">
            <Border 
                HeightRequest="75"
                WidthRequest="75"
                BackgroundColor="#e9f4ff"
                StrokeShape="RoundRectangle 25 25 25 25"
                Stroke="{StaticResource BackgroundPrimary}">
                <Image
                    HeightRequest="50"
                    Source="google_logo.svg"/>
            </Border>

            <Border 
                HeightRequest="75"
                WidthRequest="75"
                BackgroundColor="#4460a0"
                StrokeShape="RoundRectangle 25 25 25 25"
                Stroke="{StaticResource BackgroundPrimary}">
                <Image
                    WidthRequest="40"
                    Source="facebook_logo.svg"/>
            </Border>
        </HorizontalStackLayout>

        <HorizontalStackLayout 
            Spacing="4"
            HorizontalOptions="Center"
            Margin="0, 20, 0, 0">
            <Label 
                TextColor="{StaticResource TextColorPrimary}">
                New User?</Label>
            <Label 
                FontAttributes="Bold" 
                TextColor="{StaticResource TextColorPrimary}"
                Text="Create Account">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="RegisterLabbelTapped" />
                </Label.GestureRecognizers>
            </Label>
        </HorizontalStackLayout>

    </VerticalStackLayout>
</ContentPage>