<Page
    x:Class="PCUT.Pages.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCUT.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Loading="Page_Loading"
    KeyDown="Page_KeyDown">
    <Page.Background>
        <ImageBrush ImageSource="/Assets/Backgound.jpg" Stretch="UniformToFill"/>
    </Page.Background>

    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="0.475*"/>
                <ColumnDefinition Width="0.475*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.6*"/>
                    <ColumnDefinition Width="0.4*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.35*"/>
                    <RowDefinition Height="0.25*"/>
                    <RowDefinition Height="0.1*"/>
                    <RowDefinition Height="0.3*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Column="0" Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="0.3*"/>
                        <RowDefinition Height="0.3*"/>
                    </Grid.RowDefinitions>
                    
                    <!-- Username or Email input field -->
                    <TextBox x:Name="UsernameInput"
                             Grid.Row="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center"
                             Text="{x:Bind LoginModel.Username, Mode = TwoWay}"  
                             PlaceholderText="Username"/>

                    <!-- Password input field with show/hide toggle -->
                    <PasswordBox x:Name="PasswordInput" 
                                 Grid.Row="1"
                                 Password="{x:Bind LoginModel.Password, Mode = TwoWay}" 
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
                                 PlaceholderText="Password" 
                                 PasswordRevealMode="Hidden" />
                    
                    <ToggleSwitch x:Name="ShowPasswordToggle"
                                  Grid.Row="2"
                                  Header="Show Password" 
                                  VerticalAlignment="Center"
                                  Toggled="ShowPassword_Toggled"/>

                    <HyperlinkButton
                        Grid.Row="2"
                        HorizontalAlignment="Right"
                        Content="Go To Register"
                        NavigateUri="https://pcut.vn/dang-ky-pcut/">
                    </HyperlinkButton>

                    <!-- Remember Me checkbox -->
                    <CheckBox Content="Remember Me" 
                              Grid.Row="3"
                              VerticalAlignment="Center"
                              IsChecked="{x:Bind LoginModel.RememberMe, Mode=TwoWay}" />
                </Grid>

                <Grid Grid.Row="1" Grid.Column="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.4*"/>
                        <RowDefinition Height="0.3*"/>
                        <RowDefinition Height="0.3*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*"/>
                        <ColumnDefinition Width="0.6*"/>
                        <ColumnDefinition Width="0.2*"/>
                    </Grid.ColumnDefinitions>
                    <Button
                        x:Name="LoginButton"
                        Grid.Row="0" Grid.Column="1"  
                        Background="{ThemeResource SystemAccentColor}" 
                        Foreground="White"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                        CornerRadius="20"
                        Content="Login"
                        IsEnabled="{x:Bind Path=LoginModel.LoginEnabled, Mode=OneWay}"
                        Command="{x:Bind Path=LoginModel.NavigateMainCommand}"/>
                </Grid>
                <TextBlock
                    Grid.Row="2"
                    Grid.Column="0"
                    Text="{x:Bind LoginModel.VersionDisplay}"
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Left"
                    Margin="10 0 0 10"/>
            </Grid>
        </Grid>
    </Grid>
</Page>
