<UserControl
    x:Class="ColorPicker.Controls.ColorPickerControl"
    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:helpers="clr-namespace:ColorPicker.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:p="clr-namespace:ColorPicker.Properties"
    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
    AutomationProperties.Name="{x:Static p:Resources.Color_Palette}"
    FocusManager.IsFocusScope="True"
    KeyboardNavigation.TabNavigation="Once"
    TabIndex="3"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style TargetType="{x:Type Slider}">
            <Setter Property="MinWidth" Value="104" />
            <Setter Property="MinHeight" Value="21" />
            <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <TickBar
                                x:Name="TopTick"
                                Grid.Row="0"
                                Height="6"
                                Fill="Transparent"
                                Placement="Top"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed" />
                            <Border
                                x:Name="TrackBackground"
                                Grid.Row="1"
                                Height="8"
                                Margin="0"
                                Background="{TemplateBinding Background}"
                                BorderThickness="0"
                                CornerRadius="4" />
                            <Track x:Name="PART_Track" Grid.Row="1">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="Slider.DecreaseLarge">
                                        <RepeatButton.Style>
                                            <Style TargetType="{x:Type RepeatButton}">
                                                <Setter Property="IsTabStop" Value="False" />
                                                <Setter Property="Focusable" Value="False" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                            <Border Background="Transparent" />
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </RepeatButton.Style>
                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb x:Name="Thumb">
                                        <Thumb.Style>
                                            <Style TargetType="{x:Type Thumb}">
                                                <Setter Property="Height" Value="20" />
                                                <Setter Property="Width" Value="20" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
                                                <Setter Property="Foreground" Value="Black" />
                                                <Setter Property="BorderThickness" Value="1" />
                                                <Setter Property="Background" Value="{DynamicResource SliderOuterThumbBackground}" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                                            <Border
                                                                Background="{TemplateBinding Background}"
                                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                                CornerRadius="16">
                                                                <Ellipse
                                                                    x:Name="Ellipse"
                                                                    Width="12"
                                                                    Height="12"
                                                                    Fill="{TemplateBinding Foreground}"
                                                                    Stroke="Transparent"
                                                                    StrokeThickness="0" />
                                                            </Border>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </Thumb.Style>
                                    </Thumb>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="Slider.IncreaseLarge">
                                        <RepeatButton.Style>
                                            <Style TargetType="{x:Type RepeatButton}">
                                                <Setter Property="IsTabStop" Value="False" />
                                                <Setter Property="Focusable" Value="False" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                            <Border Background="Transparent" />
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </RepeatButton.Style>
                                    </RepeatButton>

                                </Track.IncreaseRepeatButton>
                            </Track>
                            <TickBar
                                x:Name="BottomTick"
                                Grid.Row="2"
                                Height="6"
                                Fill="Transparent"
                                Placement="Bottom"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True" />
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Border
        BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
        BorderThickness="1"
        CornerRadius="{DynamicResource ControlCornerRadius}">
        <Grid
            x:Name="PickerPanel"
            Height="248"
            HorizontalAlignment="Stretch"
            ClipToBounds="True"
            Opacity="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="36" />
                <RowDefinition Height="36" />
                <RowDefinition Height="*" />
                <RowDefinition Height="36" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>

            <Button
                x:Name="colorVariation1Button"
                Grid.Column="0"
                helpers:ControlHelper.CornerRadius="4,4,0,0"
                AutomationProperties.Name="{x:Static p:Resources.Lightest_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                TabIndex="3"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation2Button"
                Grid.Row="1"
                AutomationProperties.Name="{x:Static p:Resources.Lighter_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation3Button"
                Grid.Row="3"
                AutomationProperties.Name="{x:Static p:Resources.Darker_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation4Button"
                Grid.Row="4"
                helpers:ControlHelper.CornerRadius="0,0,4,4"
                AutomationProperties.Name="{x:Static p:Resources.Darkest_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />

            <Button
                x:Name="CurrentColorButton"
                Grid.RowSpan="5"
                Height="104"
                Margin="0,72,0,72"
                VerticalAlignment="Top"
                AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}"
                AutomationProperties.Name="{x:Static p:Resources.Selected_color}"
                Click="CurrentColorButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}">

                <ui:Flyout
                    x:Name="DetailsFlyout"
                    Margin="24,0,0,0"
                    Closed="DetailsFlyout_Closed"
                    Opened="DetailsFlyout_Opened"
                    Placement="Top">
                    <Grid x:Name="detailsGrid" KeyboardNavigation.TabNavigation="Contained">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="44" />
                            <ColumnDefinition Width="86" />
                            <ColumnDefinition Width="86" />
                            <ColumnDefinition Width="86" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="8" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="8" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="12" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="12" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <TextBlock
                            VerticalAlignment="Center"
                            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="H"
                            TextAlignment="Center" />

                        <Slider
                            x:Name="HueGradientSlider"
                            Grid.Column="1"
                            Grid.ColumnSpan="3"
                            VerticalAlignment="Center"
                            AutomationProperties.Name="{x:Static p:Resources.Hue_slider}"
                            IsMoveToPointEnabled="True"
                            Maximum="289"
                            Minimum="0"
                            ValueChanged="HueGradientSlider_ValueChanged" />

                        <TextBlock
                            Grid.Row="2"
                            VerticalAlignment="Center"
                            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="S"
                            TextAlignment="Center" />

                        <Slider
                            x:Name="SaturationGradientSlider"
                            Grid.Row="2"
                            Grid.Column="1"
                            Grid.ColumnSpan="3"
                            AutomationProperties.Name="{x:Static p:Resources.Saturation_slider}"
                            IsMoveToPointEnabled="True"
                            Maximum="289"
                            Minimum="0"
                            ValueChanged="SaturationGradientSlider_ValueChanged">
                            <Slider.Background>
                                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
                                    <GradientStop x:Name="SaturationStartColor" Color="Black" />
                                    <GradientStop x:Name="SaturationStopColor" Offset="1" Color="Red" />
                                </LinearGradientBrush>
                            </Slider.Background>
                        </Slider>

                        <TextBlock
                            Grid.Row="4"
                            VerticalAlignment="Center"
                            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="V"
                            TextAlignment="Center" />

                        <Slider
                            x:Name="ValueGradientSlider"
                            Grid.Row="4"
                            Grid.Column="1"
                            Grid.ColumnSpan="3"
                            AutomationProperties.Name="{x:Static p:Resources.Value_slider}"
                            IsMoveToPointEnabled="True"
                            Maximum="289"
                            Minimum="0"
                            ValueChanged="ValueGradientSlider_ValueChanged">
                            <Slider.Background>
                                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
                                    <GradientStop x:Name="ValueStartColor" Color="Black" />
                                    <GradientStop x:Name="ValueStopColor" Offset="1" Color="Red" />
                                </LinearGradientBrush>
                            </Slider.Background>
                        </Slider>

                        <TextBlock
                            Grid.Row="6"
                            VerticalAlignment="Center"
                            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="RGB"
                            TextAlignment="Center" />

                        <ui:NumberBox
                            x:Name="RNumberBox"
                            Grid.Row="6"
                            Grid.Column="1"
                            AutomationProperties.Name="{x:Static p:Resources.Red_value}"
                            Maximum="255"
                            Minimum="0"
                            SpinButtonPlacementMode="Compact"
                            TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />

                        <ui:NumberBox
                            x:Name="GNumberBox"
                            Grid.Row="6"
                            Grid.Column="2"
                            Margin="4,0,0,0"
                            AutomationProperties.Name="{x:Static p:Resources.Green_value}"
                            Maximum="255"
                            Minimum="0"
                            SpinButtonPlacementMode="Compact"
                            TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />

                        <ui:NumberBox
                            x:Name="BNumberBox"
                            Grid.Row="6"
                            Grid.Column="3"
                            Margin="4,0,0,0"
                            AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
                            Maximum="255"
                            Minimum="0"
                            SpinButtonPlacementMode="Compact"
                            TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />

                        <TextBlock
                            Grid.Row="8"
                            Width="38"
                            VerticalAlignment="Center"
                            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="HEX"
                            TextAlignment="Center" />
                        <TextBox
                            x:Name="HexCode"
                            Grid.Row="8"
                            Grid.Column="1"
                            Grid.ColumnSpan="3"
                            HorizontalAlignment="Stretch"
                            AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
                            CharacterCasing="Lower"
                            GotKeyboardFocus="HexCode_GotKeyboardFocus"
                            MaxLength="7"
                            TextChanged="HexCode_TextChanged"
                            TextWrapping="Wrap" />

                        <ui:Button
                            x:Name="OKButton"
                            Grid.Row="9"
                            Grid.ColumnSpan="4"
                            Margin="0,32,0,0"
                            HorizontalAlignment="Stretch"
                            Appearance="Primary"
                            AutomationProperties.Name="{x:Static p:Resources.Select}"
                            Click="OKButton_Click"
                            Content="{x:Static p:Resources.Select}" />
                    </Grid>
                </ui:Flyout>
            </Button>




        </Grid>

    </Border>
</UserControl>
