{% include 'overall_header.html' %}
{% INCLUDECSS '@vse_abbc3/acp_abbc3.css' %}

{% set links = {
	'faq': {
		'url': 'https://www.phpbb.com/customise/db/extension/advanced_bbcode_box/faq/1551',
		'text': lang('FAQ')
	},
	'media_embed': {
		'url': 'https://www.phpbb.com/customise/db/extension/mediaembed/',
		'text': lang('DOWNLOAD')
	}
} %}

{% macro external_link(url, text) -%}
	<a href="{{ url }}" target="_blank">
		<i class="icon fa-external-link fa-fw" aria-hidden="true"></i>
		{{ text -}}
	</a>
{%- endmacro %}

<img src="{{ ROOT_PATH }}ext/vse/abbc3/adm/images/abbc3logo.png" alt="{{ lang('ACP_ABBC3_MODULE') }}">
<p>{{ lang('ABBC3_SETTINGS_EXPLAIN', _self.external_link(links.faq.url, links.faq.text)) }}</p>

<form id="abbc3_settings" method="post" action="{{ U_ACTION }}" data-ajax="true">
	<fieldset>
		<legend>{{ lang('ABBC3_LEGEND_ICON_BAR') }}</legend>
		<dl>
			<dt><label for="abbc3_bbcode_bar">{{ lang('ABBC3_BBCODE_BAR') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_BBCODE_BAR_EXPLAIN') }}</span></dt>
			<dd><label><input type="radio" class="radio" name="abbc3_bbcode_bar" id="abbc3_bbcode_bar" value="1"{% if S_ABBC3_BBCODE_BAR %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="abbc3_bbcode_bar" value="0"{% if not S_ABBC3_BBCODE_BAR %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
		</dl>
		<dl>
			<dt><label for="abbc3_icons_type">{{ lang('ABBC3_ICONS_TYPE') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_ICONS_TYPE_EXPLAIN') }}</span></dt>
			<dd>
				<select name="abbc3_icons_type" id="abbc3_icons_type">{{ S_ABBC3_ICONS_TYPE }}</select>
				{% for ext in ['png', 'svg'] %}
					<div class="abbc3-bar abbc3-icons-{{ ext }} hidden">
						{% for button in ['bold', 'italic', 'underline', 'quote', 'code', 'listb', 'listo', 'listitem', 'img', 'url', 'fontcolor'] %}
							<span style="background-image:url('{{ ROOT_PATH }}ext/vse/abbc3/images/icons/{{ button }}.{{ ext }}')"></span>
						{% endfor %}
					</div>
				{% endfor %}
			</dd>
		</dl>
	</fieldset>
	<fieldset>
		<legend>{{ lang('ABBC3_LEGEND_ADD_ONS') }}</legend>
		<dl>
			<dt><label for="abbc3_qr_bbcodes">{{ lang('ABBC3_QR_BBCODES') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_QR_BBCODES_EXPLAIN') }}</span></dt>
			<dd><label><input type="radio" class="radio" name="abbc3_qr_bbcodes" id="abbc3_qr_bbcodes" value="1"{% if S_ABBC3_QR_BBCODES %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="abbc3_qr_bbcodes" value="0"{% if not S_ABBC3_QR_BBCODES %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
		</dl>
		<dl>
			<dt><label for="abbc3_pipes">{{ lang('ABBC3_PIPES') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_PIPES_EXPLAIN') }}</span></dt>
			<dd><label><input type="radio" class="radio" name="abbc3_pipes" id="abbc3_pipes" value="1"{% if S_ABBC3_PIPES %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="abbc3_pipes" value="0"{% if not S_ABBC3_PIPES %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
		</dl>
		<dl>
			<dt><label for="abbc3_auto_video">{{ lang('ABBC3_AUTO_VIDEO') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_AUTO_VIDEO_EXPLAIN') }}</span></dt>
			<dd><label><input type="radio" class="radio" name="abbc3_auto_video" id="abbc3_auto_video" value="1"{% if S_ABBC3_AUTO_VIDEO %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="abbc3_auto_video" value="0"{% if not S_ABBC3_AUTO_VIDEO %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
		</dl>
		<dl>
			<dt><label>{{ lang('ABBC3_BBVIDEO') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_BBVIDEO_EXPLAIN') }}</span></dt>
			<dd><span class="{{ S_ABBC3_MEDIA_EMBED ? 'success' : 'error' }}">{{ lang('ABBC3_MEDIA_EMBED_INSTALL', S_ABBC3_MEDIA_EMBED, _self.external_link(links.media_embed.url, links.media_embed.text)) }}</span></dd>
		</dl>
		<dl>
			<dt><label for="abbc3_google_fonts">{{ lang('ABBC3_GOOGLE_FONTS') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_GOOGLE_FONTS_INFO') }}{% if not S_ALLOW_CDN %}<br><br>{{ lang('ABBC3_GOOGLE_FONTS_NOTE') }}{% endif %}</span></dt>
			<dd><textarea id="abbc3_google_fonts" cols="40" rows="8" name="abbc3_google_fonts" placeholder="Roboto&#10;Droid Sans&#10;Noto Sans JP">{{ S_ABBC3_GOOGLE_FONTS }}</textarea></dd>
		</dl>
	</fieldset>
	<fieldset class="submit-buttons">
		<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}">&nbsp;
		<input class="button2" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}">
		{{ S_FORM_TOKEN }}
	</fieldset>
</form>

<script>
	const select = document.querySelector("select[name='abbc3_icons_type']");
	document.querySelector(".abbc3-icons-" + select.value).classList.toggle("hidden");
	select.addEventListener("change", () => {
		for (const bar of document.querySelectorAll(".abbc3-bar")) {
			bar.classList.toggle("hidden");
		}
	});
</script>

{% include 'overall_footer.html' %}