pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
<UserControl x:Class="Tango.MachineStudio.UsersAndRoles.Views.UserManagementView"
             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:global="clr-namespace:Tango.MachineStudio.UsersAndRoles"
             xmlns:vm="clr-namespace:Tango.MachineStudio.UsersAndRoles.ViewModels"
             xmlns:providers="clr-namespace:Tango.MachineStudio.UsersAndRoles.Providers"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
             xmlns:autoComplete="clr-namespace:Tango.AutoComplete.Editors;assembly=Tango.AutoComplete"
             xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI"
             xmlns:mahApps="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:entities="clr-namespace:Tango.BL.Entities;assembly=Tango.BL"
             xmlns:local="clr-namespace:Tango.MachineStudio.UsersAndRoles.Views"
             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
              xmlns:localconverters="clr-namespace:Tango.MachineStudio.UsersAndRoles.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">

    <UserControl.Resources>
        <providers:PlacesProvider x:Key="PlacesProvider" />
        <converters:BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"></converters:BooleanToVisibilityConverter>
        <converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter"></converters:BooleanToVisibilityInverseConverter>
        <localconverters:RoleEnumToVisibleConverter x:Key="RoleEnumToVisibleConverter"/>
    </UserControl.Resources>
    
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="400"/>
            </Grid.ColumnDefinitions>

            <Grid Margin="10">
                <DockPanel Margin="100" MaxWidth="1200">
                    <Grid DockPanel.Dock="Top">
                        <Grid>
                            <StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <Button MinWidth="160" Height="50" Command="{Binding BackToManagedOrganizationCommand}" HorizontalAlignment="Left">
                                        <StackPanel Orientation="Horizontal">
                                            <materialDesign:PackIcon Kind="KeyboardBackspace" Width="20" Height="20" />
                                            <TextBlock Margin="5 0 0 0" FontSize="16">BACK</TextBlock>
                                        </StackPanel>
                                    </Button>
                                    <Image Source="../Images/user.png" Width="100" RenderOptions.BitmapScalingMode="Fant" Margin="130 0 0 0"></Image>
                                    <TextBlock Text="{Binding ManagedUser.Contact.FullName,FallbackValue='Roy Ben Shabat'}" VerticalAlignment="Center" FontSize="25" Margin="10 0 0 0"></TextBlock>
                                </StackPanel>

                                <StackPanel Orientation="Horizontal" Margin="0 20 0 0" HorizontalAlignment="Right">
                                    <StackPanel>
                                        <TextBlock FontSize="16" FontWeight="SemiBold">LOGIN</TextBlock>
                                        <Border Width="300" BorderThickness="1" BorderBrush="Gray" Margin="0 5 0 0" Padding="15 5" Height="150" Background="{StaticResource TransparentBackgroundBrush500}">
                                            <local:UserView VerticalAlignment="Top" Margin="0 15 0 0" FontSize="10" DataContext="{Binding ManagedUser}" />
                                        </Border>
                                    </StackPanel>
                                    <StackPanel Margin="10 0 0 0">
                                        <TextBlock FontSize="16" FontWeight="SemiBold">CONTACT</TextBlock>
                                        <Border Width="300" BorderThickness="1" BorderBrush="Gray" Margin="0 5 0 0" Padding="15 5" Height="250" Background="{StaticResource TransparentBackgroundBrush500}">
                                            <local:ContactView FontSize="10" DataContext="{Binding ManagedUser.Contact}" />
                                        </Border>
                                    </StackPanel>
                                    <StackPanel Margin="10 0 0 0">
                                        <TextBlock FontSize="16" FontWeight="SemiBold">ADDRESS</TextBlock>
                                        <Border Width="300" BorderThickness="1" BorderBrush="Gray" Margin="0 5 0 0" Padding="15 5" Height="300" Background="{StaticResource TransparentBackgroundBrush500}">
                                            <DockPanel>
                                                <DockPanel DockPanel.Dock="Top">
                                                    <materialDesign:PackIcon Kind="Magnify" DockPanel.Dock="Left" Width="24" Height="24" />
                                                    <autoComplete:AutoCompleteTextBox x:Name="address_auto" Margin="5 0 0 0" Delay="500" DisplayMember="DisplayName" SelectedItem="{Binding SelectedUserPlace,Mode=OneWayToSource}" Provider="{StaticResource PlacesProvider}" materialDesign:HintAssist.Hint="Find address" />
                                                </DockPanel>
                                                <local:AddressView FontSize="10" DataContext="{Binding ManagedUser.Address}" />
                                            </DockPanel>
                                        </Border>
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>
                    <Grid DockPanel.Dock="Bottom">
                        <Button Margin="0 10 0 0" MinWidth="200" Height="60" Command="{Binding SaveManagedUserCommand}" HorizontalAlignment="Right" Visibility="{Binding Path=ManagedUser.Deleted, Converter={StaticResource BooleanToVisibilityInverseConverter}}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontSize="18" VerticalAlignment="Center">SAVE</TextBlock>
                                <materialDesign:PackIcon Margin="5 0 0 0" Kind="ContentSave" Width="30" Height="30" />
                            </StackPanel>
                        </Button>
                        <Button Margin="0 10 0 0" MinWidth="200" Height="60" Background="{StaticResource OrangeBrush300}" BorderBrush="{StaticResource OrangeBrush300}" Command="{Binding RestoreAndSaveManagedUserCommand}" HorizontalAlignment="Right" Visibility="{Binding Path=ManagedUser.Deleted, Converter={StaticResource BoolToVisibilityConverter}}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontSize="18" VerticalAlignment="Center" Text="RESTORE &amp; SAVE"/>
                                <materialDesign:PackIcon Margin="5 0 0 0" Kind="ContentSave" Width="30" Height="30" />
                            </StackPanel>
                        </Button>
                    </Grid>
                    <Grid>
                        <DockPanel Margin="0 20 0 0">
                            <TextBlock DockPanel.Dock="Top" FontSize="16" FontWeight="SemiBold">ROLES</TextBlock>
                            <Grid Margin="0 5 0 0" Style="{StaticResource droppableGrid}" dragAndDrop:DragAndDropService.Drop="OnDropRole" Background="{StaticResource TransparentBackgroundBrush420}">
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Silver" FontSize="20">DRAG &amp; DROP ROLES</TextBlock>
                                <Border BorderBrush="{StaticResource borderBrush}" BorderThickness="1" Padding="10">
                                    <ListBox ItemsSource="{Binding ManagedUserRoles}" ItemContainerStyle="{StaticResource basicListBoxItem}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                        <ListBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapPanel Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </ListBox.ItemsPanel>
                                        <ListBox.ItemTemplate>
                                            <DataTemplate DataType="{x:Type entities:Role}">
                                                <Grid Visibility="{Binding RoleEnum, Converter={StaticResource RoleEnumToVisibleConverter}}">
                                                    <Grid.ToolTip>
                                                        <StackPanel Background="Transparent">
                                                            <TextBlock Text="{Binding Description}" FontSize="10" Margin="0 0 0 10"></TextBlock>
                                                            <ItemsControl ItemsSource="{Binding RolesPermissions}">
                                                                <ItemsControl.ItemTemplate>
                                                                    <DataTemplate>
                                                                        <Grid>
                                                                            <StackPanel Orientation="Horizontal">
                                                                                <materialDesign:PackIcon Kind="Security" Width="12" />
                                                                                <TextBlock Margin="5 0 0 0" FontSize="10" Text="{Binding Permission.Name}"></TextBlock>
                                                                            </StackPanel>
                                                                        </Grid>
                                                                    </DataTemplate>
                                                                </ItemsControl.ItemTemplate>
                                                            </ItemsControl>
                                                        </StackPanel>
                                                    </Grid.ToolTip>
                                                    <Border Margin="5" CornerRadius="5" Width="100" Height="100" BorderThickness="1" Padding="2" Background="{StaticResource UserRoles.Background}">
                                                        <Border.Style>
                                                            <Style TargetType="Border">
                                                                <Setter Property="BorderBrush" Value="{StaticResource borderBrush}"></Setter>
                                                                <Style.Triggers>
                                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" Value="True">
                                                                        <Setter Property="BorderBrush" Value="{StaticResource AccentColorBrush}"></Setter>
                                                                    </DataTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </Border.Style>
                                                        <Grid>
                                                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                                                <Image Source="../Images/roles.png" Width="32" RenderOptions.BitmapScalingMode="Fant"></Image>
                                                                <TextBlock Text="{Binding Name}" TextWrapping="Wrap" HorizontalAlignment="Center" TextAlignment="Center" FontSize="13" Margin="5"></TextBlock>
                                                            </StackPanel>
                                                        </Grid>
                                                    </Border>

                                                    <Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Cursor="Hand" ToolTip="Remove Role" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.RemoveRoleCommand}" CommandParameter="{Binding}">
                                                        <Button.Style>
                                                            <Style TargetType="Button" BasedOn="{StaticResource emptyButton}">
                                                                <Setter Property="Visibility" Value="Hidden"></Setter>
                                                                <Style.Triggers>
                                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},Path=IsMouseOver}" Value="True">
                                                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                                                    </DataTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </Button.Style>
                                                        <materialDesign:PackIcon Kind="Delete" Foreground="{StaticResource RedBrush100}" Width="16" Height="16" />
                                                    </Button>
                                                </Grid>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                </Border>
                            </Grid>
                        </DockPanel>
                    </Grid>
                </DockPanel>
            </Grid>

            <Grid Grid.Column="1" Background="{StaticResource WhiteBackgroundBrush}">
                <DockPanel Margin="10">
                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
                        <Image Source="../Images/roles.png" Width="70" RenderOptions.BitmapScalingMode="Fant"></Image>
                        <TextBlock FontSize="16" FontWeight="SemiBold" VerticalAlignment="Center" Margin="10 0 0 0">AVAILABLE ROLES</TextBlock>
                    </StackPanel>

                    <Grid>
                        <ListBox ItemsSource="{Binding Roles}" ItemContainerStyle="{StaticResource basicListBoxItem}" HorizontalContentAlignment="Stretch" Background="Transparent">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="Transparent" IsHitTestVisible="True" Style="{StaticResource draggableGrid}" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}" Visibility="{Binding RoleEnum, Converter={StaticResource RoleEnumToVisibleConverter}}">
                                        <Grid.ToolTip>
                                            <StackPanel Background="Transparent">
                                                <TextBlock Text="{Binding Description}" FontSize="10" Margin="0 0 0 10"></TextBlock>
                                                <ItemsControl ItemsSource="{Binding RolesPermissions}">
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal"
                                                                        Background="Transparent">
                                                                <materialDesign:PackIcon Kind="Security" Width="12" />
                                                                <TextBlock Margin="5 0 0 0"
                                                                           FontSize="10"
                                                                           Text="{Binding Permission.Name}"
                                                                           ></TextBlock>
                                                            </StackPanel>
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </StackPanel>
                                        </Grid.ToolTip>
                                        <DockPanel>
                                            <Border DockPanel.Dock="Left" Width="100" Height="100" IsHitTestVisible="False" BorderBrush="{StaticResource borderBrush}" BorderThickness="1" CornerRadius="5" Margin="5" Padding="2" Background="{StaticResource UserRoles.Background}">
                                                <Grid>
                                                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                                        <Image Source="../Images/roles.png" Width="32" RenderOptions.BitmapScalingMode="Fant"></Image>
                                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" HorizontalAlignment="Center" TextAlignment="Center" FontSize="13" Margin="5"></TextBlock>
                                                    </StackPanel>
                                                </Grid>
                                            </Border>

                                            <Grid MaxHeight="85"
                                                  HorizontalAlignment="Left"
                                                  Margin="20 0 0 0"
                                                  Width="200">
                                                <ItemsControl ItemsSource="{Binding RolesPermissions}" Foreground="{StaticResource MainWindow.Foreground}">
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal">
                                                                <materialDesign:PackIcon Kind="Security" Width="12" />
                                                                <TextBlock Margin="5 0 0 0" FontSize="10" TextTrimming="CharacterEllipsis" MaxWidth="150" Text="{Binding Permission.Name}"></TextBlock>
                                                            </StackPanel>
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>

                                                <Grid Background="{StaticResource UserRoles.GridBackground}">
                                                </Grid>
                                            </Grid>
                                        </DockPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </DockPanel>

                <Rectangle HorizontalAlignment="Left" Stroke="#BBBBBB" StrokeThickness="1"></Rectangle>
            </Grid>
        </Grid>

        <dragAndDrop:DraggingSurface x:Name="dragSurface" />
    </Grid>
</UserControl>