<Controls:MetroWindow x:Class="FancyZonesEditor.MainWindow"
        x:Name="MainWindow1"
        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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:local="clr-namespace:FancyZonesEditor"
        xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
        xmlns:props="clr-namespace:FancyZonesEditor.Properties"
        mc:Ignorable="d"
        Title=""
        Width="810"
        SizeToContent="Height"
        Background="White"
        ResizeMode="NoResize"
        WindowStartupLocation="CenterScreen"
        Initialized="OnInitialized"
        Closing="OnClosing">
    <Window.Resources>
        <Converters:BooleanToBrushConverter x:Key="BooleanToBrushConverter" />
        <Converters:ModelToVisibilityConverter x:Key="ModelToVisibilityConverter" />
        <Converters:BooleanToIntConverter x:Key="BooleanToIntConverter" />

        <Style x:Key="titleText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="LineHeight" Value="24" />
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Margin" Value="16,20,0,0" />
        </Style>
        <Style x:Key="zoneCount" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="Regular" />
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="LineHeight" Value="24" />
            <Setter Property="Margin" Value="20,0,20,0" />
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style x:Key="tabText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="#C4C4C4"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="LineHeight" Value="20" />
            <Setter Property="Margin" Value="24,20,0,0" />
            <Setter Property="TextAlignment" Value="Center" />
        </Style>
        <Style x:Key="settingText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="LineHeight" Value="20" />
            <Setter Property="Margin" Value="40,10,0,0" />
            <Setter Property="TextAlignment" Value="Left" />
        </Style>
        <Style x:Key="settingCheckBoxText" TargetType="CheckBox">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Margin" Value="5,10,0,0" />
        </Style>
        <Style x:Key="templateTitleText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style x:Key="secondaryButton" TargetType="Button">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="0,5,0,5"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="#F2F2F2"/>
            <Setter Property="Margin" Value="16,0,0,0" />
            <Setter Property="Width" Value="378"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#BCBCBD"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="primaryButton" TargetType="Button">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="0,5,0,5"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="#0078D7"/>
            <Setter Property="Margin" Value="16,0,16,0" />
            <Setter Property="Width" Value="377"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#024D89"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="spinnerButton" TargetType="Button">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="Padding" Value="0,0,0,5"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="#F2F2F2"/>
            <Setter Property="Margin" Value="0,0,0,0" />
        </Style>
        <Style x:Key="newLayoutButton" TargetType="Button">
            <Setter Property="Background" Value="#f2f2f2"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="FontFamily" Value="SegoeUI"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="FontSize" Value="148"/>
        </Style>
        <Style x:Key="textBox" TargetType="TextBox">
            <Setter Property="BorderBrush" Value="#cccccc"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontFamily" Value="SegoeUI"/>
            <Setter Property="FontWeight" Value="Regular"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="16,6,0,0"/>
            <Setter Property="Padding" Value="5,5,5,5"/>
        </Style>
        
        <Style x:Key="templateBackground" TargetType="Border">
            <Setter Property="Background" Value="#F2F2F2"/>
            <Setter Property="CornerRadius" Value="4"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Style>

        <ControlTemplate x:Key="myTabs">
            <Grid Width="404">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="2"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Name="myTabText" Text="{TemplateBinding TabItem.Header}" Style="{StaticResource tabText}"  />
                <Rectangle Grid.Row="1" x:Name="myTabLine" Fill="#F2F2F2" Height="1"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TabItem.IsSelected" Value="True">
                    <Setter TargetName="myTabText" Property="Foreground" Value="#2A79D7"/>
                    <Setter TargetName="myTabLine" Property="Fill" Value="#2A79D7" />
                    <Setter TargetName="myTabLine" Property="Height" Value="2"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    
    <StackPanel>

        <TextBlock Name="dialog_Title" Text="{x:Static props:Resources.Choose_Layout}" Style="{StaticResource titleText}"  />

        <TabControl BorderThickness="0" x:Name="TemplateTab" SelectedIndex="{Binding IsCustomLayoutActive, Mode=OneWay, Converter={StaticResource BooleanToIntConverter}}">
            <TabItem Header="{x:Static props:Resources.Templates}" Template="{StaticResource myTabs}">
                <StackPanel>
                    <StackPanel Margin="0,15,0,8" Orientation="Horizontal" HorizontalAlignment="Center">
                        <Button x:Name="decrementZones" Width="40" Height="40" Content="-" Style="{StaticResource spinnerButton}" Click="DecrementZones_Click"/>
                        <TextBlock x:Name="zoneCount" Text="{Binding ZoneCount}" Style="{StaticResource zoneCount}"/>
                        <Button x:Name="incrementZones" Width="40" Height="40" Content="+" Style="{StaticResource spinnerButton}" Click="IncrementZones_Click"/>
                    </StackPanel>
                    <ItemsControl ItemsSource="{Binding DefaultModels}" Margin="8,0,0,0">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" ItemWidth="{Binding ElementName=MainWindow1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, Path=WrapPanelItemSize}" ItemHeight="{Binding ElementName=WrapPanel1, Path=ItemWidth}" x:Name="WrapPanel1" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Margin="8" 
                                        BorderBrush="{Binding Path=IsSelected, Converter={StaticResource BooleanToBrushConverter}}"
                                        Style="{StaticResource templateBackground}" 
                                        MouseDown="LayoutItem_Click">
                                    <DockPanel Margin="0,20,0,0" 
                                               VerticalAlignment="Stretch" 
                                               HorizontalAlignment="Stretch" 
                                               LastChildFill="True">
                                        <TextBlock Padding="8,0,8,0" 
                                                   TextTrimming="CharacterEllipsis" 
                                                   DockPanel.Dock="Top" 
                                                   Text="{Binding Name}" 
                                                   Style="{StaticResource templateTitleText}" />
                                        <local:LayoutPreview Margin="16" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                    </DockPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <StackPanel Orientation="Horizontal" Margin="10,4,0,8">
                        <CheckBox x:Name="spaceAroundSetting" Content="Show space around zones" Style="{StaticResource settingCheckBoxText}" IsChecked="{Binding ShowSpacing}"/>
                        <TextBlock Text="Space around zones" Style="{StaticResource settingText}"/>
                        <TextBox x:Name="paddingValue" Text="{Binding Path=Spacing,Mode=TwoWay}" Style="{StaticResource textBox}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        

                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,12,0,16">
                        <Button x:Name="EditTemplateButton" Padding="8" Content="Edit selected layout" Style="{StaticResource secondaryButton}" Click="EditLayout_Click"/>
                        <Button x:Name="ApplyTemplateButton" Padding="8" Content="Apply" Style="{StaticResource primaryButton}" Click="Apply_Click"/>
                    </StackPanel>
                </StackPanel>
            </TabItem>
            
            
            <TabItem Header="{x:Static props:Resources.Custom}" Template="{StaticResource myTabs}">
                <StackPanel>
                    <ItemsControl ItemsSource="{Binding CustomModels}" Margin="8,8,0,0">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" ItemWidth="{Binding ElementName=MainWindow1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, Path=WrapPanelItemSize}" ItemHeight="{Binding ElementName=WrapPanel2, Path=ItemWidth}" x:Name="WrapPanel2" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Margin="8"
                                        BorderBrush="{Binding Path=IsSelected, Converter={StaticResource BooleanToBrushConverter}}" 
                                        Style="{StaticResource templateBackground}" 
                                        MouseDown="LayoutItem_Click">
                                    <DockPanel Margin="0,20,0,0" 
                                               VerticalAlignment="Stretch" 
                                               HorizontalAlignment="Stretch" 
                                               LastChildFill="True">
                                        <DockPanel DockPanel.Dock="Top" LastChildFill="True" >
                                            <Button x:Name="DeleteButton" Visibility="{Binding Converter={StaticResource ModelToVisibilityConverter}}" DockPanel.Dock="Right" MaxHeight="10" Click="OnDelete" Padding="8,4,8,4" Margin="0,0,8,0" BorderThickness="0" Background="#f2f2f2">
                                                <Image Source="images/Delete.png" />
                                            </Button>
                                            <TextBlock DockPanel.Dock="Top" 
                                                       TextTrimming="CharacterEllipsis" Padding="8,0,8,0"
                                                       Text="{Binding Name}" 
                                                       Style="{StaticResource templateTitleText}" />
                                        </DockPanel>
                                        <local:LayoutPreview Margin="16" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                    </DockPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <StackPanel Orientation="Horizontal" Margin="0,10,0,16">
                        <Button x:Name="EditCustomButton" Content="{x:Static props:Resources.Edit_Selected_Layout}" Padding="8" Style="{StaticResource secondaryButton}" Click="EditLayout_Click"/>
                            <Button x:Name="ApplyCustomButton" Content="{x:Static props:Resources.Apply}" Padding="8" Style="{StaticResource primaryButton}" Click="Apply_Click"/>
                    </StackPanel>
                </StackPanel>
            </TabItem>
        </TabControl>
        


    </StackPanel>
</Controls:MetroWindow>
