{% include 'overall_header.html' %}

{% 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>
		<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.toggle_switch('stylechanger_activated', STYLECHANGER_ACTIVATED, STYLECHANGER_TOGGLE_ACTIVATED) }}
			</dd>
		</dl>

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

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_FA_ICON') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_FA_ICON_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.toggle_switch('stylechanger_fa_icon_activated', STYLECHANGER_FA_ICON_ACTIVATED, STYLECHANGER_TOGGLE_ACTIVATED) }}
			</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.toggle_switch('stylechanger_ucp_user_style', STYLECHANGER_UCP_USER_STYLE, STYLECHANGER_TOGGLE_ACTIVATED) }}
			</dd>
		</dl>

		<dl>
			<dt>
				<label>{{ lang('STYLECHANGER_TOGGLE_ACTIVATE') ~ lang('COLON') }}</label><br>
				<span>{{ lang('STYLECHANGER_TOGGLE_ACTIVATE_EXPLAIN') }}</span>
			</dt>
			<dd>
				{{ _self.toggle_switch('stylechanger_toggle_activated', STYLECHANGER_TOGGLE_ACTIVATED, STYLECHANGER_TOGGLE_ACTIVATED) }}
			</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 STYLECHANGER_TOGGLE_ACTIVATED %}
	{% INCLUDECSS '@kirk_stylechanger/css/sc_toggle_acp.css' %}
{% endif %}

{% include 'overall_footer.html' %}

{% macro toggle_switch(name, checked = true, toggle = true) %}
	{%- if toggle -%}
		<input type="checkbox" class="toggle" name="{{ name }}"{{ checked ? ' checked' }}>
	{%- else -%}
		<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 %}