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

{% embed '_includes/forms/field.twig' with {
  label: 'CKEditor Config'|t('ckeditor'),
  id: 'cke-config',
  field: field,
} %}
  {% block input %}
    {% set addOptionFn %}
      (createOption, selectize) => {
        const slideout = new Craft.CpScreenSlideout('ckeditor/cke-configs/edit');
        slideout.on('submit', ev => {
          createOption({
              text: ev.data.name,
              value: ev.data.uid,
          });
        });
        slideout.on('close', () => {
          if (selectize.lastValidValue === '__add__') {
            selectize.lastValidValue = '';
          }
          selectize.focus();
        });
      }
    {% endset %}

    {% include '_includes/forms/selectize' with {
        name: 'ckeConfig',
        options: plugin('ckeditor').ckeConfigs.getAll()|map(ckeConfig => {
          label: ckeConfig.name,
          value: ckeConfig.uid,
        }),
        addOptionLabel: 'Create a new config…'|t('ckeditor'),
        value: field.ckeConfig,
    } %}
  {% endblock %}
{% endembed %}

{% embed '_includes/forms/field' with {
  label: 'Field Limit'|t('app'),
  instructions: "The maximum number of words or characters the field is allowed to have."|t('ckeditor'),
  id: 'field-limit',
  errors: field.getErrors(field.wordLimit ? 'wordLimit' : 'characterLimit')
} %}
  {% import "_includes/forms" as forms %}
  {% block input %}
    <div class="flex">
      {{ forms.text({
        id: 'fieldLimit',
        name: 'fieldLimit',
        value: field.wordLimit ?? field.characterLimit,
        size: 3,
      }) }}
      {{ forms.select({
        id: 'limitUnit',
        name: 'limitUnit',
        options: [
          { value: 'words', label: 'Words'|t('ckeditor') },
          { value: 'chars', label: 'Characters'|t('app') },
        ],
        value: field.characterLimit ? 'chars' : 'words'
      }) }}
    </div>
  {% endblock %}
{% endembed %}

{{ forms.lightswitchField({
  id: 'show-word-count',
  name: 'showWordCount',
  label: 'Show word count'|t('ckeditor'),
  on: field.showWordCount
}) }}

{% if userGroupOptions|length %}
<div id="source-editing-groups">
  {{ forms.checkboxSelectField({
    id: 'sourceEditingGroups',
    name: 'sourceEditingGroups',
    label: 'Who should see the “Source” button?'|t('ckeditor'),
    options: userGroupOptions,
    values: field.sourceEditingGroups,
    allLabel: 'All users'|t('app'),
    showAllOption: true,
  }) }}
</div>
{% endif %}

<hr>

<a class="fieldtoggle" data-target="assets">{{ 'Assets'|t('app') }}</a>
<div id="assets" class="hidden">
  {{ forms.checkboxSelectField({
    id: 'availableVolumes',
    name: 'availableVolumes',
    label: 'Available Volumes'|t('ckeditor'),
    instructions: 'The volumes that should be available when selecting 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 inserting images.'|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 inserting an image.'|t('ckeditor'),
    options: defaultTransformOptions,
    value: field.defaultTransform,
  }) }}

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

  {{ forms.checkboxField({
    label: 'Show unpermitted files'|t('ckeditor'),
    instructions: 'Whether to show files that the user doesn’t have permission to view, per the “View files uploaded by other users” permission.'|t('ckeditor'),
    id: 'showUnpermittedFiles',
    name: 'showUnpermittedFiles',
    checked: field.showUnpermittedFiles,
  }) }}
</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 {link}.'|t('ckeditor', {
      link: '<a href="http://htmlpurifier.org/" rel="noopener" target="_blank">HTML Purifier</a>',
    }),
    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>