<UserControl
    x:Class="ColorPicker.Views.MainView"
    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="clr-namespace:ColorPicker.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModel="clr-namespace:ColorPicker.ViewModels"
    d:DataContext="{d:DesignInstance viewModel:MainViewModel,
                                     IsDesignTimeCreatable=True}"
    d:DesignHeight="64"
    mc:Ignorable="d">
    <Grid Background="Transparent">

        <Border
            Background="{DynamicResource ApplicationBackgroundBrush}"
            BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="8">
            <!--  Disabled due to the poor performance of drawing shadows in WPF  -->
            <!--<Border.Effect>
                <DropShadowEffect
                    BlurRadius="16"
                    Opacity="0.28"
                    ShadowDepth="1" />
            </Border.Effect>-->

            <Grid>
                <!--  only color format - one line  -->
                <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2InvertedVisibilityConverter}}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="36" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Border
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Background="{Binding ColorBrush}"
                        BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
                        BorderThickness="1"
                        CornerRadius="{DynamicResource ControlCornerRadius}" />

                    <TextBlock
                        x:Name="ColorTextBlock"
                        Grid.Column="1"
                        Margin="8,5,8,8"
                        AutomationProperties.LiveSetting="Assertive"
                        AutomationProperties.Name="{Binding ColorName}"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                        Text="{Binding ColorText}" />
                </Grid>

                <!--  color format and color name - two lines  -->
                <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2VisibilityConverter}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="26" />
                        <RowDefinition Height="26" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="52" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Border
                        x:Name="ColorBorderBig"
                        Grid.RowSpan="2"
                        Margin="1"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Background="{Binding ColorBrush}"
                        BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
                        BorderThickness="1"
                        CornerRadius="{DynamicResource ControlCornerRadius}" />

                    <TextBlock
                        Grid.Row="0"
                        Grid.Column="1"
                        Margin="8,5,6,0"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                        Text="{Binding ColorText}" />

                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        Height="26"
                        Margin="8,0,8,2"
                        Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{Binding ColorName}" />
                </Grid>
            </Grid>
        </Border>
    </Grid>
</UserControl>
