<fieldset class="iz-fieldset">

	{% if ERROR %}
		<div class="iz-alert iz-alert--info" role="status">
			{{ ERROR }}
		</div>
	{% endif %}

	{% if S_SHOW_TOPIC_ICONS or S_SHOW_PM_ICONS %}
		<div class="iz-field iz-only-desktop">
			<div class="iz-label">{{ L_ICON }}{{ L_COLON }}</div>

			<div class="iz-choicegroup" role="radiogroup" aria-label="{{ L_ICON }}">
				<div class="iz-choice">
					<input type="radio" name="icon" id="icon" value="0" checked="checked" tabindex="1">
					<label for="icon">{% if S_SHOW_TOPIC_ICONS %}{{ L_NO_TOPIC_ICON }}{% else %}{{ L_NO_PM_ICON }}{% endif %}</label>
				</div>

				{% for topic_icon in topic_icon %}
					<div class="iz-choice">
						<input type="radio" name="icon" id="icon-{{ topic_icon.ICON_ID }}" value="{{ topic_icon.ICON_ID }}" {{ topic_icon.S_ICON_CHECKED }} tabindex="1">
						<label for="icon-{{ topic_icon.ICON_ID }}">
							<img src="{{ topic_icon.ICON_IMG }}" width="{{ topic_icon.ICON_WIDTH }}" height="{{ topic_icon.ICON_HEIGHT }}" alt="{{ topic_icon.ICON_ALT }}" title="{{ topic_icon.ICON_ALT }}" />
						</label>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endif %}

	{% if not S_PRIVMSGS and S_DISPLAY_USERNAME %}
		<div class="iz-field">
			<label class="iz-label" for="username">{{ L_USERNAME }}{{ L_COLON }}</label>
			<input type="text" class="iz-input" tabindex="1" name="username" id="username" value="{{ USERNAME }}">
		</div>
	{% endif %}

	{% EVENT posting_editor_subject_before %}

	{% if S_POST_ACTION or S_PRIVMSGS or S_EDIT_DRAFT %}
		<div class="iz-field">
			<label class="iz-label" for="subject">{{ L_SUBJECT }}{{ L_COLON }}</label>

			{% EVENT posting_editor_subject_prefix %}
			<input
				type="text"
				class="iz-input"
				placeholder="{{ L_SUBJECT }}{{ L_COLON }}"
				name="subject"
				id="subject"
				maxlength="{% if S_NEW_MESSAGE %}100{% else %}124{% endif %}"
				tabindex="2"
				value="{{ SUBJECT }}{{ DRAFT_SUBJECT }}"
			/>
			{% EVENT posting_editor_subject_postfix %}
		</div>

		{% if CAPTCHA_TEMPLATE and S_CONFIRM_CODE %}
			{% set CAPTCHA_TAB_INDEX = 3 %}
			{% include '{{ CAPTCHA_TEMPLATE }}' %}
		{% endif %}
	{% endif %}

	{% EVENT posting_editor_subject_after %}

	{% include 'posting_buttons.html' %}

	<div class="iz-space iz-space--sm"></div>

	<div class="iz-grid iz-grid--editor">
		{% EVENT posting_editor_message_before %}

		<div class="iz-editor">
			<span id="dragNdrop">
				<textarea
					class="iz-textarea iz-textarea--editor"
					rows="10"
					{% if S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT %}name="signature" id="signature"{% else %}name="message" id="message"{% endif %}
					tabindex="4"
					onselect="storeCaret(this);"
					onclick="storeCaret(this);"
					onkeyup="storeCaret(this);"
					onfocus="initInsertions();"
				>{{ MESSAGE }}{{ DRAFT_MESSAGE }}{{ IMGUR_IMAGE }}{{ GYAZO_IMAGE }}{{ SIGNATURE }}</textarea>
			</span>
		</div>

		{% EVENT posting_editor_message_after %}

		<aside class="iz-editor__aside">
			{% EVENT posting_editor_smilies_before %}
			{% if S_SMILIES_ALLOWED and .smiley %}
				<div class="iz-block">
					<div class="iz-block__title">
						<strong>{{ L_SMILIES }}</strong>
						{% if S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED %}
							<a class="iz-btn iz-btn--link iz-btn--sm" href="{{ U_MORE_SMILIES }}"
							   onclick="popup(this.href, 450, 350, '_phpbbsmilies'); return false;"
							   title="{{ L_MORE_SMILIES }}">
								{{ L_MORE_SMILIES }}
							</a>
						{% endif %}
					</div>

					<div class="iz-smilies">
						{% for smiley in smiley %}
							<a class="iz-smiley" href="#"
							   onclick="insert_text('{{ smiley.A_SMILEY_CODE }}', true); return false;">
								<img src="{{ smiley.SMILEY_IMG }}" width="{{ smiley.SMILEY_WIDTH }}" height="{{ smiley.SMILEY_HEIGHT }}" alt="{{ smiley.SMILEY_CODE }}" title="{{ smiley.SMILEY_DESC }}" />
							</a>
						{% endfor %}
					</div>
				</div>
			{% endif %}
			{% EVENT posting_editor_smilies_after %}

			<div class="iz-only-desktop">
				{% if BBCODE_STATUS %}
					<div class="iz-prose">
						{{ BBCODE_STATUS }}<br />
						{% if S_BBCODE_ALLOWED %}
							{{ IMG_STATUS }}<br />
							{{ URL_STATUS }}<br />
						{% endif %}
						{{ SMILIES_STATUS }}
					</div>
				{% endif %}

				{% if S_EDIT_DRAFT || S_DISPLAY_REVIEW %}
					<div class="iz-prose">
						{% if S_EDIT_DRAFT %}<strong><a class="iz-link" href="{{ S_UCP_ACTION }}">{{ L_BACK_TO_DRAFTS }}</a></strong>{% endif %}
						{% if S_DISPLAY_REVIEW %}<strong><a class="iz-link" href="#topic-review">{{ L_TOPIC_REVIEW }}</a></strong>{% endif %}
					</div>
				{% endif %}
			</div>
		</aside>
	</div>

	{% EVENT posting_editor_message_append %}
