<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:layout="clr-namespace:Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.Layout"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.Layout.LayoutInfoStepView"
             x:DataType="layout:LayoutInfoStepViewModel">
    <Grid RowDefinitions="Auto,Auto,*">
        <StackPanel>
            <StackPanel.Styles>
                <Styles>
                    <Style Selector="TextBlock">
                        <Setter Property="TextWrapping" Value="Wrap"></Setter>
                    </Style>
                </Styles>
            </StackPanel.Styles>
            <TextBlock Theme="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap">
                Layout information
            </TextBlock>
            <TextBlock TextWrapping="Wrap">
                The information below is used by Artemis to automatically find your layout.
                Some layouts can be shared across different devices and here you have a chance to set that up.
            </TextBlock>
            <TextBlock TextWrapping="Wrap" Classes="warning" Margin="0 10 0 0">
                <Run>Ensure you enter the model and vendor</Run>
                <Run FontWeight="Bold">exactly</Run>
                <Run>as detected on the device by Artemis.</Run>
            </TextBlock>
        </StackPanel>

        <StackPanel Grid.Row="1"
                    Grid.Column="0"
                    IsVisible="{CompiledBinding IsKeyboardLayout}"
                    Margin="0 20 0 0">
            <Label>Physical layout</Label>
            <shared:EnumComboBox Value="{CompiledBinding PhysicalLayout}"></shared:EnumComboBox>
        </StackPanel>
        
        <HyperlinkButton Grid.Row="1"
                                  Grid.Column="0"
                                  IsVisible="{CompiledBinding IsKeyboardLayout}"
                                  Margin="0 10 0 0"
                                  VerticalAlignment="Top"
                                  HorizontalAlignment="Right"
                                  NavigateUri="https://wiki.artemis-rgb.com/en/guides/developer/layouts/keyboard-layouts?mtm_campaign=artemis&amp;mtm_kwd=workshop-wizard">
            Learn about physical layouts
        </HyperlinkButton>

        <ScrollViewer Grid.Row="2"
                      Grid.Column="0"
                      Margin="0 10 0 0"
                      Classes="with-padding"
                      HorizontalScrollBarVisibility="Disabled"
                      VerticalScrollBarVisibility="Auto"
                      VerticalAlignment="Top">
            <ItemsRepeater ItemsSource="{CompiledBinding LayoutInfo}">
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Border Classes="card-separator" />
                            <ContentControl Content="{CompiledBinding}" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </ScrollViewer>
    </Grid>
</UserControl>