<UserControl xmlns="https://github.com/avaloniaui"
             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"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:tree="clr-namespace:Artemis.UI.Screens.ProfileEditor.Properties.Tree"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.ProfileEditor.Properties.Tree.TreePropertyView"
             x:DataType="tree:ITreePropertyViewModel">
    <UserControl.Resources>
        <converters:PropertyTreeMarginConverter x:Key="PropertyTreeMarginConverter" Length="20" />
    </UserControl.Resources>
    <Border Name="Bd"
            BorderBrush="{DynamicResource ButtonBorderBrush}"
            BorderThickness="0,0,0,1"
            Height="29">
        <Grid Margin="{CompiledBinding Converter={StaticResource PropertyTreeMarginConverter}}" ColumnDefinitions="Auto,*,Auto,Auto,Auto">
            <ToggleButton Grid.Column="0"
                          Classes="icon-button"
                          ToolTip.Tip="Toggle key-framing"
                          Width="24"
                          Height="24"
                          IsChecked="{Binding KeyframesEnabled}"
                          IsEnabled="{Binding LayerProperty.KeyframesSupported}"
                          VerticalAlignment="Center" Padding="-25">
                <avalonia:MaterialIcon Kind="Stopwatch" />
            </ToggleButton>

            <TextBlock Grid.Column="1"
                       Margin="5,0,0,0"
                       Padding="0,0,5,0"
                       VerticalAlignment="Center"
                       TextTrimming="CharacterEllipsis"
                       Text="{Binding LayerProperty.PropertyDescription.Name}"
                       ToolTip.Tip="{Binding LayerProperty.PropertyDescription.Description}"
                       HorizontalAlignment="Left" />

            <ContentControl Grid.Column="2"
                            Margin="5 0"
                            Content="{Binding PropertyInputViewModel}" />

            <Button Grid.Column="3"
                    Margin="0 0 2 0"
                    Command="{Binding ResetToDefault}"
                    Classes="icon-button"
                    ToolTip.Tip="Reset the property to its default value."
                    Width="24"
                    Height="24">
                <avalonia:MaterialIcon Kind="BackupRestore" />
            </Button>

            <ToggleButton Grid.Column="4"
                          Name="DataBindingToggleButton"
                          Classes="icon-button"
                          Margin="2 0 0 0"
                          ToolTip.Tip="Change the property's data binding"
                          Width="24"
                          Height="24"
                          VerticalAlignment="Center"
                          IsEnabled="{Binding LayerProperty.DataBindingsSupported}"
                          IsChecked="{CompiledBinding DataBindingEnabled, Mode=OneWay}"
                          Click="DataBindingToggleButton_OnClick">
                <avalonia:MaterialIcon Kind="VectorLink" />
            </ToggleButton>
        </Grid>

    </Border>
</UserControl>