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

{{ forms.selectField({
    label: "Redactor Config"|t('redactor'),
    instructions: "You can save custom {name} configs as {ext} files in {path}."|t('redactor', {
            name: 'Redactor',
            ext: '`.json`',
            path: '`config/redactor/`'
        }) ~
        ' <a href="http://imperavi.com/redactor/docs/settings/" rel="noopener" target="_blank">'~"View available settings"|t('redactor')~'</a>',
    id: 'redactorConfig',
    name: 'redactorConfig',
    options: redactorConfigOptions,
    value: field.redactorConfig
}) }}

{{ 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.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: 'availableTransforms',
    name: 'availableTransforms',
    label: 'Available Transforms'|t('redactor'),
    instructions: 'The Transforms that should be available for Image selection.'|t('redactor'),
    options: transformOptions,
    values: field.availableTransforms,
    showAllOption: transformOptions|length ? true : false
}) }}


<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>