@using Microsoft.AspNetCore.Components
@using Radzen.Blazor
@using Radzen.Blazor.Spreadsheet
@using Radzen.Documents.Spreadsheet
@inherits SpreadsheetDialogBase

<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem">
    <RadzenListBox @bind-Value=@selectedCategory Data=@categories TValue="NumberFormatCategory"
        InputSize="InputSize.Small" Style="width: 140px" Change=@OnCategoryChanged />

    <RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem" Style="flex: 1">
        <RadzenStack Orientation="Orientation.Vertical" Gap="0.25rem">
            <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_Sample)) Component="sample" Style="align-self: start" />
            <RadzenTextBox Value=@preview ReadOnly="true" Name="sample" InputSize="InputSize.Small" Style="font-weight: bold" />
        </RadzenStack>

        @if (ShowDecimalPlaces)
        {
            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
                <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_DecimalPlaces)) Component="decimalPlaces" Style="width: 8rem; text-align: end" />
                <RadzenNumeric @bind-Value=@decimalPlaces Min="0" Max="30" Name="decimalPlaces" InputSize="InputSize.Small" Style="width: 80px"
                    Change=@OnOptionChanged TValue="int" />
            </RadzenStack>
        }

        @if (ShowThousandsSeparator)
        {
            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Style="padding-inline-start: 8.5rem">
                <RadzenCheckBox @bind-Value=@useThousandsSeparator TValue="bool" Name="useThousandsSeparator"
                    Change=@OnOptionChanged />
                <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_UseThousandsSeparator)) Component="useThousandsSeparator" />
            </RadzenStack>
        }

        @if (ShowCurrencySymbol)
        {
            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
                <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_Symbol)) Component="currencySymbol" Style="width: 8rem; text-align: end" />
                <RadzenDropDown @bind-Value=@currencySymbol Data=@FormatCodeBuilder.CurrencySymbols Name="currencySymbol"
                    InputSize="InputSize.Small" Style="width: 80px" Change=@OnOptionChanged TValue="string" />
            </RadzenStack>
        }

        @if (ShowPresetList)
        {
            <RadzenStack Orientation="Orientation.Vertical" Gap="0.25rem">
                <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_Type)) Component="presetType" Style="align-self: start" />
                <RadzenListBox @bind-Value=@selectedPreset Data=@presets TextProperty="Item1" ValueProperty="Item2" Name="presetType"
                    InputSize="InputSize.Small" Style="height: 130px" TValue="string" Change=@OnPresetChanged />
            </RadzenStack>
        }

        <RadzenStack Orientation="Orientation.Vertical" Gap="0.25rem">
            <RadzenLabel class="rz-text-subtitle2" Text=@L(nameof(RadzenStrings.Spreadsheet_FormatCode)) Component="formatCode" Style="align-self: start" />
            <RadzenTextBox @bind-Value=@customFormatCode Name="formatCode" InputSize="InputSize.Small" Style="width: 100%" Change=@OnFormatCodeChanged />
        </RadzenStack>
    </RadzenStack>
</RadzenStack>

<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" JustifyContent="JustifyContent.End" class="rz-spreadsheet-dialog-actions">
    <RadzenButton Text=@L(nameof(RadzenStrings.Spreadsheet_Cancel)) Click=@OnCancel ButtonStyle="ButtonStyle.Base" Variant="Variant.Outlined" />
    <RadzenButton Text=@L(nameof(RadzenStrings.Spreadsheet_OK)) Click=@OnOk ButtonStyle="ButtonStyle.Primary" Variant="Variant.Flat" />
</RadzenStack>