</fieldset>

{% if $EXTRA_POSTING_OPTIONS == 1 %}

	{% if S_COMPOSE_PM %}
	</div> <!-- // needed for posting_pm_layout.html to close the tabbed panel -->
	{% endif %}

	<div class="iz-space iz-space--sm"></div>

	{% if not S_SHOW_DRAFTS and not $SIG_EDIT == 1 %}
		<fieldset class="iz-actions">
			{{ S_HIDDEN_ADDRESS_FIELD }}
			{{ S_HIDDEN_FIELDS }}

			{% EVENT posting_editor_submit_buttons %}

			{% if S_HAS_DRAFTS %}
				<button type="submit" class="iz-btn iz-btn--ghost" accesskey="d" tabindex="8"
				        name="load" value="{{ L_LOAD_DRAFT }}" onclick="load_draft = true;">
					{{ L_LOAD_DRAFT }}
				</button>
			{% endif %}

			{% if S_SAVE_ALLOWED %}
				<button type="submit" class="iz-btn iz-btn--ghost" accesskey="k" tabindex="7"
				        name="save" value="{{ L_SAVE_DRAFT }}">
					{{ L_SAVE_DRAFT }}
				</button>
			{% endif %}

			<button type="submit" class="iz-btn iz-btn--ghost" tabindex="5"
			        name="preview" value="{{ L_PREVIEW }}"{% if not S_PRIVMSGS %} onclick="document.getElementById('postform').action += '#preview';"{% endif %}>
				{{ L_PREVIEW }}
			</button>

			<button type="submit" class="iz-btn iz-btn--primary" accesskey="s" tabindex="6" name="post" value="{{ L_SUBMIT }}">
				{{ L_SUBMIT }}
			</button>
		</fieldset>
	{% endif %}

	<div class="iz-space iz-space--sm"></div>

	{% if S_SHOW_ATTACH_BOX and FILTERS %}
	<script>
	(function () {
		'use strict';

		function addClass(el, cls) { if (el) el.classList.add(cls); }
		function removeClass(el, cls) { if (el) el.classList.remove(cls); }

		window.addEventListener('load', function () {
			var btn = document.getElementById('ToggleTxTDrop');
			var msg = document.getElementById('message');
			var wrap = document.getElementById('dragNdrop');

			if (!btn || !msg || !wrap) return;

			btn.addEventListener('click', function () {
				// Maintain previous behavior: add “dropzone” marker classes when switching to attachments.
				addClass(msg, 'dropzone-wrap');
				addClass(wrap, 'dropzone-content');
			});

			msg.addEventListener('focus', function () {
				removeClass(msg, 'dropzone-wrap');
				removeClass(wrap, 'dropzone-content');
			});
		});
	})();
	</script>
	{% endif %}

	<!-- Panels below editor: convert Bootstrap tabs to native disclosures -->
	<section class="iz-panels"
		{% if S_SHOW_DRAFTS and not S_SHOW_ATTACH_BOX %}style="display:none;"{% endif %}>

		<details class="iz-disclosure" {% if not IMGUR_DELETEHASH and not GYAZO_DIRECT_LINK and not S_SHOW_DRAFTS %}open{% endif %}>
			<summary class="iz-disclosure__summary">
				{{ L_OPTIONS }}
			</summary>

			<div class="iz-disclosure__panel" id="options-panel-below">
				{% if not S_SHOW_DRAFTS and not $SIG_EDIT == 1 %}
					<fieldset class="iz-fieldset">
						{% EVENT posting_editor_options_prepend %}

						{% if S_BBCODE_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="disable_bbcode" id="disable_bbcode"{{ S_BBCODE_CHECKED }}>
								<label for="disable_bbcode">{{ L_DISABLE_BBCODE }}</label>
							</div>
						{% endif %}

						{% if S_SMILIES_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="disable_smilies" id="disable_smilies"{{ S_SMILIES_CHECKED }}>
								<label for="disable_smilies">{{ L_DISABLE_SMILIES }}</label>
							</div>
						{% endif %}

						{% if S_LINKS_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="disable_magic_url" id="disable_magic_url"{{ S_MAGIC_URL_CHECKED }}>
								<label for="disable_magic_url">{{ L_DISABLE_MAGIC_URL }}</label>
							</div>
						{% endif %}

						{% if S_SIG_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="attach_sig" id="attach_sig"{{ S_SIGNATURE_CHECKED }}>
								<label for="attach_sig">{{ L_ATTACH_SIG }}</label>
							</div>
						{% endif %}

						{% if S_NOTIFY_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="notify" id="notify"{{ S_NOTIFY_CHECKED }}>
								<label for="notify">{{ L_NOTIFY_REPLY }}</label>
							</div>
						{% endif %}

						{% if S_LOCK_TOPIC_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="lock_topic" id="lock_topic"{{ S_LOCK_TOPIC_CHECKED }}>
								<label for="lock_topic">{{ L_LOCK_TOPIC }}</label>
							</div>
						{% endif %}

						{% if S_LOCK_POST_ALLOWED %}
							<div class="iz-choice">
								<input type="checkbox" name="lock_post" id="lock_post"{{ S_LOCK_POST_CHECKED }}>
								<label for="lock_post">{{ L_LOCK_POST }}&nbsp;&#91;{{ L_LOCK_POST_EXPLAIN }}&#93;</label>
							</div>
						{% endif %}

						{% if S_TYPE_TOGGLE or S_TOPIC_TYPE_ANNOUNCE or S_TOPIC_TYPE_STICKY %}
							<hr class="iz-divider" />
						{% endif %}

						{% if S_SOFTDELETE_ALLOWED or S_DELETE_ALLOWED %}
							{% if S_SOFTDELETE_ALLOWED %}
								<div class="iz-choice">
									<input type="checkbox" name="delete" id="delete" {{ S_SOFTDELETE_CHECKED }}>
									<label for="delete">{{ L_DELETE_POST_SOFT }}&nbsp;&#91;{{ L_DELETE_POST_SOFT_WARN }}&#93;</label>
								</div>
							{% endif %}
							{% if S_DELETE_ALLOWED %}
								<div class="iz-choice">
									<input type="checkbox" name="delete_permanent" id="delete_permanent">
									<label for="delete_permanent">{{ L_DELETE_POST_PERMANENT }}&nbsp;&#91;{{ L_DELETE_POST_PERMANENT_WARN }}&#93;</label>
								</div>
							{% endif %}
							<hr class="iz-divider" />
						{% endif %}

						{% if S_TYPE_TOGGLE %}
							<div class="iz-field">
								<div class="iz-label">
									{% if S_EDIT_POST %}{{ L_CHANGE_TOPIC_TO }}{% else %}{{ L_POST_TOPIC_AS }}{% endif %}{{ L_COLON }}
								</div>

								<div class="iz-choicegroup">
									{% for topic_type in topic_type %}
										<div class="iz-choice">
											<input type="radio" name="topic_type" id="topic_type-{{ topic_type.VALUE }}" value="{{ topic_type.VALUE }}"{{ topic_type.S_CHECKED }}>
											<label for="topic_type-{{ topic_type.VALUE }}">{{ topic_type.L_TOPIC_TYPE }}</label>
										</div>
									{% endfor %}
								</div>
							</div>
						{% endif %}

						{% if S_TOPIC_TYPE_ANNOUNCE or S_TOPIC_TYPE_STICKY %}
							<div class="iz-field">
								<label class="iz-label" for="topic_time_limit">{{ L_STICK_TOPIC_FOR }}{{ L_COLON }}</label>
								<p class="iz-hint">{{ L_STICK_TOPIC_FOR_EXPLAIN }}</p>

								<div class="iz-inputgroup">
									<input type="number" class="iz-input" min="0" max="999" name="topic_time_limit" id="topic_time_limit" value="{{ TOPIC_TIME_LIMIT }}">
									<span class="iz-inputgroup__addon">{{ L_DAYS }}</span>
								</div>
							</div>
						{% endif %}

						{% if S_EDIT_REASON %}
							<div class="iz-field">
								<label class="iz-label" for="edit_reason">{{ L_EDIT_REASON }}{{ L_COLON }}</label>
								<input type="text" class="iz-input" placeholder="{{ L_EDIT_LINK_PLACEHOLDER }}" name="edit_reason" id="edit_reason" value="{{ EDIT_REASON }}">
							</div>
						{% endif %}

						{% EVENT posting_editor_options_append %}
					</fieldset>
				{% endif %}
			</div>
		</details>

		{% if S_SHOW_ATTACH_BOX and FILTERS %}
			<details class="iz-disclosure" {% if S_SHOW_DRAFTS %}open{% endif %}>
				<summary class="iz-disclosure__summary" id="ToggleTxTDrop">
					{{ L_ADD_ATTACHMENT }}
				</summary>
				<div class="iz-disclosure__panel">
					{% include 'posting_attach_body.html' %}
				</div>
			</details>
		{% endif %}

		{% if SCRIPT_NAME == "posting" and IN_IMGUR %}
			<details class="iz-disclosure" {% if IMGUR_DELETEHASH %}open{% endif %}>
				<summary class="iz-disclosure__summary">{{ L_IMGUR_UPLOAD_TITLE }}</summary>
				<div class="iz-disclosure__panel" id="posting-imgur-html">
					{% include 'posting_imgur_body.html' %}
				</div>
			</details>
		{% endif %}

		{% if SCRIPT_NAME == "posting" and IN_GYAZO %}
			<details class="iz-disclosure" {% if GYAZO_DIRECT_LINK %}open{% endif %}>
				<summary class="iz-disclosure__summary">{{ L_GYAZO_UPLOAD_TITLE }}</summary>
				<div class="iz-disclosure__panel" id="posting-gyazo-html">
					{% include 'posting_gyazo_body.html' %}
				</div>
			</details>
		{% endif %}

		{% if S_SHOW_POLL_BOX || S_POLL_DELETE %}
			<details class="iz-disclosure">
				<summary class="iz-disclosure__summary">{{ L_ADD_POLL }}</summary>
				<div class="iz-disclosure__panel" id="posting-poll-html">
					{% include 'posting_poll_body.html' %}
				</div>
			</details>
		{% endif %}

		{% EVENT posting_editor_add_panel_tab %}
	</section>

{% endif %}
