<script>
	var form_name = 'postform';
	var text_name = {% if $SIG_EDIT %}'signature'{% else %}'message'{% endif %};
	var load_draft = false;
	var upload = false;

	// Define the bbCode tags
	var bbcode = new Array();
	var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[flash=]','[/flash]','[size=]','[/size]'{% for custom_tags in custom_tags %}, {{ custom_tags.BBCODE_NAME }}{% endfor %});
	var imageTag = false;

	function change_palette()
	{
		phpbb.toggleDisplay('colour_palette');
		var e = document.getElementById('colour_palette');

		var toggle = document.getElementById('bbpalette');
		if (!toggle || !e) {
			return;
		}

		var isOpen = (e.style.display == 'block');
		toggle.value = isOpen ? '{{ LA_FONT_COLOR_HIDE }}' : '{{ LA_FONT_COLOR }}';
		toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
	}
</script>

<script src="{{ T_THEME_PATH }}/vendors/editor.js"></script>

{% if S_BBCODE_ALLOWED %}
<div id="colour_palette" class="iz-editor__palette" style="display: none;">
	<h3 class="iz-h4">{{ L_FONT_COLOR }}{{ L_COLON }}</h3>
	<div
		id="color_palette_placeholder"
		data-orientation="h"
		data-height="12"
		data-width="15"
		data-bbcode="true"
	></div>
</div>

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

{% EVENT posting_editor_buttons_before %}

{% if not S_BBCODEORDER %}
<div id="imgurAnchor" class="iz-editor__toolbar" role="toolbar" aria-label="{{ L_BBCODE_GUIDE }}">

	{% EVENT posting_editor_buttons_toolbar_inner_before %}

	<div class="iz-editor__group" role="group" aria-label="{{ L_BBCODE_B_HELP }}">
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="b" name="addbbcode0" onclick="bbstyle(0);" title="{{ L_BBCODE_B_HELP }}">
			{{ L_BBCODE_B_HELP }}
		</button>
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="i" name="addbbcode2" onclick="bbstyle(2);" title="{{ L_BBCODE_I_HELP }}">
			{{ L_BBCODE_I_HELP }}
		</button>
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="u" name="addbbcode4" onclick="bbstyle(4);" title="{{ L_BBCODE_U_HELP }}">
			{{ L_BBCODE_U_HELP }}
		</button>
	</div>

	<div class="iz-editor__group iz-editor__group--desktop" role="group" aria-label="{{ L_BBCODE_L_HELP }}">
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="l" name="addbbcode10" onclick="bbstyle(10);" title="{{ L_BBCODE_L_HELP }}">
			{{ L_BBCODE_L_HELP }}
		</button>
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="o" name="addbbcode12" onclick="bbstyle(12);" title="{{ L_BBCODE_O_HELP }}">
			{{ L_BBCODE_O_HELP }}
		</button>
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="y" name="addlistitem" onclick="bbstyle(-1);" title="{{ L_BBCODE_LISTITEM_HELP }}">
			{{ L_BBCODE_LISTITEM_HELP }}
		</button>
	</div>

	<div class="iz-editor__group" role="group" aria-label="{{ L_BBCODE_C_HELP }}">
		<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="c" name="addbbcode8" onclick="bbstyle(8);" title="{{ L_BBCODE_C_HELP }}">
			{{ L_BBCODE_C_HELP }}
		</button>

		{% if S_BBCODE_QUOTE %}
			<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="q" name="addbbcode6" onclick="bbstyle(6);" title="{{ L_BBCODE_Q_HELP }}">
				{{ L_BBCODE_Q_HELP }}
			</button>
		{% endif %}

		{% if S_BBCODE_IMG %}
			<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="p" name="addbbcode14" onclick="bbstyle(14);" title="{{ L_BBCODE_P_HELP }}">
				{{ L_BBCODE_P_HELP }}
			</button>
		{% endif %}

		{% if S_LINKS_ALLOWED %}
			<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" accesskey="w" name="addbbcode16" onclick="bbstyle(16);" title="{{ L_BBCODE_W_HELP }}">
				{{ L_BBCODE_W_HELP }}
			</button>
		{% endif %}
	</div>

	<div class="iz-editor__group iz-editor__group--desktop" role="group" aria-label="{{ L_FONT_COLOR }}">
		<!-- flash no mooorrreeeeee -->
		<input
			class="iz-btn iz-btn--ghost iz-btn--sm"
			type="button"
			name="bbpalette"
			id="bbpalette"
			value="{{ L_FONT_COLOR }}"
			onclick="change_palette();"
			title="{{ L_BBCODE_S_HELP }}"
			aria-controls="colour_palette"
			aria-expanded="false"
		/>

		{% EVENT posting_editor_buttons_custom_tags_before %}

		{% for custom_tags in custom_tags %}
		{% if custom_tags.BBCODE_TAG == 'youtube' %}
			<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" name="addbbcode{{ custom_tags.BBCODE_ID }}" onclick="bbstyle({{ custom_tags.BBCODE_ID }});" title="{{ custom_tags.BBCODE_HELPLINE }}">
				{{ custom_tags.BBCODE_TAG }}
			</button>
		{% endif %}
		{% endfor %}

		{% for custom_tags in custom_tags %}
		{% if custom_tags.BBCODE_TAG == 'c' %}
			<button class="iz-btn iz-btn--ghost iz-btn--sm" type="button" name="addbbcode{{ custom_tags.BBCODE_ID }}" onclick="bbstyle({{ custom_tags.BBCODE_ID }});" title="{{ custom_tags.BBCODE_HELPLINE }}">
				{{ custom_tags.BBCODE_TAG }}
			</button>
		{% endif %}
		{% endfor %}
	</div>

	<div class="iz-editor__controls iz-editor__controls--desktop">
		<label class="iz-visually-hidden" for="iz-font-size">{{ L_BBCODE_F_HELP }}</label>
		<select
			id="iz-font-size"
			class="iz-select"
			name="addbbcode20"
			onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;"
			title="{{ L_BBCODE_F_HELP }}"
		>
			<option value="50">{{ L_FONT_TINY }}</option>
			<option value="85">{{ L_FONT_SMALL }}</option>
			<option value="100" selected="selected">{{ L_FONT_NORMAL }}</option>
			{% if not MAX_FONT_SIZE or MAX_FONT_SIZE >= 150 %}
				<option value="150">{{ L_FONT_LARGE }}</option>
				{% if not MAX_FONT_SIZE or MAX_FONT_SIZE >= 200 %}
					<option value="200">{{ L_FONT_HUGE }}</option>
				{% endif %}
			{% endif %}
		</select>

		<label class="iz-visually-hidden" for="iz-bbcodes">{{ L_BBCODES }}</label>
		<select
			id="iz-bbcodes"
			class="iz-select"
			name="addbbcode_custom"
			onchange="bbstyle(this.form.addbbcode_custom.options[this.form.addbbcode_custom.selectedIndex].value*1);this.form.addbbcode_custom.selectedIndex = 0;"
		>
			<option value="100" selected="selected">{{ L_BBCODES }}</option>
			{% for custom_tags in custom_tags %}
				<option value="{{ custom_tags.BBCODE_ID }}" title="{{ custom_tags.BBCODE_HELPLINE }}">{{ custom_tags.BBCODE_TAG }}</option>
			{% endfor %}
		</select>
	</div>

	{% EVENT posting_editor_buttons_toolbar_inner_after %}
</div>
{% endif %}

{% EVENT posting_editor_buttons_after %}
{% endif %}
