<Flyout x:Class="TerminalApp.ColorPickupFlyout"
        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:TerminalApp"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
        Placement="Bottom"
        ShouldConstrainToRootBounds="False"
        mc:Ignorable="d">
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MaxWidth" Value="9999" />
            <Setter Property="Padding" Value="{StaticResource FlyoutContentPadding}" />
            <Setter Property="Margin" Value="8,4,8,8" />
            <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
    <StackPanel Orientation="Horizontal">
        <StackPanel XYFocusKeyboardNavigation="Enabled">
            <Grid Padding="-2">
                <VariableSizedWrapGrid Margin="0"
                                       HorizontalAlignment="Center"
                                       MaximumRowsOrColumns="4"
                                       Orientation="Horizontal">
                    <VariableSizedWrapGrid.Resources>
                        <Style x:Name="ColorPickerColorButtonStyle"
                               BasedOn="{StaticResource ColorButtonStyle}"
                               TargetType="Button">
                            <Setter Property="Margin" Value="2" />
                        </Style>
                        <Style BasedOn="{StaticResource ColorPickerColorButtonStyle}"
                               TargetType="Button" />
                    </VariableSizedWrapGrid.Resources>

                    <Button x:Uid="CrimsonColorButton"
                            AutomationProperties.Name="Crimson"
                            Background="Crimson"
                            Click="ColorButton_Click" />
                    <Button x:Uid="SteelBlueColorButton"
                            AutomationProperties.Name="SteelBlue"
                            Background="SteelBlue"
                            Click="ColorButton_Click" />
                    <Button x:Uid="MediumSeaGreenColorButton"
                            AutomationProperties.Name="MediumSeaGreen"
                            Background="MediumSeaGreen"
                            Click="ColorButton_Click" />
                    <Button x:Uid="DarkOrangeColorButton"
                            AutomationProperties.Name="DarkOrange"
                            Background="DarkOrange"
                            Click="ColorButton_Click" />
                    <Button x:Uid="MediumVioletRedColorButton"
                            AutomationProperties.Name="MediumVioletRed"
                            Background="MediumVioletRed"
                            Click="ColorButton_Click" />
                    <Button x:Uid="DodgerBlueColorButton"
                            AutomationProperties.Name="DodgerBlue"
                            Background="DodgerBlue"
                            Click="ColorButton_Click" />
                    <Button x:Uid="LimeGreenColorButton"
                            AutomationProperties.Name="LimeGreen"
                            Background="LimeGreen"
                            Click="ColorButton_Click" />
                    <Button x:Uid="YellowColorButton"
                            AutomationProperties.Name="Yellow"
                            Background="Yellow"
                            Click="ColorButton_Click" />
                    <Button x:Uid="BlueVioletColorButton"
                            AutomationProperties.Name="BlueViolet"
                            Background="BlueViolet"
                            Click="ColorButton_Click" />
                    <Button x:Uid="SlateBlueColorButton"
                            AutomationProperties.Name="SlateBlue"
                            Background="SlateBlue"
                            Click="ColorButton_Click" />
                    <Button x:Uid="LimeColorButton"
                            AutomationProperties.Name="Lime"
                            Background="Lime"
                            Click="ColorButton_Click" />
                    <Button x:Uid="TanColorButton"
                            AutomationProperties.Name="Tan"
                            Background="Tan"
                            Click="ColorButton_Click" />
                    <Button x:Uid="MagentaColorButton"
                            AutomationProperties.Name="Magenta"
                            Background="Magenta"
                            Click="ColorButton_Click" />
                    <Button x:Uid="CyanColorButton"
                            AutomationProperties.Name="Cyan"
                            Background="Cyan"
                            Click="ColorButton_Click" />
                    <Button x:Uid="SkyBlueColorButton"
                            AutomationProperties.Name="SkyBlue"
                            Background="SkyBlue"
                            Click="ColorButton_Click" />
                    <Button x:Uid="DarkGrayColorButton"
                            AutomationProperties.Name="DarkGray"
                            Background="DarkGray"
                            Click="ColorButton_Click" />
                </VariableSizedWrapGrid>
            </Grid>
            <StackPanel Margin="0,12,0,0"
                        Orientation="Horizontal"
                        Spacing="8">
                <Button x:Name="ClearColorButton"
                        x:Uid="TabColorClearButton"
                        Grid.Column="0"
                        HorizontalAlignment="Stretch"
                        Click="ClearColorButton_Click" />
                <ToggleButton x:Name="CustomColorButton"
                              x:Uid="TabColorCustomButton"
                              Grid.Column="1"
                              HorizontalAlignment="Stretch"
                              Click="ShowColorPickerButton_Click"
                              Content="Custom"
                              IsChecked="False" />
            </StackPanel>
        </StackPanel>
        <StackPanel x:Name="customColorPanel"
                    Margin="16,0,0,0"
                    Spacing="12"
                    Visibility="Collapsed">
            <muxc:ColorPicker x:Name="customColorPicker"
                              Grid.Row="0"
                              ColorChanged="ColorPicker_ColorChanged"
                              FontSize="10"
                              IsAlphaEnabled="False"
                              IsAlphaSliderVisible="False"
                              IsAlphaTextInputVisible="False"
                              IsColorChannelTextInputVisible="True"
                              IsColorSliderVisible="True"
                              IsHexInputVisible="True"
                              IsMoreButtonVisible="True" />
            <Button x:Name="OkButton"
                    x:Uid="OkButton"
                    Grid.Row="1"
                    MinWidth="130"
                    HorizontalAlignment="Right"
                    Click="CustomColorButton_Click"
                    Content="OK"
                    Style="{ThemeResource AccentButtonStyle}" />
        </StackPanel>
    </StackPanel>
</Flyout>
