<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:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Width="528"
    d:DesignWidth="578"
    d:DesignHeight="350"
    x:Class="Ryujinx.Ava.UI.Views.User.UserFirmwareAvatarSelectorView"
    xmlns:ext="clr-namespace:Ryujinx.Ava.Common.Markup"
    xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
    xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
    x:DataType="viewModels:UserFirmwareAvatarSelectorViewModel"
    Focusable="True">
    <Design.DataContext>
        <viewModels:UserFirmwareAvatarSelectorViewModel />
    </Design.DataContext>
	<UserControl.Resources>
		<helpers:BitmapArrayValueConverter x:Key="ByteImage" />
	</UserControl.Resources>
    <Grid
        Margin="0"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListBox
            Grid.Row="1"
            BorderThickness="0"
            SelectedIndex="{Binding SelectedIndex}"
            Height="400"
            ItemsSource="{Binding Images}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel
                        Orientation="Horizontal"
                        Margin="0"
                        HorizontalAlignment="Center" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.Styles>
                <Style Selector="ListBoxItem">
                    <Setter Property="CornerRadius" Value="4" />
                    <Setter Property="Width" Value="85" />
                    <Setter Property="MaxWidth" Value="85" />
                    <Setter Property="MinWidth" Value="85" />
                </Style>
                <Style Selector="ListBoxItem /template/ Rectangle#SelectionIndicator">
                    <Setter Property="MinHeight" Value="70" />
                </Style>
            </ListBox.Styles>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Panel
                        Background="{Binding BackgroundColor}"
                        Margin="5">
                        <Image Source="{Binding Data, Converter={StaticResource ByteImage}}" />
                    </Panel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <StackPanel
            Grid.Row="3"
            Orientation="Horizontal"
            Spacing="10"
            Margin="0 24 0 0"
            HorizontalAlignment="Left">
            <Button
                Width="50"
                MinWidth="50"
                Height="35"
                Click="GoBack">
                <ui:SymbolIcon Symbol="Back" />
            </Button>
        </StackPanel>
        <StackPanel
            Grid.Row="3"
            Orientation="Horizontal"
            Spacing="10"
            Margin="0 24 0 0"
            HorizontalAlignment="Right">
            <ui:ColorPickerButton
                FlyoutPlacement="Top"
                IsMoreButtonVisible="False"
                UseColorPalette="False"
                UseColorTriangle="False"
                UseColorWheel="False"
                ShowAcceptDismissButtons="False"
                IsAlphaEnabled="False"
                Color="{Binding BackgroundColor, Mode=TwoWay}"
                Name="ColorButton">
                <ui:ColorPickerButton.Styles>
                    <Style Selector="Grid#Root > DockPanel > Grid">
                        <Setter Property="IsVisible" Value="False" />
                    </Style>
                </ui:ColorPickerButton.Styles>
            </ui:ColorPickerButton>
            <Button
                Content="{ext:Locale AvatarChoose}"
                Height="35"
                Name="ChooseButton"
                Click="ChooseButton_OnClick" />
        </StackPanel>
    </Grid>
</UserControl>
