<UserControl x:Class="Tango.MachineStudio.Technician.Views.MachineTechView"
             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:vm="clr-namespace:Tango.MachineStudio.Technician.ViewModels"
             xmlns:global="clr-namespace:Tango.MachineStudio.Technician"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             xmlns:editors="clr-namespace:Tango.Editors;assembly=Tango.Editors"
             xmlns:techItems="clr-namespace:Tango.MachineStudio.Technician.TechItems"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:templates="clr-namespace:Tango.MachineStudio.Technician.PropertiesTemplates"
             xmlns:items="clr-namespace:Tango.MachineStudio.Technician.TechItems"
             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
             xmlns:localConverters="clr-namespace:Tango.MachineStudio.Technician.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Tango.MachineStudio.Technician.Views"
             mc:Ignorable="d" 
             d:DesignHeight="720" d:DesignWidth="1920" d:DataContext="{d:DesignInstance Type=vm:MachineTechViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MachineTechViewVM}">

    <UserControl.Resources>
        <converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter" />
        <converters:NumberToFileSizeConverter x:Key="NumberToFileSizeConverter" />
        <localConverters:SecondsToTimeSpanConverter x:Key="SecondsToTimeSpanConverter" />

        <DataTemplate x:Key="TabTemplate">
            <Border IsVisibleChanged="Border_IsVisibleChanged">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="Visibility" Value="Visible"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsSelected}" Value="False">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <editors:ElementsEditor 
                        x:Name="editor"
                        Elements="{Binding Elements}"
                        Loaded="Editor_Loaded"
                        ElementCreation="ElementsEditor_ElementCreation"  
                        ElementsRemoved="ElementsEditor_ElementsRemoved"
                        AfterPaste="ElementsEditor_AfterPaste"
                        RulerHeight="32" 
                        EditorWidth="1920"
                        EditorHeight="1080"
                        FontSize="10" 
                        Background="{StaticResource TransparentBackgroundBrush450}" 
                        EditorBackground="{StaticResource TransparentBackgroundBrush600}" 
                        RulerBackground="Transparent" 
                        Foreground="{StaticResource BlueSelectionStrokBrush}" 
                        SelectionFillBrush="{StaticResource SelectionFillBrush}" 
                        SelectionStrokeBrush="{StaticResource BlueSelectionStrokBrush}" 
                        BorderBrush="{StaticResource BlueSelectionStrokBrush}" 
                        BorderThickness="1">

                        <editors:ElementsEditor.Style>
                            <Style TargetType="editors:ElementsEditor">
                                <Setter Property="IsEditable" Value="True"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=listMode,Path=SelectedIndex}" Value="1">
                                        <Setter Property="IsEditable" Value="False"></Setter>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </editors:ElementsEditor.Style>

                        <editors:ElementsEditor.ContextMenu>
                            <ContextMenu DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}">
                                <MenuItem Header="Cut (Ctrl+X)" Command="{Binding CutCommand}" MinWidth="210">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Cut" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Copy (Ctrl+C)" Command="{Binding CopyCommand}">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Copy" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Paste (Ctrl+V)" Command="{Binding PasteCommand}" >
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Paste" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <Separator/>
                                <MenuItem Header="Undo (Ctrl+Z)" Command="{Binding UndoCommand}">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Undo" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Redo (Ctrl+Y)" Command="{Binding RedoCommand}">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="RotateRight" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <Separator/>
                                <MenuItem Header="Delete (DELETE)" Command="{Binding DeleteCommand}">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Recycle" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <Separator/>
                                <MenuItem Header="Select All (Ctrl+A)" Command="{Binding SelectAllCommand}">
                                    <MenuItem.Icon>
                                        <fa:ImageAwesome Icon="Th" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                            </ContextMenu>
                        </editors:ElementsEditor.ContextMenu>
                    </editors:ElementsEditor>

                    <Slider Grid.Column="1" Orientation="Vertical" Margin="5" Maximum="3" Minimum="0.2" Value="{Binding ElementName=editor,Path=ScaleFactor}"></Slider>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="150"/>
                <RowDefinition Height="199*"/>
            </Grid.RowDefinitions>

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

                <Menu Padding="5" Background="{StaticResource WhiteBrush100}" Visibility="{Binding HideMenu,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
                    <MenuItem Header="File">
                        <MenuItem Command="{Binding NewProjectCommand}" MinWidth="180" Header="New" VerticalContentAlignment="Center">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="File" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Command="{Binding OpenProjectCommand}" MinWidth="180" Header="Open" VerticalContentAlignment="Center">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="FolderOpen" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem MinWidth="180" Header="Import" VerticalContentAlignment="Center">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="ArrowRight" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>

                            <MenuItem Header="Import Project Tabs" VerticalContentAlignment="Center" Command="{Binding ImportProjectTabsCommand}">
                                <MenuItem.Icon>
                                    <fa:ImageAwesome Icon="Table" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                                </MenuItem.Icon>
                            </MenuItem>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="Save" Command="{Binding SaveProjectCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Save" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Save as" Command="{Binding SaveAsProjectCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Save" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuItem>
                    <MenuItem Header="Edit">
                        <MenuItem Header="Cut (Ctrl+X)" Command="{Binding SelectedTab.Editor.CutCommand}" MinWidth="210">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Cut" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Copy (Ctrl+C)" Command="{Binding SelectedTab.Editor.CopyCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Copy" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Paste (Ctrl+V)" Command="{Binding SelectedTab.Editor.PasteCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Paste" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="Undo (Ctrl+Z)" Command="{Binding SelectedTab.Editor.UndoCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Undo" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Redo (Ctrl+Y)" Command="{Binding SelectedTab.Editor.RedoCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="RotateRight" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="Delete (DELETE)" Command="{Binding SelectedTab.Editor.DeleteCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Recycle" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="Select All (Ctrl+A)" Command="{Binding SelectedTab.Editor.SelectAllCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Th" Width="16" Foreground="{StaticResource MainWindow.Foreground}" />
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuItem>
                    <MenuItem Header="View">
                        <MenuItem Header="Zoom In" Command="{Binding SelectedTab.Editor.ZoomCommand}" CommandParameter="0.1">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="SearchPlus" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Zoom Out" Command="{Binding SelectedTab.Editor.ZoomCommand}" CommandParameter="-0.1">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="SearchMinus" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="Reset Zoom" Command="{Binding SelectedTab.Editor.ResetZoomCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Search" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuItem>
                    <MenuItem Header="Tools">
                        <MenuItem Header="Upload partial hardware configuration" Command="{Binding UploadPartialHardwareConfigurationCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Upload" Width="16" Foreground="{StaticResource MainWindow.Foreground}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="Reset all graphs" Command="{Binding ResetGraphsCommand}">
                            <MenuItem.Icon>
                                <fa:ImageAwesome Icon="Refresh" Width="16" Foreground="{StaticResource MainWindow.Foreground}" />
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuItem>
                    <MenuItem Header="Components">
                        <MenuItem.ItemContainerStyle>
                            <Style TargetType="MenuItem" BasedOn="{x:Null}">
                                <Setter Property="Background" Value="Transparent"></Setter>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="Transparent"></Setter>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </MenuItem.ItemContainerStyle>
                        <ListBox Margin="-27 0 -22 0" MinWidth="180" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding AvailableTechItems}" SelectedItem="{Binding SelectedTechItem}" HorizontalContentAlignment="Stretch">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <Border Width="24" Height="24" BorderThickness="1" CornerRadius="100">
                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Setter Property="Background" Value="Transparent"></Setter>
                                                    <Setter Property="BorderBrush" Value="{StaticResource AccentColorBrush}"></Setter>
                                                    <Setter Property="BorderThickness" Value="1"></Setter>
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" Value="True">
                                                            <Setter Property="Background" Value="{StaticResource WhiteBackgroundBrush}"></Setter>
                                                            <Setter Property="BorderBrush" Value="{StaticResource RedBrush300}"></Setter>
                                                            <Setter Property="BorderThickness" Value="2"></Setter>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Border.Style>
                                            <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant"></Image>
                                        </Border>
                                        <TextBlock Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </MenuItem>
                </Menu>


                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 5 10" Height="40">
                    <Button Height="Auto" Margin="0 0 10 0" FontSize="12" Command="{Binding ResetHardwareConfigurationCommand}" ToolTip="Reset all visual elements to the hardware configuration defined for the current machine">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Margin="0 0 2 0" Width="24" Height="24" Kind="Refresh"/>
                            <TextBlock VerticalAlignment="Center">RESET</TextBlock>
                        </StackPanel>
                    </Button>
                    <Button Height="Auto" Margin="0 0 10 0" FontSize="12" Command="{Binding SyncHardwareConfigurationCommand}" IsEnabled="{Binding ApplicationManager.IsMachineConnected}" ToolTip="Sync all visual elements to the current hardware configuration stored on the machine (last uploaded)">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Margin="0 0 0 0" Width="24" Height="24" Kind="ArrowDownBold"/>
                            <TextBlock VerticalAlignment="Center">SYNC HW CONFIG</TextBlock>
                        </StackPanel>
                    </Button>
                    <Button Height="Auto" FontSize="12" Command="{Binding UploadHardwareConfigurationCommand}" IsEnabled="{Binding ApplicationManager.IsMachineConnected}" ToolTip="Create a hardware configuration from the visual elements and upload that configuration">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock VerticalAlignment="Center">UPLOAD HW CONFIG</TextBlock>
                            <materialDesign:PackIcon Margin="10 0 0 0" Width="24" Height="24" Kind="ArrowRightBold"/>
                        </StackPanel>
                    </Button>
                </StackPanel>

                <Grid Grid.Row="1">
                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="20 0 0 0">
                        <ListBox ItemContainerStyle="{StaticResource basicListBoxItem}" ItemsSource="{Binding AvailableTechItems}" SelectedItem="{Binding SelectedTechItem,Mode=TwoWay}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"></StackPanel>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate DataType="{x:Type techItems:TechItem}">
                                    <Border Cursor="Hand" ToolTip="{Binding Description}" RenderTransformOrigin="0.5,0.5" Width="52" Height="52" Padding="10" Margin="5" BorderThickness="1" CornerRadius="100">
                                        <Border.Style>
                                            <Style TargetType="Border">
                                                <Setter Property="RenderTransform">
                                                    <Setter.Value>
                                                        <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="Background" Value="Transparent"></Setter>
                                                <Setter Property="BorderBrush" Value="{StaticResource AccentColorBrush}"></Setter>
                                                <Setter Property="BorderThickness" Value="1"></Setter>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" Value="True">
                                                        <Setter Property="Background" Value="{StaticResource WhiteBackgroundBrush}"></Setter>
                                                        <Setter Property="BorderBrush" Value="{StaticResource RedBrush300}"></Setter>
                                                        <Setter Property="BorderThickness" Value="2"></Setter>
                                                        <DataTrigger.EnterActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.1" Duration="00:00:0.2"></DoubleAnimation>
                                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.1" Duration="00:00:0.2"></DoubleAnimation>
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </DataTrigger.EnterActions>
                                                        <DataTrigger.ExitActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="00:00:0.2"></DoubleAnimation>
                                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="00:00:0.2"></DoubleAnimation>
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </DataTrigger.ExitActions>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Border.Style>
                                        <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant"></Image>
                                    </Border>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>

                    <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0 0 335 10" VerticalAlignment="Bottom">
                        <ListBox x:Name="listMode" SelectedIndex="0" Style="{StaticResource MaterialDesignToolToggleListBox}">
                            <ListBoxItem Height="40" Width="60" HorizontalContentAlignment="Center" ToolTip="Edit Mode">
                                <materialDesign:PackIcon HorizontalAlignment="Center" Width="30" Height="30"  Kind="Pencil" />
                            </ListBoxItem>
                            <ListBoxItem Height="40" Width="60" HorizontalContentAlignment="Center" ToolTip="Action Mode" MouseUp="OnActionModeClicked">
                                <materialDesign:PackIcon HorizontalAlignment="Center" Width="30" Height="30"  Kind="HandPointingRight" />
                            </ListBoxItem>
                        </ListBox>
                    </StackPanel>
                </Grid>
            </Grid>

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

                <StackPanel Orientation="Horizontal" Margin="35 0 0 0">
                    <ListBox Style="{x:Null}" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ItemContainerStyle="{StaticResource basicListBoxItem}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="Transparent" BorderThickness="0" ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal"></StackPanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border Padding="5 5" Width="160" CornerRadius="10 10 0 0" Margin="1 0" Tag="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext}">
                                    <Border.ContextMenu>
                                        <ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                                            <MenuItem Header="Rename" Command="{Binding RenameTabCommand}" MinWidth="210">
                                                <MenuItem.Icon>
                                                    <fa:ImageAwesome Icon="Pencil" Width="16" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                        </ContextMenu>
                                    </Border.ContextMenu>
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Setter Property="Background" Value="{StaticResource LightGrayBrush150}"></Setter>
                                            <Setter Property="TextElement.Foreground" Value="{StaticResource DarkGrayBrush}"></Setter>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource AccentColorBrush}"></Setter>
                                                    <Setter Property="TextElement.Foreground" Value="{StaticResource WhiteTextBrush}"></Setter>
                                                </DataTrigger>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="Opacity" Value="0.8"></Setter>
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <DockPanel VerticalAlignment="Center">
                                        <Button Cursor="Hand" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.RemoveTabCommand}" CommandParameter="{Binding}" DockPanel.Dock="Right" Margin="5 0 0 0" Style="{StaticResource MaterialDesignFlatButton}" Padding="2" Height="Auto">
                                            <materialDesign:PackIcon Kind="Close">
                                                <materialDesign:PackIcon.Style>
                                                    <Style TargetType="materialDesign:PackIcon">
                                                        <Setter Property="Foreground" Value="{StaticResource DarkGrayBrush}"></Setter>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                                                <Setter Property="Foreground" Value="{StaticResource WhiteTextBrush}"></Setter>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </materialDesign:PackIcon.Style>
                                            </materialDesign:PackIcon>
                                        </Button>
                                        <TextBlock Text="{Binding Name}" VerticalAlignment="Center" TextAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="11"></TextBlock>
                                    </DockPanel>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                    <Button Margin="10 0 0 0" Style="{StaticResource MaterialDesignFlatButton}" Padding="2" Height="24" Cursor="Hand" Command="{Binding AddTabCommand}" ToolTip="New tab">
                        <materialDesign:PackIcon Width="20" Height="20" Kind="Plus" Foreground="{StaticResource AccentColorBrush}" />
                    </Button>
                </StackPanel>

                <Grid Margin="5 0 5 5" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="300"/>
                    </Grid.ColumnDefinitions>

                    <ItemsControl ItemsSource="{Binding Tabs}" ItemTemplate="{StaticResource TabTemplate}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Grid/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>

                    <Grid Grid.Column="1">
                        <DockPanel>
                            <TextBlock DockPanel.Dock="Top" Margin="0 -30 0 0" Text="{Binding SelectedTab.Editor.SelectedElement.HostedElement.TechName}" FontSize="16" FontWeight="Bold" FontStyle="Italic"></TextBlock>

                            <ScrollViewer VerticalScrollBarVisibility="Auto">
                                <StackPanel>
                                    <GroupBox DockPanel.Dock="Top" Header="BOUNDS" Padding="5">
                                        <StackPanel>
                                            <!--Position-->
                                            <UniformGrid Columns="2" Margin="0 5 0 0">
                                                <StackPanel Margin="0 0 5 0">
                                                    <TextBlock>Left</TextBlock>
                                                    <mahapps:NumericUpDown HasDecimals="False" HorizontalContentAlignment="Center" BorderBrush="{StaticResource BorderBrushGainsboro}" Foreground="{StaticResource GrayBrush}" Margin="0 5 0 0" Minimum="0" Maximum="{Binding SelectedTab.Editor.EditorWidth}" Value="{Binding SelectedTab.Editor.SelectedElement.Left}"></mahapps:NumericUpDown>
                                                </StackPanel>
                                                <StackPanel Margin="5 0 0 0">
                                                    <TextBlock>Top</TextBlock>
                                                    <mahapps:NumericUpDown HasDecimals="False" HorizontalContentAlignment="Center" BorderBrush="{StaticResource BorderBrushGainsboro}" Foreground="{StaticResource GrayBrush}" Margin="0 5 0 0" Minimum="0" Maximum="{Binding SelectedTab.Editor.EditorHeight}" Value="{Binding SelectedTab.Editor.SelectedElement.Top}"></mahapps:NumericUpDown>
                                                </StackPanel>
                                            </UniformGrid>

                                            <!--Size-->
                                            <UniformGrid Columns="2" Margin="0 20 0 0">
                                                <StackPanel Margin="0 0 5 0">
                                                    <TextBlock>Width</TextBlock>
                                                    <mahapps:NumericUpDown HasDecimals="False" HorizontalContentAlignment="Center" BorderBrush="{StaticResource BorderBrushGainsboro}" Foreground="{StaticResource GrayBrush}" Margin="0 5 0 0" Minimum="10" Maximum="{Binding SelectedTab.Editor.EditorWidth}" Value="{Binding SelectedTab.Editor.SelectedElement.Width}"></mahapps:NumericUpDown>
                                                </StackPanel>
                                                <StackPanel Margin="5 0 0 0">
                                                    <TextBlock>Height</TextBlock>
                                                    <mahapps:NumericUpDown HasDecimals="False" HorizontalContentAlignment="Center" BorderBrush="{StaticResource BorderBrushGainsboro}" Foreground="{StaticResource GrayBrush}" Margin="0 5 0 0" Minimum="10" Maximum="{Binding SelectedTab.Editor.EditorHeight}" Value="{Binding SelectedTab.Editor.SelectedElement.Height}"></mahapps:NumericUpDown>
                                                </StackPanel>
                                            </UniformGrid>

                                            <!--<Angle-->
                                            <Grid Margin="0 20 0 0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="22*"></ColumnDefinition>
                                                    <ColumnDefinition Width="20*"></ColumnDefinition>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock VerticalAlignment="Center" Margin="0 0 10 0" HorizontalAlignment="Left">Angle</TextBlock>
                                                <mahapps:NumericUpDown Grid.Column="1" HorizontalContentAlignment="Center" BorderBrush="{StaticResource BorderBrushGainsboro}" Foreground="{StaticResource GrayBrush}" Maximum="360" Minimum="-360" HasDecimals="False" Margin="0 5 0 0" Value="{Binding SelectedTab.Editor.SelectedElement.Angle}"></mahapps:NumericUpDown>
                                            </Grid>
                                        </StackPanel>
                                    </GroupBox>
                                    <ContentControl Margin="0 10 0 0" DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.SelectedTab.Editor.SelectedElement.HostedElement}" Content="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.SelectedTab.Editor.SelectedElement.HostedElement}">
                                        <ContentControl.Resources>
                                            <DataTemplate DataType="{x:Type sys:Nullable}">

                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:ValveItem}">
                                                <templates:ValveTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MonitorRecorderItem}">
                                                <templates:MonitorRecorderTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:HeaterItem}">
                                                <templates:HeaterTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:TextItem}">
                                                <templates:TextTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:JobRunnerItem}">
                                                <templates:JobRunnerTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:ProcessParametersItem}">
                                                <templates:ProcessParametersTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:BreakSensorItem}">
                                                <templates:BreakSensorTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:BlowerItem}">
                                                <templates:BlowerTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:SpeedSensorItem}">
                                                <templates:SpeedSensorTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:DancerItem}">
                                                <templates:DancerTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:WinderItem}">
                                                <templates:WinderTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:PidItem}">
                                                <templates:PidTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:ControllerItem}">
                                                <templates:ControllerTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MonitorItem}">
                                                <templates:MonitorTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:DigitalInItem}">
                                                <templates:DigitalInTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MotorGroupItem}">
                                                <templates:MotorGroupTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:ThreadMotionItem}">
                                                <templates:ThreadMotionTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:DigitalOutItem}">
                                                <templates:DigitalOutTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:DispenserItem}">
                                                <templates:DispenserTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MotorItem}">
                                                <templates:MotorTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MeterItem}">
                                                <templates:MeterTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:SingleGraphItem}">
                                                <templates:SingleGraphTemplate/>
                                            </DataTemplate>
                                            <DataTemplate DataType="{x:Type items:MultiGraphItem}">
                                                <templates:MultiGraphTemplate/>
                                            </DataTemplate>
                                        </ContentControl.Resources>
                                    </ContentControl>
                                </StackPanel>
                            </ScrollViewer>
                        </DockPanel>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</UserControl>