<UserControl xmlns="https://github.com/avaloniaui"
             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:vm="using:Diary.ViewModels"
             mc:Ignorable="d" d:DesignWidth="1500" d:DesignHeight="800"
             x:Class="Diary.Views.CreateUserView"
             x:DataType="vm:CreateUserViewModel"
             Background="{Binding Background}">

    <Design.DataContext>
        <vm:CreateUserViewModel />
    </Design.DataContext>

    <UserControl.Styles>
        <Style Selector="Border">
            <Setter Property="BorderBrush" Value="#24de45" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="10" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="Margin" Value="10" />
        </Style>

        <Style Selector="Label">
            <Setter Property="Foreground" Value="{Binding Foreground}" />
            <Setter Property="FontSize" Value="{Binding FontSize}" />
            <Setter Property="HorizontalAlignment" Value="{Binding TextAlign}" />
            <Setter Property="VerticalAlignment" Value="{Binding TextAlign}" />
            <Setter Property="HorizontalContentAlignment" Value="{Binding TextAlign}" />
            <Setter Property="VerticalContentAlignment" Value="{Binding TextAlign}" />
            <Setter Property="Margin" Value="0, 10, 0, 0" />
            <Setter Property="BorderBrush" Value="{Binding Border}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Width" Value="550" />
            <Setter Property="Height" Value="75" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="CornerRadius" Value="20" />
        </Style>

        <Style Selector="Label.CreateNewUserTitle">
            <Setter Property="FontSize" Value="30" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>

        <Style Selector="Label.CategoryTitle">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>

        <Style Selector="Label.UserInput">
            <Setter Property="FontSize" Value="{Binding FontSize}" />
            <Setter Property="Width" Value="150" />
            <Setter Property="Height" Value="70" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>

        <Style Selector="TextBox">
            <Setter Property="CornerRadius" Value="20" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="{Binding Background}" />
            <Setter Property="Foreground" Value="{Binding Foreground}" />
            <Setter Property="FontSize" Value="{Binding FontSize}" />
            <Setter Property="HorizontalAlignment" Value="{Binding TextAlign}" />
            <Setter Property="VerticalAlignment" Value="{Binding TextAlign}" />
            <Setter Property="HorizontalContentAlignment" Value="{Binding TextAlign}" />
            <Setter Property="VerticalContentAlignment" Value="{Binding TextAlign}" />
            <Setter Property="Width" Value="350" />
            <Setter Property="Height" Value="70" />

            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Background" Value="{Binding Background}" />
            </Style>
        </Style>

        <Style Selector="Button">
            <Setter Property="Foreground" Value="{Binding Foreground}" />
            <Setter Property="BorderBrush" Value="{Binding Border}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="FontSize" Value="{Binding FontSize}" />
            <Setter Property="FontStyle" Value="{Binding FontStyle}" />
        </Style>
    </UserControl.Styles>

    <Border>
        <!-- Main Box -->
        <Grid RowDefinitions="Auto, *, Auto" IsVisible="{Binding !IsVisible}">
            <Label Grid.Row="0" Classes="CreateNewUserTitle" Content="{Binding Title}" />

            <!-- Inner Box -->
            <Grid Grid.Row="1" ColumnDefinitions="*,*">
                <Border Grid.Column="0">
                    <!-- Left Box -->
                    <Grid RowDefinitions="Auto, *">
                        <Label Classes="CategoryTitle" Content="General Information" Grid.Row="0" />

                        <Grid Grid.Row="1" ColumnDefinitions="Auto, *" RowDefinitions="*,*,*">
                            <Label Classes="UserInput" Grid.Column="0" Grid.Row="0" Content="First Name:" />
                            <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding FirstName}" Watermark="First Name" />
                            <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding LastName}" Watermark="Last Name" />
                            <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Email}" Watermark="Email Address" />
                        </Grid>
                    </Grid>
                </Border>

                <Border Grid.Column="1">
                    <!-- Right Box -->
                    <Grid RowDefinitions="Auto, *">
                        <Label Classes="CategoryTitle" Content="Account Information" Grid.Row="0" />

                        <Grid Grid.Row="1" ColumnDefinitions="Auto, *" RowDefinitions="*,*,*,*,*,*">
                            <TextBox Grid.Row="0" Text="{Binding Username}" Watermark="Create Username" />
                            <TextBox Grid.Row="1" Text="{Binding Password}" Watermark="Create Password" />
                            <TextBox Grid.Row="2" Text="{Binding ConfirmPassword}" Watermark="Confirm Password" />
                        </Grid>
                    </Grid>
                </Border>
            </Grid>

            <Grid Grid.Row="3" ColumnDefinitions="*,*">
                <Button Grid.Column="0" Content="Exit" Command="{Binding ExitCommand}" />
                <Button Grid.Column="1" Content="Next" Command="{Binding NextPageCommand}" />
            </Grid>
        </Grid>
    </Border>


</UserControl>