{% INCLUDECSS '@hifikabin_headerlink/spectrum/spectrum.min.css' %}
{% INCLUDECSS '@hifikabin_headerlink/headerlink.css' %}
{% INCLUDEJS '@hifikabin_headerlink/spectrum/spectrum.min.js' %}
{% INCLUDEJS '@hifikabin_headerlink/headerlink.js' %}
{% INCLUDE 'overall_header.html' %}
<h1>{{ lang('ACP_HEADERLINK_CONFIG_EXPLAIN') }}</h1>

<form id="acp_board" method="post" action="{{ U_ACTION }}" class="headerlink-form" style="--headerlink-hover-bg: {{ HEADERLINK_HOVER_COLOUR }};">
	<fieldset>
		<legend>{{ lang('ACP_GENERAL_CONFIGURATION') }}</legend>
		<dl>
			<dt>
				<label for="headerlink_enable">{{ lang('ACP_HEADERLINK_ENABLE') ~ lang('COLON') }}</label>
			</dt>
			<dd>
				<input type="radio" class="radio" id="headerlink_enable" name="headerlink_enable" value="1"{% if HEADERLINK_ENABLE %} checked="checked"{% endif %}> {{ lang('YES') }} &nbsp;
				<input type="radio" class="radio" name="headerlink_enable" value="0"{% if not HEADERLINK_ENABLE %} checked="checked"{% endif %}> {{ lang('NO') }}
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_hover_colour">{{ lang('ACP_HEADERLINK_HOVER_COLOUR') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_HEADERLINK_HOVER_COLOUR_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input class="input-color" type="text" id="headerlink_hover_colour" name="headerlink_hover_colour" value="{{ HEADERLINK_HOVER_COLOUR }}">
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_navbar">{{ lang('ACP_HEADERLINK_NAVBAR') ~ lang('COLON') }}</label>
			</dt>
			<dd>
				<select name="headerlink_navbar" id="headerlink_navbar">
					<option value="0"{% if HEADERLINK_NAVBAR eq 0 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_ABOVE_BOARD') }}</option>
					<option value="1"{% if HEADERLINK_NAVBAR eq 1 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_IN_HEADER') }}</option>
					<option value="2"{% if HEADERLINK_NAVBAR eq 2 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_UNDER_HEADER') }}</option>
					<option value="3"{% if HEADERLINK_NAVBAR eq 3 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_IN_NAVBAR') }}</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_align">{{ lang('ACP_HEADERLINK_ALIGN') ~ lang('COLON') }}</label>
			</dt>
			<dd>
				<select name="headerlink_align" id="headerlink_align">
					<option value="0"{% if HEADERLINK_ALIGN eq 0 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ALIGN_START') }}</option>
					<option value="1"{% if HEADERLINK_ALIGN eq 1 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ALIGN_CENTER') }}</option>
					<option value="2"{% if HEADERLINK_ALIGN eq 2 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ALIGN_END') }}</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_responsive">{{ lang('ACP_HEADERLINK_RESPONSIVE') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_HEADERLINK_RESPONSIVE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select name="headerlink_responsive" id="headerlink_responsive">
					<option value="0"{% if HEADERLINK_RESPONSIVE eq 0 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_RESPONSIVE_NATURAL_CHOICE') }}</option>
					<option value="1"{% if HEADERLINK_RESPONSIVE eq 1 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_RESPONSIVE_WIDTH_CHOICE') }}</option>
					<option value="2"{% if HEADERLINK_RESPONSIVE eq 2 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_RESPONSIVE_AUTO_CHOICE') }}</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_responsive_width">{{ lang('ACP_HEADERLINK_RESPONSIVE_WIDTH_VAL') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_HEADERLINK_RESPONSIVE_WIDTH_VAL_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input id="headerlink_responsive_width" class="responsive-choice-{{ HEADERLINK_RESPONSIVE }}" name="headerlink_responsive_width" type="number" value="{{ HEADERLINK_RESPONSIVE_WIDTH }}" min="360">
			</dd>
		</dl>
	</fieldset>

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

	<fieldset>
		<legend>{{ lang('ACP_HEADERLINK_PREVIEW') }} <i class="fa fa-question-circle fa-fw i-preview" title="{{ lang('ACP_HEADERLINK_PREVIEW_EXPLAIN') }}"></i>
		</legend>
		<ul id="headerlink-preview" class="headerlink-preview {% if HEADERLINK_ALIGN eq 1 %}headerlink-center{% elseif HEADERLINK_ALIGN eq 2 %}headerlink-right{% else %}headerlink-end{% endif %}">
		{% for headerlink_url in headerlink_urls %}
			{% if headerlink_url.HEADERLINK_URL %}
			<li style="--headerlink-bg: {{ headerlink_url.HEADERLINK_BUTTON_COLOUR }}; --headerlink-text-color: {{ headerlink_url.HEADERLINK_TEXT_COLOUR }};{% if headerlink_url.HEADERLINK_ICON_SW eq 1 %} --headerlink-icon-color: {{ headerlink_url.HEADERLINK_ICON_COLOUR }};{% endif %}{% if headerlink_url.HEADERLINK_TEXT_SHADOW eq 1 %} --headerlink-text-shadow: {{ headerlink_url.HEADERLINK_TEXT_SHADOW_COLOUR }};{% endif %}" data-row="headerlink_row_{{ loop.index }}">
				<a href="{{ headerlink_url.HEADERLINK_URL }}"{% if headerlink_url.HEADERLINK_HOVER %} title="{{ headerlink_url.HEADERLINK_HOVER }}"{% endif %}{% if headerlink_url.HEADERLINK_TARGET eq 0 %} target="_blank"{% endif %}>
				{% if headerlink_url.HEADERLINK_ICON_SW eq 1 %}
					<i class="icon {{ headerlink_url.HEADERLINK_ICON }} fa-fw"></i>
				{% endif %}
				<span>{{ headerlink_url.HEADERLINK_NAME }}</span>
				</a>
			</li>
			{% endif %}
		{% endfor %}
		</ul>
	</fieldset>

	<fieldset id="headerlink_links">
		<legend>{{ lang('ACP_HEADERLINK_LINKS') }}</legend>
		{% for headerlink_url in headerlink_urls %}
		<fieldset id="headerlink_row_{{ loop.index }}" class="link-row">
			<legend class="headerlink-name-legend" title="{{ headerlink_url.HEADERLINK_HOVER }}" style="--headerlink-bg: {{ headerlink_url.HEADERLINK_BUTTON_COLOUR }}; --headerlink-text-color: {% if headerlink_url.HEADERLINK_TEXT_COLOUR %}{{ headerlink_url.HEADERLINK_TEXT_COLOUR }}{% else %}#105289{% endif %}; --headerlink-icon-color: {% if headerlink_url.HEADERLINK_ICON_COLOUR %}{{ headerlink_url.HEADERLINK_ICON_COLOUR }}{% else %}#105289{% endif %};{% if headerlink_url.HEADERLINK_TEXT_SHADOW eq 1 %} --headerlink-text-shadow: {{ headerlink_url.HEADERLINK_TEXT_SHADOW_COLOUR }};{% endif %}">
				<i class="icon {% if headerlink_url.HEADERLINK_ICON eq 1 %} {{ headerlink_url.HEADERLINK_ICON }}{% endif %} fa-fw"></i>
				<span>{% if headerlink_url.HEADERLINK_NAME %}{{ headerlink_url.HEADERLINK_NAME }}{% else %}{{ lang('ACP_HEADERLINK_DEFAULT_TITLE') }}{% endif %}</span>
			</legend>
			<dl>
				<dt>
					<label for="headerlink_url_{{ loop.index }}">{{ lang('ACP_HEADERLINK_URL') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_HEADERLINK_URL_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="headerlink_url_{{ loop.index }}" name="headerlink_url[]" type="url" value="{{ headerlink_url.HEADERLINK_URL }}" size="80">
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_name_{{ loop.index }}">{{ lang('ACP_HEADERLINK_NAME') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_HEADERLINK_NAME_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input class="headerlink_name_input" id="headerlink_name_{{ loop.index }}" name="headerlink_name[]" type="text" value="{{ headerlink_url.HEADERLINK_NAME }}" size="80">
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_hover_{{ loop.index }}">{{ lang('ACP_HEADERLINK_HOVER') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_HEADERLINK_HOVER_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="headerlink_hover_{{ loop.index }}" class="headerlink_hover" name="headerlink_hover[]" type="text" value="{{ headerlink_url.HEADERLINK_HOVER }}" size="80">
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_permission_{{ loop.index }}">{{ lang('ACP_HEADERLINK_PERMISSION') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<select id="headerlink_permission_{{ loop.index }}" name="headerlink_permission[]">
						<option value="0"{% if headerlink_url.HEADERLINK_PERMISSION eq 0 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_DISABLE') }}</option>
						<option value="1"{% if headerlink_url.HEADERLINK_PERMISSION eq 1 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_GUEST') }}</option>
						<option value="2"{% if headerlink_url.HEADERLINK_PERMISSION eq 2 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_MEMBER') }}</option>
						<option value="3"{% if headerlink_url.HEADERLINK_PERMISSION eq 3 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ACTIVE') }}</option>
						<option value="4"{% if headerlink_url.HEADERLINK_PERMISSION eq 4 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ADMIN') }}</option>
						<option value="5"{% if headerlink_url.HEADERLINK_PERMISSION eq 5 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_MOD') }}</option>
					</select>
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_target_{{ loop.index }}">{{ lang('ACP_HEADERLINK_TARGET') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<select id="headerlink_target_{{ loop.index }}" name="headerlink_target[]">
						<option value="0"{% if headerlink_url.HEADERLINK_TARGET eq 0 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_NEW') }}</option>
						<option value="1"{% if headerlink_url.HEADERLINK_TARGET eq 1 %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SAME') }}</option>
					</select>
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_text_colour_{{ loop.index }}">{{ lang('ACP_HEADERLINK_TEXT_COLOUR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input class="input-color predefined-color" data-css-var="--headerlink-text-color" type="text" id="headerlink_text_colour_{{ loop.index }}" name="headerlink_text_colour[]" data-text-color value="{% if headerlink_url.HEADERLINK_TEXT_COLOUR %}{{ headerlink_url.HEADERLINK_TEXT_COLOUR }}{% else %}#105289{% endif %}">
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="headerlink_button_colour_{{ loop.index }}">{{ lang('ACP_HEADERLINK_BUTTON_COLOUR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input class="input-color transparent" data-css-var="--headerlink-bg" type="text" name="headerlink_button_colour[]" id="headerlink_button_colour_{{ loop.index }}" value="{% if headerlink_url.HEADERLINK_BUTTON_COLOUR %}{{ headerlink_url.HEADERLINK_BUTTON_COLOUR }}{% else %}transparent{% endif %}">
				</dd>
			</dl>
			<dl data-has-toggler="text_shadow_{{ loop.index }}">
				<dt>
					<label for="headerlink_text_shadow_{{ loop.index }}">{{ lang('ACP_HEADERLINK_TEXT_SHADOW') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<select id="headerlink_text_shadow_{{ loop.index }}" name="headerlink_text_shadow[]">
						<option value="0"{% if headerlink_url.HEADERLINK_TEXT_SHADOW eq 0 %} selected="selected"{% endif %}>{{ lang('NO') }}</option>
						<option value="1"{% if headerlink_url.HEADERLINK_TEXT_SHADOW eq 1 %} selected="selected"{% endif %}>{{ lang('YES') }}</option>
					</select>
				</dd>
			</dl>
			<dl data-is-togglable="text_shadow_{{ loop.index }}">
				<dt>
					<label for="headerlink_text_shadow_colour_{{ loop.index }}">{{ lang('ACP_HEADERLINK_TEXT_SHADOW_COLOUR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input class="input-color transparent text-shadow" data-css-var="--headerlink-text-shadow" type="text" name="headerlink_text_shadow_colour[]" data-text-shadow id="headerlink_text_shadow_colour_{{ loop.index }}" value="{% if headerlink_url.HEADERLINK_TEXT_SHADOW_COLOUR %}{{ headerlink_url.HEADERLINK_TEXT_SHADOW_COLOUR }}{% else %}transparent{% endif %}">
				</dd>
			</dl>
			<dl data-has-toggler="icon_sw_{{ loop.index }}">
				<dt>
					<label for="headerlink_icon_sw_{{ loop.index }}">{{ lang('ACP_HEADERLINK_ICON') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_HEADERLINK_ICON_EXPLAIN') }}</span>
				</dt>
				<dd>
					<select id="headerlink_icon_sw_{{ loop.index }}" name="headerlink_icon_sw[]">
						<option value="0"{% if headerlink_url.HEADERLINK_ICON_SW eq 0 %} selected="selected"{% endif %}>{{ lang('NO') }}</option>
						<option value="1"{% if headerlink_url.HEADERLINK_ICON_SW eq 1 %} selected="selected"{% endif %}>{{ lang('YES') }}</option>
					</select>
				</dd>
			</dl>
			<dl data-is-togglable="icon_sw_{{ loop.index }}">
				<dt>
					<label for="headerlink_icon_{{ loop.index }}">{{ lang('ACP_HEADERLINK_ICON_CODE') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_HEADERLINK_ICON_CODE_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="headerlink_icon_{{ loop.index }}" class="input-fa-icon" name="headerlink_icon[]" type="text" value="{{ headerlink_url.HEADERLINK_ICON }}" size="18">
				</dd>
			</dl>
			<dl data-is-togglable="icon_sw_{{ loop.index }}">
				<dt>
					<label for="headerlink_icon_colour_{{ loop.index }}">{{ lang('ACP_HEADERLINK_ICON_COLOUR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input class="input-color predefined-color" data-css-var="--headerlink-icon-color" type="text" name="headerlink_icon_colour[]" data-icon-color id="headerlink_icon_colour_{{ loop.index }}" value="{% if headerlink_url.HEADERLINK_ICON_COLOUR %}{{ headerlink_url.HEADERLINK_ICON_COLOUR }}{% else %}#105289{% endif %}">
				</dd>
			</dl>
		</fieldset>
		{% endfor %}
	</fieldset>

	<p id="clone-link" class="submit-buttons">
		<input id="clone_btn" type="button" class="button2" value="{{ lang('ACP_HEADERLINK_MORE_LINKS') }}">
	</p>

	<p class="submit-buttons">
		{{ S_FORM_TOKEN }}
		<input class="button1" type="submit" name="submit" value="{{ lang('SUBMIT') }}">&nbsp;
		<input class="button2" type="reset" name="reset" value="{{ lang('RESET') }}">
	</p>
</form>
<script>
	const defaultLegendLang = "{{ lang('ACP_HEADERLINK_DEFAULT_TITLE')|e('js') }}";
</script>
{% INCLUDE 'overall_footer.html' %}