<!--
    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
    the MIT License. See LICENSE in the project root for license information.
-->
<Page x:Class="Microsoft.Terminal.Settings.Editor.EditColorScheme"
      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:local="using:Microsoft.Terminal.Settings.Editor"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:model="using:Microsoft.Terminal.Settings.Model"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="GroupHeaderStyle"
                   BasedOn="{StaticResource SubtitleTextBlockStyle}"
                   TargetType="TextBlock">
                <Setter Property="Margin" Value="0,0,0,4" />
            </Style>

            <Style x:Key="ColorLabelStyle"
                   TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

            <Style x:Key="ColorTableGridStyle"
                   TargetType="Grid">
                <Setter Property="RowSpacing" Value="10" />
                <Setter Property="ColumnSpacing" Value="10" />
            </Style>

            <Style x:Key="ColorControlStyle"
                   TargetType="ContentControl">
                <Setter Property="IsTabStop" Value="False" />
            </Style>

            <Style x:Key="ColorSchemesColorButtonStyle"
                   BasedOn="{StaticResource ColorButtonStyle}"
                   TargetType="Button" />

            <Style TargetType="ColorPicker">
                <Setter Property="IsColorSliderVisible" Value="False" />
                <Setter Property="IsColorChannelTextInputVisible" Value="False" />
                <Setter Property="IsHexInputVisible" Value="True" />
                <Setter Property="IsAlphaSliderVisible" Value="True" />
                <Setter Property="IsAlphaTextInputVisible" Value="True" />
            </Style>

            <DataTemplate x:Key="ColorTableEntryTemplate"
                          x:DataType="local:ColorTableEntry">
                <Button AutomationProperties.Name="{x:Bind AccessibleName, Mode=OneWay}"
                        Background="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
                        Style="{StaticResource ColorSchemesColorButtonStyle}"
                        ToolTipService.ToolTip="{x:Bind AccessibleName, Mode=OneWay}">
                    <Button.Flyout>
                        <Flyout>
                            <muxc:ColorPicker ColorChanged="ColorPickerChanged"
                                              Tag="{x:Bind Tag, Mode=OneWay}"
                                              Color="{x:Bind Color, Mode=OneWay}" />
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </DataTemplate>

            <DataTemplate x:Key="ColorTableTextBlockTemplate"
                          x:DataType="local:ColorTableEntry">
                <TextBlock AutomationProperties.Name="{x:Bind Name}"
                           FontFamily="Cascadia Code"
                           FontSize="14"
                           Foreground="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
                           Text="{x:Bind Name}"
                           ToolTipService.ToolTip="{x:Bind Name}" />
            </DataTemplate>

        </ResourceDictionary>
    </Page.Resources>

    <ScrollViewer ViewChanging="ViewChanging">
        <StackPanel Style="{StaticResource SettingsStackStyle}">
            <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
                <!--  Preview of the selected scheme  -->
                <Grid Width="350"
                      Height="160"
                      MaxWidth="{StaticResource StandardControlMaxWidth}"
                      Margin="4"
                      HorizontalAlignment="Left"
                      Background="{x:Bind local:Converters.ColorToBrush(ViewModel.BackgroundColor.Color), Mode=OneWay}"
                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                      BorderThickness="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ContentControl Grid.Row="0"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ForegroundColor, Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="1"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(0), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="2"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(1), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="3"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(2), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="4"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(3), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="5"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(4), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="6"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(5), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="7"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(6), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="8"
                                    Grid.Column="0"
                                    Content="{x:Bind ViewModel.ColorEntryAt(7), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="1"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(8), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="2"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(9), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="3"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(10), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="4"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(11), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="5"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(12), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="6"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(13), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="7"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(14), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />
                    <ContentControl Grid.Row="8"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(15), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                    IsTabStop="False" />

                </Grid>
            </Border>

            <local:SettingContainer x:Uid="ColorScheme_ColorsHeader"
                                    StartExpanded="True"
                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                <Grid x:Name="ColorTableGrid"
                      Style="{StaticResource ColorTableGridStyle}"
                      XYFocusKeyboardNavigation="Enabled">
                    <Grid.ColumnDefinitions>
                        <!--  Labels  -->
                        <ColumnDefinition Width="Auto" />

                        <!--  Regular Colors  -->
                        <ColumnDefinition Width="Auto" />

                        <!--  Bright Colors  -->
                        <ColumnDefinition Width="Auto" />

                        <ColumnDefinition Width="50" />

                        <!--  Labels  -->
                        <ColumnDefinition Width="Auto" />

                        <!--  Regular Colors  -->
                        <ColumnDefinition Width="Auto" />

                        <!--  Bright Colors  -->
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock x:Uid="ColorScheme_Black"
                               Grid.Row="0"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightBlack"
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(0), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Red"
                               Grid.Row="1"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightRed"
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(1), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Green"
                               Grid.Row="2"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightGreen"
                                    Grid.Row="2"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(2), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Yellow"
                               Grid.Row="3"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightYellow"
                                    Grid.Row="3"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(3), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Blue"
                               Grid.Row="4"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightBlue"
                                    Grid.Row="4"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(4), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Purple"
                               Grid.Row="5"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightPurple"
                                    Grid.Row="5"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(5), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_Cyan"
                               Grid.Row="6"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightCyan"
                                    Grid.Row="6"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(6), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <TextBlock x:Uid="ColorScheme_White"
                               Grid.Row="7"
                               Grid.Column="0"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="NonBrightWhite"
                                    Grid.Row="7"
                                    Grid.Column="1"
                                    Content="{x:Bind ViewModel.ColorEntryAt(7), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightBlack"
                                    Grid.Row="0"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(8), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightRed"
                                    Grid.Row="1"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(9), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightGreen"
                                    Grid.Row="2"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(10), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightYellow"
                                    Grid.Row="3"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(11), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightBlue"
                                    Grid.Row="4"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(12), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightPurple"
                                    Grid.Row="5"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(13), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightCyan"
                                    Grid.Row="6"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(14), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                    <ContentControl x:Name="BrightWhite"
                                    Grid.Row="7"
                                    Grid.Column="2"
                                    Content="{x:Bind ViewModel.ColorEntryAt(15), Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />

                    <!--  Foreground  -->
                    <TextBlock x:Uid="ColorScheme_Foreground"
                               Grid.Row="0"
                               Grid.Column="4"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="ForegroundButton"
                                    Grid.Row="0"
                                    Grid.Column="5"
                                    Content="{x:Bind ViewModel.ForegroundColor, Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />

                    <!--  Background  -->
                    <TextBlock x:Uid="ColorScheme_Background"
                               Grid.Row="1"
                               Grid.Column="4"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="BackgroundButton"
                                    Grid.Row="1"
                                    Grid.Column="5"
                                    Content="{x:Bind ViewModel.BackgroundColor, Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />

                    <!--  Cursor Color  -->
                    <TextBlock x:Uid="ColorScheme_CursorColor"
                               Grid.Row="2"
                               Grid.Column="4"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="CursorColorButton"
                                    Grid.Row="2"
                                    Grid.Column="5"
                                    Content="{x:Bind ViewModel.CursorColor, Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />

                    <!--  Selection Background  -->
                    <TextBlock x:Uid="ColorScheme_SelectionBackground"
                               Grid.Row="3"
                               Grid.Column="4"
                               Style="{StaticResource ColorLabelStyle}" />
                    <ContentControl x:Name="SelectionBackgroundButton"
                                    Grid.Row="3"
                                    Grid.Column="5"
                                    Content="{x:Bind ViewModel.SelectionBackgroundColor, Mode=OneWay}"
                                    ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                    Style="{StaticResource ColorControlStyle}" />
                </Grid>
            </local:SettingContainer>

            <local:SettingContainer x:Name="SetAsDefaultContainer"
                                    x:Uid="ColorScheme_SetAsDefault">
                <Button x:Name="SetAsDefaultButton"
                        x:Uid="ColorScheme_SetAsDefaultButton"
                        Click="{x:Bind ViewModel.SetAsDefault_Click}"
                        Style="{StaticResource BrowseButtonStyle}" />
            </local:SettingContainer>

            <local:SettingContainer x:Name="RenameContainer"
                                    x:Uid="ColorScheme_Rename"
                                    IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme), Mode=OneWay}"
                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                <StackPanel Orientation="Horizontal"
                            XYFocusKeyboardNavigation="Enabled">
                    <!--  Shown when color scheme name is already in use  -->
                    <muxc:TeachingTip x:Name="RenameErrorTip"
                                      x:Uid="ColorScheme_RenameErrorTip" />
                    <!--  Name text box  -->
                    <TextBox x:Name="NameBox"
                             PreviewKeyDown="NameBox_PreviewKeyDown"
                             Style="{StaticResource TextBoxSettingStyle}" />
                    <!--  Accept rename button  -->
                    <Button x:Name="RenameAcceptButton"
                            x:Uid="RenameAccept"
                            Click="RenameAccept_Click"
                            Style="{StaticResource AccentSmallButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE8FB;" />
                        </StackPanel>
                    </Button>
                    <!--  Cancel rename button  -->
                    <Button x:Name="RenameCancelButton"
                            x:Uid="RenameCancel"
                            Click="RenameCancel_Click"
                            Style="{StaticResource SmallButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE711;" />
                        </StackPanel>
                    </Button>
                </StackPanel>
            </local:SettingContainer>

            <Grid MaxWidth="1000"
                  Margin="2,6,0,0"
                  ColumnSpacing="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button x:Name="DeleteButton"
                        Grid.Column="0"
                        IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme)}"
                        Style="{StaticResource DeleteButtonStyle}">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE74D;" />
                            <TextBlock x:Uid="ColorScheme_DeleteButton"
                                       Style="{StaticResource IconButtonTextBlockStyle}" />
                        </StackPanel>
                    </Button.Content>
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
                                           Style="{StaticResource CustomFlyoutTextStyle}" />
                                <Button x:Uid="ColorScheme_DeleteConfirmationButton"
                                        Click="{x:Bind ViewModel.DeleteConfirmation_Click}" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
                <TextBlock x:Name="SelectedSchemeDisclaimer"
                           x:Uid="ColorScheme_DeleteButtonDisclaimerInBox"
                           Grid.Column="1"
                           VerticalAlignment="Center"
                           Style="{StaticResource DisclaimerStyle}"
                           TextWrapping="Wrap"
                           Visibility="{x:Bind ViewModel.IsInBoxScheme}" />
            </Grid>
        </StackPanel>
    </ScrollViewer>
</Page>
