<UserControl x:Class="Artemis.UI.DefaultTypes.DataModel.Display.SKColorDataModelDisplayView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:display="clr-namespace:Artemis.UI.DefaultTypes.DataModel.Display"
             xmlns:s="https://github.com/canton7/Stylet"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance {x:Type display:SKColorDataModelDisplayViewModel}}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Artemis.UI.Shared;component/Resources/ArtemisShared.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <shared:ColorToStringConverter x:Key="SKColorToStringConverter" />
            <shared:SKColorToColorConverter x:Key="SKColorToColorConverter" />
            <shared:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!-- Prefix -->
        <TextBlock Grid.Column="0" 
                   Text="{Binding PropertyDescription.Prefix}"
                   Visibility="{Binding PropertyDescription.Prefix, Converter={StaticResource NullToVisibilityConverter}}" 
                   TextAlignment="Right"
                   Margin="0 0 5 0" />

        <!-- Value -->
        <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <TextBlock x:Name="HexDisplay"
                       Text="{Binding DisplayValue, Converter={StaticResource SKColorToStringConverter}}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Stretch" />
            <Border Width="{Binding ActualHeight, ElementName=HexDisplay}"
                    Height="{Binding ActualHeight, ElementName=HexDisplay}"
                    CornerRadius="{Binding ActualHeight, ElementName=HexDisplay}"
                    Margin="5 0 0 0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Right"
                    Background="{StaticResource Checkerboard}">
                <Ellipse Stroke="{DynamicResource NormalBorderBrush}">
                    <Ellipse.Fill>
                        <SolidColorBrush Color="{Binding DisplayValue, Converter={StaticResource SKColorToColorConverter}}" />
                    </Ellipse.Fill>
                </Ellipse>
            </Border>
        </StackPanel>

        <!-- Affix -->
        <TextBlock Grid.Column="2" 
                   Text="{Binding PropertyDescription.Affix}"
                   Visibility="{Binding PropertyDescription.Affix, Converter={StaticResource NullToVisibilityConverter}}" 
                   Margin="5 0 0 0" />
    </Grid>
</UserControl>