{% INCLUDECSS '@chris1278_jsclock/css/acp_jsclcok.css' %}
{% include 'overall_header.html' %}

<h1>{{ lang('ACP_JSCLOCK_TITLE') }}</h1>
<p>{{ lang('ACP_JSCLOCK_EXPLAIN') }}</p>
	
{% if JSCLOCK_S_ERROR %}
	<div class="errorbox">
		<h3>{{ lang('WARNING') }}</h3>
		<p>{{ JSCLOCK_ERROR_MSG }}</p>
	</div>
{% endif %}


<form id="chris1278_jsclock_acp" name="chris1278_jsclock_acp" method="post" action="{{ U_ACTION }}">
	<fieldset>
		<legend>{{ lang('SETTINGS') }}</legend>
		<dl>
			<dt>
				<label>{{ lang('ACP_USER_JSCLOCK_TIME_FORMAT') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_USER_JSCLOCK_TIME_FORMAT_EXPLAIN') }}</span>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="acp_user_jsclock_time_format" value="1"{{ ACP_USER_JSCLOCK_TIME_FORMAT == 1 ? 'checked="checked"' }}> {{ lang('12_HOUR_FORMAT') }}</label>
				<label><input type="radio" class="radio" name="acp_user_jsclock_time_format" value="0"{{ ACP_USER_JSCLOCK_TIME_FORMAT == 0 ? 'checked="checked"' }}> {{ lang('24_HOUR_FORMAT') }}</label>
			</dd>
		</dl>
		<dl>
			<dt>
				<label>{{ lang('ACP_USER_JSCLOCK_FONT_COLOR') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_USER_JSCLOCK_FONT_COLOR_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input class="inputbox autowidth jsclockrhombus" value="#" disabled></input>
				<input class="inputbox autowidth jsclockinput" name="acp_user_jsclock_font_color" type="text" id="acp_user_jsclock_font_color" value="{{ ACP_USER_JSCLOCK_FONT_COLOR }}" size="6" maxlength="6">
				{% if  ACP_USER_JSCLOCK_FONT_COLOR %}<span style="background-color: #{{ ACP_USER_JSCLOCK_FONT_COLOR }}"></span>{% endif %}
				<div class="acp_user_jsclock_colour_change color_palette_placeholder" data-color-palette="h" data-height="12" data-width="15" data-target="#acp_user_jsclock_font_color"></div>
			</dd>
		</dl>
		<dl>
			<dt>
				<label>{{ lang('ACP_USER_JSCLOCK_BACKGROUND_COLOR') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_USER_JSCLOCK_BACKGROUND_COLOR_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input class="inputbox autowidth jsclockrhombus" value="#" disabled></input>
				<input class="inputbox autowidth jsclockinput" name="acp_user_jsclock_background_color" type="text" id="acp_user_jsclock_background_color" value="{{ ACP_USER_JSCLOCK_BACKGROUND_COLOR }}" size="7" maxlength="7">
				{% if  ACP_USER_JSCLOCK_BACKGROUND_COLOR %}<span style="background-color: #{{ ACP_USER_JSCLOCK_BACKGROUND_COLOR }}"></span>{% endif %}
				<div  class="acp_user_jsclock_colour_change color_palette_placeholder" data-orientation="h" data-height="12" data-width="15" data-target="#acp_user_jsclock_background_color"></div>
			</dd>
		</dl>
		<dl>
			<dt>
				<label>{{ lang('ACP_USER_JSCLOCK_OPTIK') ~ lang('COLON') }}</label><br>
				<span>{{ lang('ACP_USER_JSCLOCK_OPTIK_EXPLAIN') }}</span>
			</dt>
			<dd>
				<div style="width: fit-content; background-color: #{{ ACP_USER_JSCLOCK_BACKGROUND_COLOR|escape("css") }}; color: #{{ ACP_USER_JSCLOCK_FONT_COLOR|escape("css") }};" id="jsclock">{{ ACP_TIME }}</div>
			</dd>
		</dl>
		<br><br>
		
		
	</fieldset>
	<fieldset class="submit-buttons">
		<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}">&nbsp;
		{{ S_FORM_TOKEN }}
	</fieldset>
	
</form>
{% include 'overall_footer.html' %}