<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:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="1050"
             xmlns:devicedetectinput="clr-namespace:Artemis.UI.Screens.Device;assembly=Artemis.UI"
             x:DataType="devicedetectinput:DeviceDetectInputViewModel"
             x:Class="Artemis.UI.Screens.Device.DeviceDetectInputView">
    <StackPanel Width="500">
		<!-- TODO: Replace with Text.Run stuff once available -->
        <TextBlock TextWrapping="Wrap">
            Press a button/key on your device that is currently showing a yellow color.
		</TextBlock>

        <avalonia:MaterialIcon Kind="Keyboard"
                               Width="300"
                               Height="300"
                               HorizontalAlignment="Center"
                               IsVisible="{CompiledBinding !IsMouse}" />
        <avalonia:MaterialIcon Kind="Mouse"
                               Width="300"
                               Height="300"
                               HorizontalAlignment="Center"
                               IsVisible="{CompiledBinding IsMouse}" />

        <TextBlock TextWrapping="Wrap" Margin="0 10">
            This will teach Artemis to associate button/key presses with this specific device.
        </TextBlock>
    </StackPanel>
</UserControl>