<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:controls="clr-namespace:GitHub.UI.Controls"
             xmlns:vm="clr-namespace:GitHub.UI.ViewModels"
             mc:Ignorable="d" d:DesignWidth="420"
             x:Class="GitHub.UI.Views.TwoFactorView">
    <Design.DataContext>
        <vm:TwoFactorViewModel/>
    </Design.DataContext>
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Margin="0,0,0,15">
            <!-- TODO: replace with GitHub logo -->
            <TextBlock Text="GitHub"
                       HorizontalAlignment="Center"
                       FontSize="20"
                       FontWeight="Bold"/>
            <TextBlock Text="Two-factor authentication"
                       HorizontalAlignment="Center"
                       FontSize="24"
                       FontWeight="Light"
                       Margin="0,0,0,10" />
            <controls:HorizontalShadowDivider/>
        </StackPanel>

        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <TextBlock Text="{Binding Description}" Margin="0,0,0,20"
                       TextWrapping="Wrap" TextAlignment="Center"/>
            <controls:SixDigitInput x:Name="_codeInput"
                                    Text="{Binding Code}"
                                    Margin="0,0,0,20"
                                    HorizontalAlignment="Center"/>
            <Button Content="Verify"
                    IsDefault="True"
                    Command="{Binding VerifyCommand}"
                    HorizontalAlignment="Center"
                    Classes="accent"/>
            <Button Content="Learn more"
                    Command="{Binding LearnMoreCommand}"
                    HorizontalAlignment="Center"
                    Classes="hyperlink"
                    Margin="0,20,0,0"/>
        </StackPanel>
    </DockPanel>
</UserControl>
