{% import 'ef_macros.html' as ef_macros %}

{% set config = field.config %}

<div {{ field.form_group_attributes }}>
	{{ ef_macros.standard_label(field) }}

	{% if field.form_type == formtype.VERTICAL %}
		{{ ef_macros.standard_help_text(field) }}
	{% endif %}

	<div class="{{ field.input_column_class }}">
		<div {% if field.style == styles.BOOTSTRAP_4 and field.error %}class="{{ field.input_classes }}" style="padding:0;"{% endif %}>
			<textarea class="{{ field.input_classes }}" name="{{ field.name }}"
					  id="{{ field.id }}" placeholder="{{ field.placeholder|sn }}" rows="{{ field.rows }}"
					  {% if field.readonly %}readonly{% endif %}>{{ field.value|sn }}</textarea>
		</div>
		{% if field.form_type != formtype.VERTICAL %}
			{{ ef_macros.bs4_help_text(field) }}
		{% endif %}
		{{ ef_macros.bs4_error(field) }}
	</div>
	
	{{ ef_macros.bs3_error(field) }}

	{% if field.form_type != formtype.VERTICAL %}
		{{ ef_macros.bs3_help_text(field) }}
	{% endif %}

	<script src="{{ config.ckeditor_url }}"></script>
	<script>
		{#
		{% if field.no_smiley or field.no_image %}
			CKEDITOR.config.removePlugins = "";
		{% endif %}

		CKEDITOR.replace("{{ field.id }}", {removePlugins: "{% if field.no_smiley %}smiley,{% endif %}{% if field.no_image %}image,{% endif %}codesnippet"});
		#}

		var editor = CKEDITOR.replace("{{ field.id }}", {
			{% if config.filemanager_url %}
				filebrowserBrowseUrl: "{{ config.filemanager_url }}",
			{% endif %}
			{% if config.extra_allowed_content %}
				extraAllowedContent: "{{ config.extra_allowed_content }}",
			{% endif %}
			{% if config.disallowed_content %}
				disallowedContent: "{{ config.disallowed_content }}",
			{% endif %}
			{% if config.custom_styles_js_url %}
				stylesSet: "default:{{ config.custom_styles_js_url }}",
			{% endif %}
			{% if config.custom_contents_css_url %}
				contentsCss: "{{ config.custom_contents_css_url }}",
			{% endif %}
			removeButtons: "{{ config.remove_buttons }}",
			extraPlugins: "{{ config.extra_plugins }}",
			removePlugins: "{{ config.remove_plugins }}",
			{% if field.get_height() %}height: "{{ field.get_height() }}",{% endif %}
			format_tags: "{{ config.format_tags }}",
			entities_latin: {{ 'true' if config.entities_latin else 'false' }},
			forcePasteAsPlainText: {{ 'true' if config.force_paste_as_plain_text else 'false' }}
		});
		
		{% if field.on_change %}
			editor.on("change", {{ field.on_change }});
		{% endif %}

		{# Filemanager integration #}
		{% if config.filemanager_iframe %}
			CKEDITOR.on('dialogDefinition', function (event) {
				var editor = event.editor;
				var dialogDefinition = event.data.definition;
				var dialogName = event.data.name;

				var cleanUpFuncRef = CKEDITOR.tools.addFunction(function () {
					// Do the clean-up of filemanager here (called when an image was selected or cancel was clicked)
					$('#fm-iframe-{{ field.id }}').remove();
					$("body").css("overflow-y", "scroll");
				});

				var tabCount = dialogDefinition.contents.length;
				for (var i = 0; i < tabCount; i++) {
					if (dialogDefinition.contents[i]) {
						var browseButton = dialogDefinition.contents[i].get('browse');

						if (browseButton !== null) {
							browseButton.hidden = false;
							browseButton.onClick = function (dialog, i) {
								editor._.filebrowserSe = this;
								var iframe = $("<iframe id='fm-iframe-{{ field.id }}' class='fm-modal'/>").attr({
									src: '{{ config.filemanager_url }}' +
									'?CKEditorFuncNum=' + CKEDITOR.instances[event.editor.name]._.filebrowserFn +
									'&CKEditorCleanUpFuncNum=' + cleanUpFuncRef +
									'&langCode=en' +
									'&CKEditor=' + event.editor.name
								});

								// CSS
								iframe.css('z-index', '10011');
								iframe.css('width', '80%');
								iframe.css('height', '80%');
								iframe.css('top', '10%');
								iframe.css('left', '10%');
								iframe.css('border', '0');
								iframe.css('position', 'fixed');
								iframe.css('-moz-box-shadow', '0px 1px 5px 0px #656565');
								iframe.css('-webkit-box-shadow', '0px 1px 5px 0px #656565');
								iframe.css('-o-box-shadow', '0px 1px 5px 0px #656565');
								iframe.css('box-shadow', '0px 1px 5px 0px #656565');

								$("body").append(iframe);
								$("body").css("overflow-y", "hidden");  // Get rid of possible scrollbars in containing document
							}
						}
					}
				}
			});
		{% endif %}
	</script>
</div>
