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

{% set configInput %}
  <div class="flex">
    {{ forms.select({
      id: 'tinymceConfig',
      name: 'tinymceConfig',
      options: tinymceConfigOptions,
      value: field.tinymceConfig
    }) }}
  </div>
{% endset %}

{{ forms.field({
	label: "TinyMCE Config"|t('abm-tinymce'),
	id: 'config',
	instructions: "You can save custom Tinymce configs as `.json` files in `config/tinymce/`"|t('abm-tinymce'),
	required: true,
}, configInput) }}

{{ forms.checkboxField({
	label: 'Show the “HTML” button for non-admin users'|t('abm-tinymce'),
	instructions: 'Whether the “HTML” button should be visible for non-admin users.'|t('abm-tinymce'),
	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('abm-tinymce'),
	instructions: 'The volumes that should be available when selecting assets (if the selected config has an Image or File button).'|t('abm-tinymce'),
	options: volumeOptions,
	values: field.availableVolumes,
	showAllOption: volumeOptions|length ? true : false
}) }}

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

<hr>
<a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('abm-tinymce') }}</a>
<div id="advanced" class="hidden">
	<div class="field">
		<div class="heading">
		  <label>{{ "Clean up HTML"|t('abm-tinymce') }}</label>
		  <div class="instructions">
			{{ "The cleanup actions that should be executed on save."|t('abm-tinymce') }}
		  </div>
		</div>
	</div>
	{{ forms.checkboxField({
		label: "Purify HTML"|t('abm-tinymce'),
		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('abm-tinymce'),
		warning: 'Disable this at your own risk!'|t('abm-tinymce'),
		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('abm-tinymce'),
		  instructions: "You can save custom {name} configs as {ext} files in {path}."|t('abm-tinymce', {
			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('abm-tinymce')~'</a>',
		  id: 'purifierConfig',
		  name: 'purifierConfig',
		  options: purifierConfigOptions,
		  value: field.purifierConfig
		}) }}
	</div>
</div>