<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="PowerDisplay.MonitorIcon"
    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"
    AutomationProperties.AccessibilityView="Raw"
    IsTabStop="False"
    mc:Ignorable="d">

    <UserControl.Resources>
        <x:Double x:Key="MonitorGlyphFontSize">22</x:Double>
        <x:Double x:Key="MonitorNumberFontSize">10</x:Double>
        <Thickness x:Key="ExternalMonitorNumberMargin">0,0,0,4</Thickness>
        <Thickness x:Key="BuiltInMonitorNumberMargin">0,0,0,6</Thickness>
    </UserControl.Resources>

    <Grid>
        <!--  Decorative badge: keep fixed text scaling for the glyph overlay and rely on adjacent DisplayName text for accessible monitor numbering.  -->
        <Viewbox Width="16">
            <Grid>
                <Grid x:Name="MonitorGrid" x:Uid="ExternalMonitorTooltip">
                    <FontIcon
                        VerticalAlignment="Center"
                        FontSize="{StaticResource MonitorGlyphFontSize}"
                        Glyph="&#xE7F4;" />
                    <TextBlock
                        Margin="{StaticResource ExternalMonitorNumberMargin}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="{StaticResource MonitorNumberFontSize}"
                        FontWeight="SemiBold"
                        IsTextScaleFactorEnabled="False"
                        Text="{x:Bind MonitorNumber, Mode=OneWay}" />
                </Grid>

                <Grid
                    x:Name="BuiltInDisplayGrid"
                    x:Uid="BuiltInMonitorTooltip"
                    Visibility="Collapsed">
                    <FontIcon
                        VerticalAlignment="Center"
                        FontSize="{StaticResource MonitorGlyphFontSize}"
                        Glyph="&#xE7FB;" />
                    <TextBlock
                        Margin="{StaticResource BuiltInMonitorNumberMargin}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="{StaticResource MonitorNumberFontSize}"
                        FontWeight="SemiBold"
                        IsTextScaleFactorEnabled="False"
                        Text="{x:Bind MonitorNumber, Mode=OneWay}" />
                </Grid>
            </Grid>
        </Viewbox>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Monitor" />
                <VisualState x:Name="BuiltIn">
                    <VisualState.Setters>
                        <Setter Target="BuiltInDisplayGrid.Visibility" Value="Visible" />
                        <Setter Target="MonitorGrid.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
