<UserControl
    x:Class="PixiEditor.AvaloniaUI.Views.Palettes.PaletteItem"
             x:ClassModifier="internal"
             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:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
             xmlns:decorators="clr-namespace:PixiEditor.AvaloniaUI.Views.Decorators"
             mc:Ignorable="d"
             d:DesignHeight="200"
             d:DesignWidth="800" 
             Name="paletteItem">
    <Grid Background="{DynamicResource ThemeBackgroundBrush}" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="95"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60*" MinHeight="45"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" Grid.RowSpan="2" Grid.ColumnSpan="2">
            <Separator Background="{DynamicResource ThemeBackgroundBrush}" />
            <DockPanel>
                <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
                    <input:EditableTextBlock x:Name="titleTextBlock" OnSubmit="EditableTextBlock_OnSubmit"
                                                    Text="{Binding Palette.Name, ElementName=paletteItem, Mode=TwoWay}"
                                                    FontSize="20" MaxChars="50"/>
                <Button IsVisible="{Binding ElementName=paletteItem, Path=IsPointerOver}"
                        Click="RenameButton_Click"
                        Cursor="Hand" Width="20" Height="20">
                    <Image Source="/Images/Edit.png"/>
                </Button>
            </StackPanel>
                <!--<Image Margin="0 5 5 0"
                       Source="/Images/SupperterPack.png" Width="24"
                       DockPanel.Dock="Right" HorizontalAlignment="Right"/>-->
                <decorators:Chip Margin="0 5 5 0"
                                   ui:Translator.Key="{Binding ElementName=paletteItem, Path=Palette.Source.Name}"
                                   DockPanel.Dock="Right" HorizontalAlignment="Right"/>
            </DockPanel>
            <TextBlock Margin="0 5 0 0" />
        </StackPanel>
        <ItemsControl Margin="0 -20 0 10" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ElementName=paletteItem, Path=Palette.Colors}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding Hex}" ToolTip.Tip="{Binding}" Width="30" Height="30"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center">
            <Border Margin="0 0 2 0" Width="28" Height="28" HorizontalAlignment="Right" CornerRadius="2.5">
                <Border.Styles>
                    <Style Selector="Border">
                        <Setter Property="Background" Value="Transparent"/>
                    </Style>
                    <Style Selector="Border:hover">
                        <Setter Property="Background" Value="SeaGreen"/>
                    </Style>
                </Border.Styles>
                <Button
                    ui:Translator.TooltipKey="USE_IN_CURRENT_IMAGE" Cursor="Hand"
                    Margin="0 3 0 0" Width="24" Height="24"
                    CommandParameter="{Binding ElementName=paletteItem, Path=Palette.Colors}"
                    Command="{Binding ImportPaletteCommand, ElementName=paletteItem}">
                    <Button.Background>
                        <ImageBrush Source="/Images/Check-square.png"/>
                    </Button.Background>
                </Button>
            </Border>
            <Border Margin="2 0 -2 0" Width="28" Height="28" HorizontalAlignment="Right" CornerRadius="2.5"
                    Padding="2">
                <Border.Styles>
                    <Style Selector="Border">
                        <Setter Property="Background" Value="Transparent"/>
                    </Style>
                    <Style Selector="Border:hover">
                        <Setter Property="Background" Value="DarkOrange"/>
                    </Style>
                </Border.Styles>
                <Button
                    Classes="ImageButton"
                    Command="{Binding ElementName=paletteItem, Path=ToggleFavouriteCommand}"
                    CommandParameter="{Binding ElementName=paletteItem, Path=Palette}"
                    ui:Translator.TooltipKey="ADD_TO_FAVORITES">
                    <Button.Styles>
                        <Style Selector="Button">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <ImageBrush Source="/Images/Star.png"/>
                                </Setter.Value>
                            </Setter>
                            </Style>
                        <Style Selector="Button.IsFavourite">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <ImageBrush Source="/Images/Star-filled.png"/>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Styles>
                </Button>
            </Border>
            <Border Width="28" Height="28" CornerRadius="2.5"
                    Margin="5 0 0 0" Padding="2" Name="deleteBorder">
                <Border.Styles>
                    <Style Selector="Border">
                        <Setter Property="Background" Value="Transparent"/>
                    </Style>
                    <Style Selector="Border.IsEnabled:hover">
                        <Setter Property="Background" Value="Red"/>
                    </Style>
                </Border.Styles>
                <Button Name="deleteButton" Command="{Binding DeletePaletteCommand, ElementName=paletteItem}"
                        CommandParameter="{Binding ElementName=paletteItem, Path=Palette}"
                ui:Translator.TooltipKey="DELETE" Width="24" Height="24" Margin="0" Cursor="Hand">
                    <Button.Background>
                        <ImageBrush Source="/Images/Trash.png"/>
                    </Button.Background>
                </Button>
            </Border>
        </StackPanel>
    </Grid>
</UserControl>
