<UserControl
    x:Class="Microsoft.PowerToys.Settings.UI.Controls.FancyZonesPreviewControl"
    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"
    Loaded="FancyZonesPreviewControl_Loaded"
    RequestedTheme="Dark"
    mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="White" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="White" />
                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="Black" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrast">
                    <SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
                    <SolidColorBrush x:Key="SolidZoneNumberBrush" Color="White" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <SolidColorBrush x:Key="DefaultAccentBrush" Color="{ThemeResource SystemAccentColor}" />
            <SolidColorBrush x:Key="DefaultBorderBrush" Color="{ThemeResource SystemAccentColor}" />
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid
        x:Name="RootGrid"
        MinWidth="170"
        MinHeight="86"
        HorizontalAlignment="Center"
        Background="Black"
        BorderBrush="Black"
        BorderThickness="8"
        CornerRadius="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border
            Grid.RowSpan="2"
            Grid.ColumnSpan="2"
            CornerRadius="4"
            Opacity="0.8">
            <Image
                AutomationProperties.AccessibilityView="Raw"
                Source="{x:Bind WallpaperPath, Mode=OneWay}"
                Stretch="UniformToFill" />
        </Border>

        <Border
            x:Name="Zone1"
            Grid.RowSpan="2"
            Margin="4,4,2,4"
            Background="{ThemeResource SystemControlAcrylicElementBrush}"
            BorderThickness="1"
            CornerRadius="2">
            <TextBlock
                x:Name="Zone1Number"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontWeight="SemiBold"
                Text="1"
                Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
        </Border>
        <Border
            x:Name="Zone2"
            Grid.Column="1"
            Margin="2,4,4,2"
            Background="{ThemeResource SystemControlAcrylicElementBrush}"
            BorderThickness="1"
            CornerRadius="2">
            <TextBlock
                x:Name="Zone2Number"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontWeight="SemiBold"
                Text="2"
                Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
        </Border>
        <Border
            x:Name="Zone3"
            Grid.Row="1"
            Grid.Column="1"
            Margin="2,2,4,4"
            Background="{ThemeResource SystemControlAcrylicElementBrush}"
            BorderThickness="1"
            CornerRadius="2">
            <TextBlock
                x:Name="Zone3Number"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontWeight="SemiBold"
                Text="3"
                Visibility="{x:Bind ShowZoneNumber, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
        </Border>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Target="RootGrid.Opacity" Value="0.4" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
