{% import '_includes/forms' as forms %}

{{ forms.selectField({
    label: 'UI Mode'|t('app'),
    instructions: 'How the field should be presented in the control panel.'|t('app'),
    id: 'ui-mode',
    name: 'uiMode',
    options: [
        {label: 'Normal'|t('app'), value: 'normal'},
        {label: 'Enlarged'|t('app'), value: 'enlarged'},
    ],
    value: field.uiMode,
}) }}

{% set configInput %}
    <div class="flex">
        {{ forms.select({
            name: 'configSelectionMode',
            options: [
                { label: 'Choose a config file'|t('redactor'), value: 'choose' },
                { label: 'Enter a custom config'|t('redactor'), value: 'manual' }
            ],
            value: field.configSelectionMode,
            toggle: true,
            targetPrefix: '.csm-'
        }) }}

        {{ forms.select({
            id: 'redactorConfig',
            name: 'redactorConfig',
            class: ['csm-choose', field.configSelectionMode == 'manual' ? 'hidden']|filter,
            options: redactorConfigOptions,
            value: field.redactorConfig
        }) }}
    </div>
{% endset %}

{{ forms.field({
    label: "Redactor Config"|t('redactor'),
    id: 'config',
    instructions: "You can save custom Redactor configs as `.json` files in `config/redactor/`, or you can enter a custom config."|t('redactor')
        ~ ' <a href="http://imperavi.com/redactor/docs/settings/" rel="noopener" target="_blank" class="go">'~"View available settings"|t('redactor')~'</a>',
    required: true,
}, configInput) }}

{{ forms.textareaField({
    label: "Custom Redactor Config"|t('redactor'),
    instructions: 'The config must be entered as valid JSON.'|t('redactor'),
    fieldClass: ['csm-manual', field.configSelectionMode == 'choose' ? 'hidden']|filter,
    class: ['code', 'ltr'],
    name: 'manualConfig',
    value: field.manualConfig,
    rows: 10,
    cols: 50,
    errors: field.getErrors('manualConfig'),
}) }}

{{ forms.checkboxField({
    label: 'Show the “HTML” button for non-admin users'|t('redactor'),
    instructions: 'Whether the “HTML” button should be visible for non-admin users.'|t('redactor'),
    id: 'showHtmlButtonForNonAdmins',
    name: 'showHtmlButtonForNonAdmins',
    checked: field.showHtmlButtonForNonAdmins,
}) }}

{{ forms.checkboxField({
    label: 'Show unpermitted volumes'|t('app'),
    instructions: 'Whether to show volumes that the user doesn’t have permission to view.'|t('app'),
    id: 'showUnpermittedVolumes',
    name: 'showUnpermittedVolumes',
    checked: field.showUnpermittedVolumes,
}) }}

{{ forms.checkboxField({
    label: 'Show unpermitted files'|t('app'),
    instructions: 'Whether to show files that the user doesn’t have permission to view, per the “View files uploaded by other users” permission.'|t('app'),
    id: 'showUnpermittedFiles',
    name: 'showUnpermittedFiles',
    checked: field.showUnpermittedFiles,
}) }}

{{ forms.checkboxSelectField({
    id: 'availableVolumes',
    name: 'availableVolumes',
    label: 'Available Volumes'|t('redactor'),
    instructions: 'The volumes that should be available when selecting assets (if the selected config has an Image or File button).'|t('redactor'),
    options: volumeOptions,
    values: field.availableVolumes,
    showAllOption: volumeOptions|length ? true : false
}) }}

{{ forms.checkboxSelectField({
    id: 'availableTransforms',
    name: 'availableTransforms',
    label: 'Available Transforms'|t('redactor'),
    instructions: 'The transforms that should be available when inserting images.'|t('redactor'),
    options: transformOptions,
    values: field.availableTransforms,
    showAllOption: transformOptions|length ? true : false
}) }}

{{ forms.selectField({
    id: 'defaultTransform',
    name: 'defaultTransform',
    label: 'Default Transform'|t('redactor'),
    instructions: 'The default transform that should be applied when inserting images.'|t('redactor'),
    options: defaultTransformOptions,
    value: field.defaultTransform,
}) }}

<hr>
<a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('redactor') }}</a>
<div id="advanced" class="hidden">
    <div class="field">
        <div class="heading">
            <label>{{ "Clean up HTML"|t('redactor') }}</label>
            <div class="instructions">
                {{ "The cleanup actions that should be executed on save."|t('redactor') }}
            </div>
        </div>

        <div>
            {{ forms.checkbox({
                label: "Remove inline styles"|t('redactor'),
                id: 'removeInlineStyles',
                name: 'removeInlineStyles',
                checked: field.removeInlineStyles
            }) }}
        </div>

        <div>
            {{ forms.checkbox({
                label: "Remove empty tags"|t('redactor'),
                id: 'removeEmptyTags',
                name: 'removeEmptyTags',
                checked: field.removeEmptyTags
            }) }}
        </div>

        <div>
            {{ forms.checkbox({
                label: "Replace non-breaking spaces with regular spaces"|t('redactor'),
                id: 'removeNbsp',
                name: 'removeNbsp',
                checked: field.removeNbsp
            }) }}
        </div>
    </div>

    {{ forms.checkboxField({
        label: "Purify HTML"|t('redactor'),
        instructions: 'Removes any potentially-malicious code on save, by running the submitted data through <a href="http://htmlpurifier.org/" rel="noopener" target="_blank">HTML Purifier</a>.'|t('redactor'),
        warning: 'Disable this at your own risk!'|t('redactor'),
        id: 'purifyHtml',
        name: 'purifyHtml',
        checked: field.purifyHtml,
        toggle: 'purifier-config-container'
    }) }}

    <div id="purifier-config-container"{% if not field.purifyHtml %} class="hidden"{% endif %}>
        {{ forms.selectField({
            label: "HTML Purifier Config"|t('redactor'),
            instructions: "You can save custom {name} configs as {ext} files in {path}."|t('redactor', {
                name: 'HTML Purifier Config',
                ext: '`.json`',
                path: '`config/htmlpurifier/`'
            }) ~
            ' <a href="http://htmlpurifier.org/live/configdoc/plain.html" rel="noopener" target="_blank">'~"View available settings"|t('redactor')~'</a>',
            id: 'purifierConfig',
            name: 'purifierConfig',
            options: purifierConfigOptions,
            value: field.purifierConfig
        }) }}
    </div>

    {% if craft.app.db.isMysql %}
        {{ forms.selectField({
            label: "Column Type"|t('redactor'),
            id: 'column-type',
            name: 'columnType',
            instructions: "The type of column this field should get in the database."|t('redactor'),
            options: [
                { value: 'text', label: 'text (~64KB)' },
                { value: 'mediumtext', label: 'mediumtext (~16MB)' },
            ],
            value: field.columnType,
            warning: (field.id ? "Changing this may result in data loss."|t('redactor')),
        }) }}
    {% endif %}
</div>