<UserControl x:Class="Tango.FSE.MachineConfiguration.Views.SelectionView"
             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:local="clr-namespace:Tango.FSE.MachineConfiguration.Views"
             xmlns:material="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:global="clr-namespace:Tango.FSE.MachineConfiguration"
             xmlns:autoComplete="clr-namespace:Tango.AutoComplete.Editors;assembly=Tango.AutoComplete"
             xmlns:vm="clr-namespace:Tango.FSE.MachineConfiguration.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920" d:DataContext="{d:DesignInstance Type=vm:SelectionViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.SelectionViewVM}" d:DesignStyle="{StaticResource FSE_User_Control_Designer}">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock HorizontalAlignment="Center" FontSize="{StaticResource FSE_ModuleHeaderFontSize}">Machine Configuration</TextBlock>
            <TextBlock TextWrapping="Wrap" Margin="0 20 0 0" TextAlignment="Center" LineHeight="25">
                <Run>The machine configuration module allows you to manage the currently connected machine configuration and other machine settings.</Run>
                <LineBreak/>
                <Run>Given the proper permissions, you will also be able to manage other organization machines.</Run>
            </TextBlock>

            <StackPanel Margin="0 40 0 0" Width="500" HorizontalAlignment="Center">
                <Image Source="../Images/configuration.png" Stretch="None" />

                <TextBlock Margin="60" HorizontalAlignment="Center" FontWeight="SemiBold" Foreground="{StaticResource FSE_PrimaryAccentBrush}" FontSize="{StaticResource FSE_LargerFontSize}">Select Machine</TextBlock>
                <autoComplete:AutoCompleteTextBox material:HintAssist.Hint="Serial Number" MaxPopupHeight="300" Margin="0 5 0 0" Provider="{Binding MachinesAutoCompleteProvider}" SelectedItem="{Binding SelectedMachine,Mode=TwoWay}" DisplayMember="SerialNumber">
                    <autoComplete:AutoCompleteTextBox.SelectedItemTemplate>
                        <DataTemplate>
                            <DockPanel VerticalAlignment="Center">
                                <Image RenderOptions.BitmapScalingMode="Fant" Source="{StaticResource FSE_Machine_Small}" Width="24" />
                                <StackPanel VerticalAlignment="Center" Margin="10 0 0 0" Orientation="Horizontal">
                                    <TextBlock Text="{Binding SerialNumber}" FontSize="{StaticResource FSE_SmallFontSize}"></TextBlock>
                                    <TextBlock Margin="10 0 0 0" FontSize="{StaticResource FSE_SmallFontSize}" Foreground="{StaticResource FSE_GrayBrush}" Text="{Binding Name}"></TextBlock>
                                </StackPanel>
                            </DockPanel>
                        </DataTemplate>
                    </autoComplete:AutoCompleteTextBox.SelectedItemTemplate>
                    <autoComplete:AutoCompleteTextBox.ItemTemplate>
                        <DataTemplate>
                            <DockPanel VerticalAlignment="Center">
                                <Image RenderOptions.BitmapScalingMode="Fant" Source="{StaticResource FSE_Machine_Small}" Width="32" />
                                <StackPanel Margin="5 0 0 0">
                                    <TextBlock Text="{Binding SerialNumber}"></TextBlock>
                                    <TextBlock Margin="0 5 0 0" FontSize="{StaticResource FSE_SmallerFontSize}" Foreground="{StaticResource FSE_GrayBrush}" Text="{Binding Name}"></TextBlock>
                                </StackPanel>
                            </DockPanel>
                        </DataTemplate>
                    </autoComplete:AutoCompleteTextBox.ItemTemplate>
                </autoComplete:AutoCompleteTextBox>

                <Button material:ButtonAssist.CornerRadius="25" Command="{Binding ManageMachineCommand}" Margin="0 100 0 0" Height="50" Width="250" FocusVisualStyle="{x:Null}">
                    <DockPanel>
                        <TextBlock>CONTINUE</TextBlock>
                        <material:PackIcon Margin="10 0 0 0" VerticalAlignment="Center" Kind="ArrowRight" />
                    </DockPanel>
                </Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>