@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>@localization.Options</label>
    <div class="fr-webreport-popup-content-export-parameters-row">
        <div class="fr-webreport-popup-content-export-parameters-col">
            <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive(Wysiwyg)"
                    @onclick="OnWysiwygClick">
                @Wysiwyg
            </button>
        </div>
        <div class="fr-webreport-popup-content-export-parameters-col">
            <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive(PrintOptimized)"
                    @onclick="OnPrintOptimizedClick">
                @localization.PrintOptimized
            </button>
        </div>
    </div>
    <div class="fr-webreport-popup-content-export-parameters-col">
        <button type="button" class="fr-webreport-popup-content-export-parameters-button @IsActive(DoNotExpandShiftReturn)"
                @onclick="OnDoNotExpandShiftReturnClick">
            @localization.DoNotExpandShiftReturn
        </button>
    </div>
    <div class="fr-webreport-popup-content-export-parameters-col">
        <div class="fr-webreport-popup-content-export-parameters-row">
            <label style=" margin-left: 0.5rem;">@localization.RowHeightIs:</label>
            <select class="custom-select" @bind="@ExportParameters["RowHeightIs"]">
                <option value="Exactly" selected>@localization.Exactly</option>
                <option value="Minimum">@localization.Minimum</option>
            </select>
        </div>
        <div class="fr-webreport-popup-content-export-parameters-row">
            <label style=" margin-left: 0.5rem;">@localization.Options</label>
            <select class="custom-select" @onchange="OnRenderModeChange">
                <option value="table">@localization.Table</option>
                <option value="layers" selected>@localization.Layers</option>
                <option value="paragraphs">@localization.Paragraphs</option>
            </select>
        </div>
    </div>
</div>
