{% INCLUDEJS '@hifikabin_headerlink/jscolor.js' %}
{% INCLUDE 'overall_header.html' %}
<h1>{{ lang('ACP_HEADERLINK_CONFIG_EXPLAIN') }}</h1>
<script>
	function clone_this(id)
	{ 
		var tableRow = document.getElementById(id);
		var tableRowClone = tableRow.cloneNode(true);
		$('input', tableRowClone).val("");
		tableRow.parentNode.appendChild(tableRowClone, tableRow.previousSibling);
	}
</script>
</br>
{% for headerlink_urls in loops.headerlink_urls %}
<li style="display: block; margin: 0 3px; float: left; position: relative; padding: 8px; border-radius:10px; background:{{ headerlink_urls.HEADERLINK_BUTTON_COLOUR }}">
	{% if  headerlink_urls.HEADERLINK_TARGET eq '0' %}
	<a href="{{ headerlink_urls.HEADERLINK_URL }}" title="{{ headerlink_urls.HEADERLINK_HOVER }}" target="_blank">
	{% else %}
	<a href="{{ headerlink_urls.HEADERLINK_URL }}" title="{{ headerlink_urls.HEADERLINK_HOVER }}">
	{% endif %}
	{% if headerlink_urls.HEADERLINK_ICON_SW eq '1' %}
	<i style="color:{{ headerlink_urls.HEADERLINK_ICON_COLOUR }}"; class="icon {{ headerlink_urls.HEADERLINK_ICON }} fa-fw"></i>
	{% endif %}
	{% if headerlink_urls.HEADERLINK_TEXT_SHADOW eq '1' %}
	<span style="color:{{ headerlink_urls.HEADERLINK_TEXT_COLOUR }}; text-shadow: 2px 2px {{ headerlink_urls.HEADERLINK_TEXT_SHADOW_COLOUR }}">{{ headerlink_urls.HEADERLINK_NAME }}</span>
	{% else %}
	<span style="color:{{ headerlink_urls.HEADERLINK_TEXT_COLOUR }}">{{ headerlink_urls.HEADERLINK_NAME }}</span>
	{% endif %}</a>
