<mde:MaterialWindow x:Class="Artemis.UI.Screens.Settings.Device.DeviceDialogView"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                    xmlns:s="https://github.com/canton7/Stylet"
                    xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
                    xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
                    xmlns:device="clr-namespace:Artemis.UI.Screens.Settings.Device"
                    xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
                    mc:Ignorable="d"
                    Title="{Binding DisplayName}"
                    TitleBarIcon="{svgc:SvgImage Source=/Resources/Images/Logo/bow-white.svg}"
                    Foreground="{DynamicResource MaterialDesignBody}"
                    Background="{DynamicResource MaterialDesignPaper}"
                    FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
                    UseLayoutRounding="True"
                    FadeContentIfInactive="False"
                    Width="1400"
                    Height="800"
                    d:DesignHeight="800" d:DesignWidth="800"
                    d:DataContext="{d:DesignInstance device:DeviceDialogViewModel}"
                    Icon="/Resources/Images/Logo/bow.ico">
    <mde:MaterialWindow.Resources>
        <shared:NullToVisibilityConverter x:Key="NullToVisibilityConverter"/>
    </mde:MaterialWindow.Resources>
    <mde:MaterialWindow.InputBindings>
        <KeyBinding Command="{s:Action ClearSelection}" Key="Escape" />
    </mde:MaterialWindow.InputBindings>

    <materialDesign:DialogHost IsTabStop="False"
                               Focusable="False"
                               Identifier="DeviceDialog"
                               DialogTheme="Inherit"
                               SnackbarMessageQueue="{Binding DeviceMessageQueue}">
        <DockPanel>
            <mde:AppBar Type="Dense"
                        Title="{Binding Device.RgbDevice.DeviceInfo.Model}"
                        ShowShadow="True"
                        DockPanel.Dock="Top"
                        Margin="-18 0 0 0">
                <mde:AppBar.AppIcon>
                    <materialDesign:PackIcon Kind="HammerWrench" Width="20" Height="28" />
                </mde:AppBar.AppIcon>

                <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Identify" Command="{s:Action IdentifyDevice}">
                        <materialDesign:PackIcon Kind="AlarmLight" />
                    </Button>
                    <materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
                        <StackPanel>
                            <Button Command="{s:Action OpenPluginDirectory}">
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Kind="Plugin" Margin="0 0 10 0 " VerticalAlignment="Center" />
                                    <TextBlock VerticalAlignment="Center">Open plugin directory</TextBlock>
                                </StackPanel>
                            </Button>
                            <Button Command="{s:Action OpenImageDirectory}">
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Kind="Image" Margin="0 0 10 0 " VerticalAlignment="Center" />
                                    <TextBlock VerticalAlignment="Center">Open layout image directory</TextBlock>
                                </StackPanel>
                            </Button>
                            <Separator />
                            <Button Command="{s:Action ReloadLayout}">
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Kind="Reload" Margin="0 0 10 0 " VerticalAlignment="Center" />
                                    <TextBlock VerticalAlignment="Center">Reload layout</TextBlock>
                                </StackPanel>
                            </Button>
                            <Button Command="{s:Action ExportLayout}">
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Kind="Xml" Margin="0 0 10 0 " VerticalAlignment="Center" />
                                    <TextBlock VerticalAlignment="Center">Export layout</TextBlock>
                                </StackPanel>
                            </Button>
                        </StackPanel>
                    </materialDesign:PopupBox>
                </StackPanel>
            </mde:AppBar>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="0" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid Name="DeviceDisplayGrid" Grid.Column="0">
                    <Grid.Background>
                        <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="0 0 25 25" ViewportUnits="Absolute">
                            <VisualBrush.Visual>
                                <Grid Width="20" Height="20">
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Black" Opacity="0.15" />
                                    <Rectangle Grid.Row="0" Grid.Column="1" />
                                    <Rectangle Grid.Row="1" Grid.Column="0" />
                                    <Rectangle Grid.Row="1" Grid.Column="1" Fill="Black" Opacity="0.15" />
                                </Grid>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Grid.Background>

                    <!-- No need to provide LEDs to highlight as LEDs are already physically highlighted -->
                    <shared:DeviceVisualizer Device="{Binding Device}"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
                                             ShowColors="True"
                                             LedClicked="{s:Action OnLedClicked}"
                                             Margin="20"/>

                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" 
                               Visibility="{Binding Device.Layout.RgbLayout.Author, Converter={StaticResource NullToVisibilityConverter}}"
                               VerticalAlignment="Bottom" 
                               HorizontalAlignment="Left" 
                               Margin="15">
                        Device layout by <Run FontWeight="Bold" Text="{Binding Device.Layout.RgbLayout.Author}"/>
                    </TextBlock>
                </Grid>

                <GridSplitter Grid.Column="1" Width="15" Margin="-15 0 0 0" Background="Transparent" HorizontalAlignment="Stretch" Panel.ZIndex="3" />

                <materialDesign:Card Grid.Column="2"
                                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
                                     Background="{DynamicResource MaterialDesignPaper}">
                    <Grid>
                        <TabControl
                            Style="{StaticResource MaterialDesignTabControl}"
                            ItemsSource="{Binding Items}"
                            SelectedItem="{Binding ActiveItem}"
                            DisplayMemberPath="DisplayName">
                            <TabControl.ContentTemplate>
                                <DataTemplate>
                                    <ContentControl s:View.Model="{Binding IsAsync=True}"
                                                    VerticalContentAlignment="Stretch"
                                                    HorizontalContentAlignment="Stretch"
                                                    IsTabStop="False"
                                                    TextElement.Foreground="{DynamicResource MaterialDesignBody}" />
                                </DataTemplate>
                            </TabControl.ContentTemplate>
                        </TabControl>
                        <materialDesign:Snackbar x:Name="DeviceSnackbar"
                                                 MessageQueue="{Binding DeviceMessageQueue}"
                                                 materialDesign:SnackbarMessage.InlineActionButtonMaxHeight="80"
                                                 materialDesign:SnackbarMessage.ContentMaxHeight="200" />
                    </Grid>
             
                </materialDesign:Card>
            </Grid>
        </DockPanel>
    </materialDesign:DialogHost>
</mde:MaterialWindow>