<UserControl x:Class="ScreenToGif.UserControls.BorderPanel"
             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:n="clr-namespace:ScreenToGif.Controls"
             mc:Ignorable="d" d:DesignHeight="400" d:DesignWidth="300"
             SnapsToDevicePixels="True">
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="27"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <n:LabelSeparator Grid.Row="0" Text="{DynamicResource S.Border.Appearance}"/>
        <Grid Grid.Row="1" Margin="10,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Text="{DynamicResource S.Caption.Color}" VerticalAlignment="Center" Foreground="{DynamicResource Element.Foreground.Medium}"/>
            <n:ColorBox Grid.Row="0" Grid.Column="1" x:Name="BorderColorBox" Margin="10,5"
                        SelectedColor="{Binding Color, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Text="{DynamicResource S.Caption.Thickness}" VerticalAlignment="Center" Foreground="{DynamicResource Element.Foreground.Medium}"/>
            <Grid Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Border Grid.Column="0" Background="{StaticResource Vector.Arrow.Blue.Top}" Width="15" Height="15" Opacity="{DynamicResource Element.Opacity}"/>
                    <n:IntegerUpDown Grid.Column="1" x:Name="BorderTopThicknessNumericUpDown" Minimum="-500" Maximum="20" Margin="3,5" Width="55" 
                                     Value="{Binding TopThickness, Mode=TwoWay}"/>
                </Grid>

                <Border Grid.Row="1" Grid.Column="0" Background="{StaticResource Vector.Arrow.Blue.Left}" Width="15" Height="15" Margin="5,0,0,0" Opacity="{DynamicResource Element.Opacity}"/>
                <n:IntegerUpDown Grid.Row="1" Grid.Column="1" x:Name="BorderLeftThicknessNumericUpDown" Minimum="-500" Maximum="20" Margin="3,5" Width="55" 
                                 Value="{Binding LeftThickness, Mode=TwoWay}"/>

                <Border Grid.Row="1" Grid.Column="3" Background="{StaticResource Vector.Arrow.Blue.Right}" Width="15" Height="15" Opacity="{DynamicResource Element.Opacity}"/>
                <n:IntegerUpDown Grid.Row="1" Grid.Column="2" x:Name="BorderRightThicknessNumericUpDown" Minimum="-500" Maximum="20" Margin="3,5" Width="55" 
                                 Value="{Binding RightThickness, Mode=TwoWay}"/>

                <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Border Grid.Column="0" Background="{StaticResource Vector.Arrow.Blue.Bottom}" Width="15" Height="15" Opacity="{DynamicResource Element.Opacity}"/>
                    <n:IntegerUpDown Grid.Column="1" x:Name="BorderBottomThicknessNumericUpDown" Minimum="-500" Maximum="20" Margin="3,5" Width="55" 
                                     Value="{Binding BottomThickness, Mode=TwoWay}"/>
                </Grid>
            </Grid>
        </Grid>

        <Grid Grid.Row="2" Grid.Column="0" Margin="10,10,5,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Width="15" Height="15" Background="{StaticResource Vector.Info}" Opacity="{DynamicResource Element.Opacity}"/>
            <TextBlock Grid.Column="1" Text="{DynamicResource S.Border.Info}" Foreground="{DynamicResource Element.Foreground.Detail}" 
                       FontStyle="Italic" FontSize="12" Padding="3" TextWrapping="WrapWithOverflow"/>
        </Grid>
    </Grid>
</UserControl>