<UserControl x:Class="Tango.MachineStudio.UI.Views.MachineSerialView"
             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:autoComplete="clr-namespace:Tango.AutoComplete.Editors;assembly=Tango.AutoComplete"
             xmlns:autoCompleteMachine="clr-namespace:Tango.MachineStudio.Common.AutoComplete;assembly=Tango.MachineStudio.Common"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:vm="clr-namespace:Tango.MachineStudio.UI.ViewModels"
             xmlns:local="clr-namespace:Tango.MachineStudio.UI.Views"
             mc:Ignorable="d" Width="559" Height="266" Background="White" d:DataContext="{d:DesignInstance Type=vm:MachineSerialViewVM, IsDesignTimeCreatable=False}">

    <UserControl.Resources>
        <autoCompleteMachine:MachinesProvider x:Key="MachinesProvider" />
    </UserControl.Resources>

    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <Grid>
                <StackPanel Orientation="Horizontal" Margin="10">
                    <Image Source="/Images/machine-trans.png" RenderOptions.BitmapScalingMode="Fant"></Image>
                    <TextBlock Text="Virtual Machine" VerticalAlignment="Center" Margin="10 0 0 0" FontSize="20"></TextBlock>
                </StackPanel>
            </Grid>

            <Grid Grid.Row="1" Margin="10 0 10 10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="50"/>
                </Grid.RowDefinitions>

                <Grid>
                    <StackPanel Margin="0 10 0 0" >
                        <TextBlock TextWrapping="Wrap">
                            <Run>Connecting directly to a machine's embedded firmware requires the selection of an existing machine from the database in order for machine studio to function properly.</Run>
                            <LineBreak/>
                            <LineBreak/>
                            <Run>Please select a 'virtual machine' by entering the machine serial number</Run>
                        </TextBlock>

                        <StackPanel Orientation="Horizontal" Margin="0 20 0 0" Width="300" HorizontalAlignment="Left">
                            <materialDesign:PackIcon Kind="BarcodeScan" VerticalAlignment="Bottom" Width="24" Height="24" />
                            <autoComplete:AutoCompleteTextBox HorizontalContentAlignment="Stretch" Width="300" Margin="10 0 0 0" FontSize="16" Provider="{StaticResource MachinesProvider}" SelectedItem="{Binding SelectedMachine,Mode=TwoWay}" materialDesign:HintAssist.Hint="Serial Number / Name" DisplayMember="SerialNumber">
                                <autoComplete:AutoCompleteTextBox.ItemTemplate>
                                    <DataTemplate>
                                        <Border Padding="5">
                                            <DockPanel LastChildFill="False" Width="250">
                                                <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
                                                    <Image Source="/Images/machine-trans.png" Width="24" RenderOptions.BitmapScalingMode="Fant" />
                                                    <TextBlock Margin="10 0 0 0" FontWeight="SemiBold" Text="{Binding SerialNumber}" VerticalAlignment="Center"></TextBlock>
                                                </StackPanel>
                                                <TextBlock DockPanel.Dock="Right" HorizontalAlignment="Right" Text="{Binding Name}" Foreground="Gray" VerticalAlignment="Center"></TextBlock>
                                            </DockPanel>
                                        </Border>
                                    </DataTemplate>
                                </autoComplete:AutoCompleteTextBox.ItemTemplate>
                            </autoComplete:AutoCompleteTextBox>
                        </StackPanel>
                    </StackPanel>
                </Grid>

                <Grid Grid.Row="1">
                    <Button HorizontalAlignment="Right" Width="140" Command="{Binding OKCommand}">CONNECT</Button>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</UserControl>