<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:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
             xmlns:layout="clr-namespace:Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.Layout"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.Layout.LayoutSelectionStepView"
             x:DataType="layout:LayoutSelectionStepViewModel">
    <Grid RowDefinitions="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 selection
            </TextBlock>
            <TextBlock TextWrapping="Wrap">
                Please select the layout you want to share by either selecting a device or browsing for the layout file
            </TextBlock>

            <ComboBox ItemsSource="{CompiledBinding Devices}" SelectedItem="{CompiledBinding SelectedDevice}"
                      Width="460"
                      VerticalContentAlignment="Center"
                      Height="50"
                      Margin="0 15"
                      PlaceholderText="Select the layout of a device">
                <ComboBox.ItemTemplate>
                    <DataTemplate DataType="core:ArtemisDevice">
                        <Grid RowDefinitions="Auto,*" ColumnDefinitions="Auto,*">
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{CompiledBinding RgbDevice.DeviceInfo.Model}" TextTrimming="CharacterEllipsis"></TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{CompiledBinding RgbDevice.DeviceInfo.Manufacturer}" TextTrimming="CharacterEllipsis" Classes="subtitle"></TextBlock>
                        </Grid>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            
            <Button Command="{CompiledBinding BrowseLayout}">Browse layout</Button>
            
            <TextBlock Text="{CompiledBinding Layout.FilePath, FallbackValue=''}" Margin="0 10 0 5" ></TextBlock>
        </StackPanel>
        <Border Grid.Row="1" 
                Classes="card"
                Padding="0" 
                ClipToBounds="True" 
                IsVisible="{CompiledBinding LayoutImage, Converter={x:Static ObjectConverters.IsNotNull}}"
                Background="{DynamicResource CheckerboardBrush}">
            <Image Source="{CompiledBinding LayoutImage}" Margin="25"/>
        </Border>
    </Grid>
</UserControl>