</li>
{% endfor %}
<br style="margin-bottom:14px;"/>
<form id="acp_board" method="post" action="{{ U_ACTION }}">
	<fieldset>
		<dl>
			<dt><label for="headerlink_enable">{{ lang('ACP_HEADERLINK_ENABLE') }}</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" id="headerlink_enable" 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><br>
				<input class="jscolor {hash:true}" name="headerlink_hover_colour" type="text" id="headerlink_hover_colour" value="{{ HEADERLINK_HOVER_COLOUR }}" size="8" maxlength="8" />
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="headerlink_navbar">{{ lang('ACP_HEADERLINK_NAVBAR') }}</label>
			</dt>
			<dd>
				<select name="headerlink_navbar" id="headerlink_navbar">
				<option value="1"{% if HEADERLINK_NAVBAR eq '1' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_IN_HEADER') }}</option>
				<option value="3"{% if HEADERLINK_NAVBAR eq '3' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SWITCH_IN_NAVBAR') }}</option>
				</select>
			</dd>
		</dl>
	</fieldset>
	<p class="submit-buttons">
		{{ S_FORM_TOKEN }}
		<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') }}" />
	</p>
	<fieldset>
		<dl>
			<dt>
				<h1>{{ lang('ACP_HEADERLINK_INSTRUCTIONS') }}</h1>
				<br style="margin-bottom:4px;"/>
				{{ lang('ACP_HEADERLINK_NOTES') }}
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_URL') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_URL_EXPLAIN') }}
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_NAME') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_NAME_EXPLAIN') }}
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_HOVER') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_HOVER_EXPLAIN') }}
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_ICON') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_ICON_EXPLAIN') }}</br>
				<div style="text-align:center; border-radius: 10px; background-color: #59A7FF;  width:70px; height:20px; padding: 5px; margin: 5px;""><a href="http://fontawesome.io/icons/" target="_blank">{{ lang('ACP_HEADERLINK_ICON') }}</a></div>
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_COLOUR') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_COLOUR_EXPLAIN') }}
				<br style="margin-bottom:8px;"/>
				<label>{{ lang('ACP_HEADERLINK_COLOUR_FINDER') }}</label>
				<br style="margin-bottom:8px;"/>
				{{ lang('ACP_HEADERLINK_COLOUR_FINDER_EXPLAIN') }}&nbsp;<input class="jscolor {hash:true}" name="headerlink_colour_demo"  size="8" maxlength="8" />
				<br style="margin-bottom:8px;"/>
			</dt>
			<dd>
				{% for headerlink_urls in loops.headerlink_urls %}
				<p id="headerlink_url">
					<input name="headerlink_url[]" type="text" value="{{ headerlink_urls.HEADERLINK_URL }}" size="80%">&#8195;
					<strong>{{ lang('ACP_HEADERLINK_URL') }}</strong><br>
					<input name="headerlink_name[]" type="text" value="{{ headerlink_urls.HEADERLINK_NAME }}" size="80%">&#8195;
					<strong>{{ lang('ACP_HEADERLINK_NAME') }}</strong>
					<br>
					<input name="headerlink_hover[]" type="text" value="{{ headerlink_urls.HEADERLINK_HOVER }}" size="80%">&#8195;
					<strong>{{ lang('ACP_HEADERLINK_HOVER') }}</strong>
					<br>
					<input name="headerlink_icon[]" type="text" value="{{ headerlink_urls.HEADERLINK_ICON }}" size="18%">&#8195;
					{{ lang('ACP_HEADERLINK_ICON_CODE') }}&#8195;
					<input name="headerlink_icon_colour[]" value="{{ headerlink_urls.HEADERLINK_ICON_COLOUR }}" size="8" maxlength="8" />&#8195;{{ lang('ACP_HEADERLINK_ICON_COLOUR') }} &#8195;
					<select name="headerlink_icon_sw[]" id="headerlink_icon_sw[]">
					<option value="0"{% if headerlink_urls.HEADERLINK_ICON_SW eq '0' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_HIDE') }}</option>
					<option value="1"{% if headerlink_urls.HEADERLINK_ICON_SW eq '1' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SHOW') }}</option>
					</select>&#8195;
					<strong>{{ lang('ACP_HEADERLINK_ICON') }}</strong>
					<br>
					<strong>{{ lang('ACP_HEADERLINK_PERMISSION') }}</strong>
					<select name="headerlink_permission[]" id="headerlink_permission[]">
					<option value="0"{% if headerlink_urls.HEADERLINK_PERMISSION eq '0' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_DISABLE') }}</option>
					<option value="1"{% if headerlink_urls.HEADERLINK_PERMISSION eq '1' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_GUEST') }}</option>
					<option value="2"{% if headerlink_urls.HEADERLINK_PERMISSION eq '2' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_MEMBER') }}</option>
					<option value="3"{% if headerlink_urls.HEADERLINK_PERMISSION eq '3' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ACTIVE') }}</option>
					<option value="4"{% if headerlink_urls.HEADERLINK_PERMISSION eq '4' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_ADMIN') }}</option>
					<option value="5"{% if headerlink_urls.HEADERLINK_PERMISSION eq '5' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_MOD') }}</option>
					</select>
					<br>
					<strong>{{ lang('ACP_HEADERLINK_TARGET') }}</strong>
					<select name="headerlink_target[]" id="headerlink_target[]">
					<option value="0"{% if headerlink_urls.HEADERLINK_TARGET eq '0' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_NEW') }}</option>
					<option value="1"{% if headerlink_urls.HEADERLINK_TARGET eq '1' %} selected="selected"{% endif %}>{{ lang('ACP_HEADERLINK_SAME') }}</option>
					</select>
					<strong>{{ lang('ACP_HEADERLINK_TEXT_SHADOW') }}</strong>
					<select name="headerlink_text_shadow[]" id="headerlink_text_shadow[]">
					<option value="0"{% if headerlink_urls.HEADERLINK_TEXT_SHADOW eq '0' %} selected="selected"{% endif %}>{{ lang('NO') }}</option>
					<option value="1"{% if headerlink_urls.HEADERLINK_TEXT_SHADOW eq '1' %} selected="selected"{% endif %}>{{ lang('YES') }}</option>
					</select>
					<input name="headerlink_text_shadow_colour[]" value="{{ headerlink_urls.HEADERLINK_TEXT_SHADOW_COLOUR }}" size="8" maxlength="8" />&nbsp;{{ lang('ACP_HEADERLINK_TEXT_SHADOW_COLOUR') }} &#8195;
					</br>
					<input name="headerlink_button_colour[]" value="{{ headerlink_urls.HEADERLINK_BUTTON_COLOUR }}" size="8" maxlength="8" />&nbsp;{{ lang('ACP_HEADERLINK_BUTTON_COLOUR') }} &#8195;
					<input name="headerlink_text_colour[]" value="{{ headerlink_urls.HEADERLINK_TEXT_COLOUR }}" size="8" maxlength="8" />&nbsp;{{ lang('ACP_HEADERLINK_TEXT_COLOUR') }}</br>
				<hr>
				</p>
				{% endfor %}
			<dd id="link"><input value="{{ lang('ACP_HEADERLINK_MORE_LINKS') }}" onclick="clone_this('headerlink_url')" type="button"></dd>
			</dd>
		</dl>
	</fieldset>
	<p class="submit-buttons">
		{{ S_FORM_TOKEN }}
		<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') }}" />
	</p>
</form>
{% INCLUDE 'overall_footer.html' %}