<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="clr-namespace:Atlassian.Bitbucket.UI.ViewModels;assembly=Atlassian.Bitbucket"
             xmlns:converters="clr-namespace:GitCredentialManager.UI.Converters;assembly=gcmcore"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Atlassian.Bitbucket.UI.Views.CredentialsView">
    <Design.DataContext>
        <vm:CredentialsViewModel/>
    </Design.DataContext>
    <DockPanel LastChildFill="True">
        <StackPanel DockPanel.Dock="Bottom">
            <Button HorizontalAlignment="Center" Margin="0,0,0,10"
                    Classes="hyperlink"
                    Command="{Binding ForgotPasswordCommand}"
                    Content="Can't log in?"/>
            <Button HorizontalAlignment="Center" Margin="0,0,0,8"
                    Classes="hyperlink"
                    Command="{Binding SignUpCommand}"
                    Content="Sign up for an account" />
        </StackPanel>

        <StackPanel DockPanel.Dock="Top">
            <Image HorizontalAlignment="Center" Source="/UI/Assets/atlassian-logo.png" Height="90" />
            <TextBlock HorizontalAlignment="Center" Text="Log in to your account" Margin="0,-10,0,0" />
            <TextBlock HorizontalAlignment="Center" Text="{Binding Url}"
                       IsVisible="{Binding Url, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                       Margin="0,10,0,0"/>
        </StackPanel>

        <TabControl x:Name="_authModesTabControl"
                    VerticalContentAlignment="Center"
                    AutoScrollToSelectedItem="True"
                    Width="288"
                    Margin="0,20">
            <TabControl.Styles>
                <Style Selector="TabItem">
                    <Setter Property="MinHeight" Value="30" />
                </Style>
                <Style Selector="DockPanel > ItemsPresenter > WrapPanel">
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                </Style>
            </TabControl.Styles>

            <TabItem IsVisible="{Binding ShowOAuth}">
                <TabItem.Header>
                    <TextBlock Text="Browser" FontSize="12" />
                </TabItem.Header>
                <StackPanel Margin="0,15">
                    <Button x:Name="_oauthLoginButton" IsDefault="True"
                            HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                            Command="{Binding OAuthCommand}"
                            Classes="accent" Height="40" Padding="15,5"
                            Content="Sign in with your browser" />
                </StackPanel>
            </TabItem>

            <TabItem IsVisible="{Binding ShowBasic}">
                <TabItem.Header>
                    <TextBlock Text="Password/Token" FontSize="12" />
                </TabItem.Header>
                <StackPanel Margin="0,15">
                    <TextBox x:Name="_userNameTextBox" Margin="0,0,0,10"
                             HorizontalAlignment="Stretch"
                             Watermark="Email or username"
                             Text="{Binding UserName}" />
                    <TextBox x:Name="_passwordTextBox" Margin="0,0,0,10"
                             HorizontalAlignment="Stretch"
                             Watermark="Password or token" PasswordChar="●"
                             Text="{Binding Password}" />
                    <Button IsDefault="True"
                            HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                            Command="{Binding LoginCommand}"
                            Content="Sign in" Width="140" Height="40"
                            Classes="accent" />
                </StackPanel>
            </TabItem>
        </TabControl>
    </DockPanel>
</UserControl>
