<UserControl x:Class="Artemis.UI.Screens.StartupWizard.Steps.LayoutStepView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mde="https://spiegelp.github.io/MaterialDesignExtensions/winfx/xaml"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap">
            Artemis uses <Run Text="spatial awareness" FontStyle="Italic" /> to create realistic effects across multiple devices. <LineBreak />
            In order to do this correctly, we need to know where your devices are located on your desk.
            Select one of the two presets below, after the setup wizard finishes you can tweak this in detail in the <Run Text="Surface editor" FontWeight="Bold" Foreground="{StaticResource PrimaryHueMidBrush}"/>.
        </TextBlock>

        <Button Grid.Row="1"
                Grid.Column="0"
                Style="{StaticResource MaterialDesignFlatButton}"
                Foreground="{DynamicResource MaterialDesignBody}"
                Command="{s:Action ApplyLeftHandedPreset}"
                HorizontalAlignment="Right" 
                Margin="0 0 10 0"
                Width="280"
                Height="280"
                IsEnabled="False">
            <StackPanel>
                <materialDesign:PackIcon Kind="HandLeft" Width="150" Height="150" HorizontalAlignment="Center" />
                <TextBlock TextAlignment="Center" Style="{StaticResource MaterialDesignHeadline6TextBlock}" Margin="0 10 0 0">
                    Left-handed preset
                </TextBlock>
                <TextBlock TextAlignment="Center" Style="{StaticResource MaterialDesignBody2TextBlock}" TextWrapping="Wrap">
                    A preset with the mouse on the left side of the keyboard
                </TextBlock>
            </StackPanel>
        </Button>

        <Button Grid.Row="1"
                Grid.Column="1"
                Style="{StaticResource MaterialDesignFlatButton}"
                Foreground="{DynamicResource MaterialDesignBody}"
                Command="{s:Action ApplyRightHandedPreset}"
                HorizontalAlignment="Left" 
                Margin="10 0 0 0"
                Width="280"
                Height="280">
            <StackPanel>
                <materialDesign:PackIcon Kind="HandRight" Width="150" Height="150" HorizontalAlignment="Center" />
                <TextBlock TextAlignment="Center" Style="{StaticResource MaterialDesignHeadline6TextBlock}" Margin="0 10 0 0">
                    Right-handed preset
                </TextBlock>
                <TextBlock TextAlignment="Center" Style="{StaticResource MaterialDesignBody2TextBlock}" TextWrapping="Wrap">
                    A preset with the mouse on the right side of the keyboard
                </TextBlock>
            </StackPanel>
        </Button>

        <mde:StepButtonBar Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Back="BACK" />
    </Grid>
</UserControl>