<Window x:Class="Server_Dashboard.LoginWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:local="clr-namespace:Server_Dashboard"
        xmlns:loading="clr-namespace:Server_Dashboard.Controls"
        x:Name="Login"
        mc:Ignorable="d"
        Title="Server Dashboard"
        Height="700" Width="500" WindowStyle="None" Background="Transparent" ResizeMode="CanResize" local:CloseProperty.Value="True">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0" ResizeBorderThickness="0"/>
    </WindowChrome.WindowChrome>
    <Window.DataContext>
        <local:LoginViewModel/>
    </Window.DataContext>
    <!--#region Login forms main container-->
    <Border Background="{StaticResource BackgroundSurface_00dp}">
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="70"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height=".3*"/>
            </Grid.RowDefinitions>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDown">
                    <i:CallMethodAction MethodName="DragMove" TargetObject="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <!--#region Custom title bar-->
            <Grid Background="{StaticResource BackgroundSurface_04dp}" Grid.Row="0" Grid.ColumnSpan="2">
                <Grid.Effect>
                    <DropShadowEffect Direction="270" ShadowDepth="0" BlurRadius="5"/>
                </Grid.Effect>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="40"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"/>
                <Button Style="{StaticResource CloseButton}" Grid.Column="2" Content="✕">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <i:CallMethodAction MethodName="Close" TargetObject="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </Grid>
            <!--#endregion-->
            <!--#region Greeting text-->
            <Border Height="100" BorderBrush="{StaticResource DeepPurple_400}" BorderThickness="0 2 0 2" Background="{StaticResource BackgroundSurface_00dp}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.ColumnSpan="2" Margin="0 0 0 10">
                <StackPanel VerticalAlignment="Center" Margin="0 0 0 5" >
                    <TextBlock Text="Server Dashboard" FontSize="30" HorizontalAlignment="Center">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="White" Opacity="0.64"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                    <TextBlock Text="Login" FontSize="30" HorizontalAlignment="Center">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="White" Opacity="0.64"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                </StackPanel>
            </Border>
            <UserControl Grid.Row="2" Visibility="{Binding Loading}">
                <loading:LoadingIndicator/>
            </UserControl>
            <!--#endregion-->
            <!--#region Username form-->
            <Border CornerRadius="4" Margin="0 10 0 10" Width="350" Height="60" Background="{StaticResource BackgroundSurface_01dp}" Grid.Row="3" Grid.ColumnSpan="2">
                <Border.Effect>
                    <DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5"/>
                </Border.Effect>
                <Grid Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Height="30" Source="Assets/Images/userlogin.png"/>
                    <TextBox Text="{Binding Username}" x:Name="UserName" Grid.Column="1" Margin="0 0 5 0"/>
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" Text="Username" Visibility="{Binding ElementName=UserName, Path=Text.IsEmpty, Converter={StaticResource UserNameVisibillity}}" Grid.Column="1" IsHitTestVisible="False">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="White" Opacity="0.12"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                </Grid>
            </Border>
            <!--#endregion-->
            <!--#region Password form-->
            <Border Margin="0 10 0 10" Background="{StaticResource BackgroundSurface_01dp}" Grid.Row="4" Grid.ColumnSpan="2" Width="350" CornerRadius="4" Padding="0 0 5 0">
                <Border.Effect>
                    <DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5"/>
                </Border.Effect>
                <Grid Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Height="30" Source="Assets/Images/userpasswd.png"/>
                    <PasswordBox Width="290" Height="60" local:MonitorPasswordProperty.Value="True" Grid.Column="1" x:Name="Password">
                        <PasswordBox.InputBindings>
                            <KeyBinding Key="Return" Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=Login}"/>
                        </PasswordBox.InputBindings>
                    </PasswordBox>
                    <TextBlock Visibility="{Binding ElementName=Password, Path=(local:HasTextProperty.Value), Converter={StaticResource UserNameVisibillity}}" x:Name="PasswordHint" Text="Password" Grid.Column="1" IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <TextBlock.InputBindings>
                            <KeyBinding Key="Return" Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=Login}"/>
                        </TextBlock.InputBindings>
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="White" Opacity="0.12"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                </Grid>
            </Border>
            <!--#endregion-->
            <!--#region Login button-->
            <Button Height="60" Width="350" Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=Login}" Grid.Row="5" Content="LOGIN" Grid.ColumnSpan="2"/>
            <!--#endregion-->
            <!--#region Error text-->
            <TextBlock Text="{Binding ErrorText}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="6" Grid.Column="1" Foreground="{StaticResource ErrorRed}" FontSize="14"/>
            <!--#endregion-->

            <!--#region Remember me and Password forgotten link-->
            <Grid Grid.Row="7">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <CheckBox IsChecked="{Binding RememberUser}" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="75 0 0 0"/>
                <TextBlock Grid.Column="1" Text="Remember me?" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10 0 0 0">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="White" Opacity="0.64"/>
                    </TextBlock.Foreground>
                </TextBlock>
                <TextBlock Grid.Column="3" FontSize="14" Margin="0 0 75 0" VerticalAlignment="Center" HorizontalAlignment="Right">
                    <!--Send recovery Email to user, probably replace with a button-->
                    <Hyperlink NavigateUri="https://example.com" local:HyperlinkExtensions.IsExternal="True">
                        Forgot password
                    </Hyperlink>
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="White" Opacity="0.64"/>
                    </TextBlock.Foreground>
                </TextBlock>
            </Grid>
            <!--#endregion-->
            <!--#region Link to register form-->
            <Grid Grid.Row="8">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <TextBlock Text="Don't have an account?" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="White" Opacity="0.64"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                    <Button Command="{Binding RegisterCommand}" Content="REGISTER" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="12" Height="30" Width="80" Margin="10 0 0 0"/>
                </StackPanel>
            </Grid>
            <!--#endregion-->
        </Grid>
    </Border>
    <!--#endregion-->
</Window>