@inherits ExportSettingsBase

<div class="fr-webreport-popup-content-export-parameters">
    <div class="fr-webreport-popup-content-title">
        @localization.Title
    </div>
    <PageSelector ExportParameters="ExportParameters" WebReport="WebReport" />
</div>

<div class="fr-webreport-popup-content-export-parameters">
    <label>Options</label>
    <div class="fr-webreport-popup-content-export-parameters-col">
        <label for="formatSelect" class="mb-1">@localization.Format</label>
        <select class="custom-select" @onchange="OnImageFormatChange" id="formatSelect">
            <option value="Bmp">@localization.Bmp</option>
            <option value="Png">@localization.Png</option>
            <option value="Jpeg" selected>@localization.Jpeg</option>
            <option value="Gif">@localization.Gif</option>
            <option value="Tiff">@localization.Tiff</option>
            <option value="Metafile">@localization.Metafile</option>
        </select>
        <label for="resolution-input" class="col-form-label mr-2 py-1">@localization.Resolution</label>
        <input class="fr-webreport-popup-content-export-parameters-input" type="number" min="0" @bind="@ResolutionX" id="resolution-input">
        @if (!ResolutionYIsDisabled())
        {
            <label for="example-number-input" class="mx-2 col-form-label py-1">x</label>
            <input class="fr-webreport-popup-content-export-parameters-input" type="number" min="0" @bind="@ResolutionY" id="resolution-input">
        }

        @if (!CompressionIsDisabled())
        {
            <Slider Min="0.0f" Max="100f" @bind-Value="JpegQuality" Label="@localization.JpegQuality"></Slider>
        }
    </div>
   
    <div class="fr-webreport-popup-content-export-parameters-col">
        @if (!MultiFrameTiffIsDisabled())
        {
            <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive("MultiFrameTiff")"
                    @onclick="OnMultiFrameTiffClick">
                @localization.MultiFrame
            </button>
        }

        @if (!MonochromeTiffIsDisabled())
        {
            <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive("MonochromeTiff")"
                    @onclick="OnMonochromeTiffClick">
                @localization.MonochromeTIFF
            </button>
        }
   
        <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive("SeparateFiles")"
                @onclick="OnSeparateFilesClick">
            @localization.Separate
        </button>
    </div>
</div>
