{% include 'overall_header.html' %}

{% set switch_type = TOGGLECTRL_TYPE ?? (STYLECHANGER_TOGGLE_ACTIVATED ? 'toggle' : 'radio') %}

{% if STYLECHANGER_PERM_INFO %}
	<fieldset class="stylechanger-permission-info">{{ STYLECHANGER_PERM_INFO }}</fieldset>
{% endif %}

{% if STYLECHANGER_NOTES %}
	<div class="successbox stylechanger-notebox">{{ STYLECHANGER_NOTES }}</div>
{% endif %}

<h1 class="stylechanger-page-titel">{{ lang('ACP_STYLECHANGER') }}</h1>

<form id="acp_stylechanger" method="post" action="{{ U_ACTION }}">
	<fieldset{% if OVERRIDE_USER_STYLE_ACTIVATED %} class="override-user-style-activated"{% endif %}>
		<legend>{{ lang('ACP_STYLECHANGER_SETTINGS') }}</legend>
		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_ACTIVATE') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_ACTIVATE_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.switch('stylechanger_activated', STYLECHANGER_ACTIVATED, switch_type) }}
			</dd>
		</dl>

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_ADMINMODE') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_ADMINMODE_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.switch('stylechanger_adminmode', STYLECHANGER_ADMINMODE, switch_type) }}
			</dd>
		</dl>

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_FA_ICON') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_FA_ICON_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.switch('stylechanger_fa_icon_activated', STYLECHANGER_FA_ICON_ACTIVATED, switch_type) }}
			</dd>
		</dl>

		<dl id="stylechanger_font_icon">
			<dt>
				<label>{{ lang('STYLECHANGER_FONT_ICON') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_FONT_ICON_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input type="text" name="stylechanger_font_icon"
					id="sc_font_icon"
					maxlength="57"
					size="31"
					value="{{ STYLECHANGER_FONT_ICON }}"
					placeholder="{{ lang('STYLECHANGER_FONT_ICON') }}"
				>
				<span id="stylechanger-fa-icon-preview" class="icon {{ STYLECHANGER_FONT_ICON }}"></span>
			</dd>
		</dl>

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_UCP_USER_STYLE') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_UCP_USER_STYLE_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.switch('stylechanger_ucp_user_style', STYLECHANGER_UCP_USER_STYLE, switch_type) }}
			</dd>
		</dl>

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_TOGGLE_ACTIVATE') ~ lang('COLON') }}</label><br>
				{% if TOGGLECTRL_TYPE is defined %}
					<span class="stylechanger-toggle-explain-note">{{ lang('STYLECHANGER_TOGGLECTRL_ACTIVATED') }}</span>
				{% else %}
					<span>{{ lang('STYLECHANGER_TOGGLE_ACTIVATE_EXPLAIN') }}</span>
				{% endif %}
			</dt>
			<dd{% if TOGGLECTRL_TYPE is defined %} class="stylechanger-togglectrl-activated"{% endif %}>
				{{ _self.switch('stylechanger_toggle_activated', STYLECHANGER_TOGGLE_ACTIVATED, switch_type) }}
			</dd>
		</dl>
	</fieldset>

	<p class="submit-buttons">
		<input class="button1" type="submit" name="submit" value="{{ lang('SUBMIT') }}"{{ (OVERIDE_USERSTYLE_ACTIVATED) ? ' disabled' }}>&nbsp;
		<input class="button2" type="reset" name="form_reset" value="{{ lang('RESET') }}">
	</p>

	{{ S_FORM_TOKEN }}

	<p class="stylechanger-version-copy">{{ STYLECHANGER_VERSION_COPY }}</p>
</form>

{% INCLUDEJS '@kirk_stylechanger/js/sc_acp.js' %}
{% INCLUDECSS '@kirk_stylechanger/css/sc_acp.css' %}
{% if switch_type == 'toggle' %}
	{% INCLUDECSS '@kirk_stylechanger/css/sc_toggle_acp.css' %}
{% endif %}

{% include 'overall_footer.html' %}

{% macro switch(name, checked = false, type = 'toggle') -%}
	{% if type == 'toggle' || type == 'checkbox' -%}
		<input type="checkbox" class="{{ type }}" name="{{ name }}" value="1"{{ checked ? ' checked' }}>
	{%- elseif type == 'radio' -%}
		<label><input type="radio" class="radio" name="{{ name }}" value="1"{{ checked ? ' checked' }}> {{ lang('YES') }}</label>
		<label><input type="radio" class="radio" name="{{ name }}" value="0"{{ !checked ? ' checked' }}> {{ lang('NO') }}</label>
	{%- endif %}
{%- endmacro %}