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

{{ forms.textareaField({
  label: 'Initialization Code'|t('ckeditor'),
  instructions: 'JavaScript code that should be used to initialize the editor, and then return it.'|t('ckeditor', {
    id: '`__EDITOR__`',
  }),
  id: 'init-js',
  name: 'initJs',
  value: field.initJs,
  class: 'code nicetext',
}) }}

<hr>
<a class="fieldtoggle" data-target="assets">{{ 'Assets (CKEditor 4 only)'|t('ckeditor') }}</a>
<div id="assets" class="hidden">
  {{ 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('ckeditor'),
    instructions: 'The volumes that should be available when browsing assets.'|t('ckeditor'),
    options: volumeOptions,
    values: field.availableVolumes,
    showAllOption: volumeOptions|length ? true : false
  }) }}

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

  {{ forms.selectField({
    id: 'defaultTransform',
    name: 'defaultTransform',
    label: 'Default Transform'|t('ckeditor'),
    instructions: 'The default transform that should be applied when browsing assets.'|t('ckeditor'),
    options: defaultTransformOptions,
    value: field.defaultTransform,
  }) }}
</div>

<hr>

<a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('ckeditor') }}</a>
<div id="advanced" class="hidden">
  {{ forms.checkboxField({
    label: "Purify HTML"|t('ckeditor'),
    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('ckeditor'),
    warning: 'Disable this at your own risk!'|t('ckeditor'),
    id: 'purify-html',
    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('ckeditor'),
        instructions: "You can save custom {name} configs as {ext} files in {path}."|t('ckeditor', {
          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('ckeditor')~'</a>',
        id: 'purifier-config',
        name: 'purifierConfig',
        options: purifierConfigOptions,
        value: field.purifierConfig
      }) }}
  </div>

  {% if craft.app.db.isMysql %}
    {{ forms.selectField({
      label: "Column Type"|t('ckeditor'),
      id: 'column-type',
      name: 'columnType',
      instructions: "The type of column this field should get in the database."|t('ckeditor'),
      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('ckeditor')),
    }) }}
  {% endif %}
</div>