{% INCLUDE 'overall_header.html' %}
{% INCLUDECSS '@dark1_memberavatarstatus/mas_header.css' %}
{% INCLUDEJS '@dark1_memberavatarstatus/mas_acp_script.js' %}

<style>
	.mas-status-dot.mas-color {
		background-color: #{{ MAS_COLOR_OFFLINE }};
	}
	.mas-status-dot.mas-color:after {
		background-color: #{{ MAS_COLOR_OFFLINE }};
	}
	.mas-status-online .mas-status-dot.mas-color {
		background-color: #{{ MAS_COLOR_ONLINE }};
	}
	.mas-status-online .mas-status-dot.mas-color:after {
		background-color: #{{ MAS_COLOR_ONLINE }};
	}
</style>

<h1>{{ MAS_EXT_NAME }}</h1>
<div>{{ lang('ACP_MAS_BY') }}&nbsp;{{ MAS_EXT_DEV }}</div>
<hr class="acp-mas-hr" />
<h2>{{ MAS_EXT_MODE }}</h2>

<form id="acp_board" method="post" action="{{ U_ACTION }}">

	<fieldset>
		<legend>{{ lang('ACP_MAS_VF_FP_SET') }}</legend>
		<dl>
			<dt>
				<label for="dark1_mas_vf_fp_av">{{ lang('ACP_MAS_AVATAR') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_VF_FP_AV_EXPLAIN') }}</div>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="dark1_mas_vf_fp_av" value="1" {% if MAS_VF_FP_AVATAR %}checked="checked"{% endif %}  id="dark1_mas_vf_fp_av" /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="dark1_mas_vf_fp_av" value="0" {% if not MAS_VF_FP_AVATAR %}checked="checked"{% endif %} /> {{ lang('NO') }}</label>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="dark1_mas_vf_fp_av_sz">{{ lang('ACP_MAS_AV_SIZE') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_AV_SZ_SML_EXPLAIN') }}</div>
			</dt>
			<dd>
				<input type="number" min="9" max="99" size="3" maxlength="3" step="1" name="dark1_mas_vf_fp_av_sz" value="{{ MAS_VF_FP_AV_SIZE }}" oninput="mas_sync_av_size('dark1_mas_vf_fp_av_sz','div_dark1_mas_vf_fp_av_sz')" id="dark1_mas_vf_fp_av_sz" />&nbsp;{{ lang('ACP_MAS_AV_SIZE_PX') }}
				<br>
				<br>
				<div class="acp-mas-avatar-div-wrapper">
					<div id="div_dark1_mas_vf_fp_av_sz" class="mas-avatar" style="width: {{ MAS_VF_FP_AV_SIZE }}px; height: {{ MAS_VF_FP_AV_SIZE }}px;">
						{{ MAS_NO_AVATAR_IMG }}
					</div>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="dark1_mas_vf_fp_ol">{{ lang('ACP_MAS_ONLINE') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_VF_FP_OL_EXPLAIN') }}</div>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="dark1_mas_vf_fp_ol" value="1" {% if MAS_VF_FP_ONLINE %}checked="checked"{% endif %} id="dark1_mas_vf_fp_ol" /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="dark1_mas_vf_fp_ol" value="0" {% if not MAS_VF_FP_ONLINE %}checked="checked"{% endif %} /> {{ lang('NO') }}</label>
				<br>
				<br>
				<div style="font-weight: bold;">
					<span class="mas-status-online">
						<span>{{ lang('ONLINE') }}</span>
						<span class="mas-status-dot mas-color" title="{{ lang('ONLINE') }}"></span>
					</span>
					<span style="font-weight: normal;">&nbsp;&nbsp;{{ lang('ACP_MAS_AND') }}&nbsp;&nbsp;</span>
					<span>
						<span>{{ lang('OFFLINE') }}</span>
						<span class="mas-status-dot mas-color" title="{{ lang('OFFLINE') }}"></span>
					</span>
				</div>
			</dd>
		</dl>
	</fieldset>

	<fieldset>
		<legend>{{ lang('ACP_MAS_VF_LP_SET') }}</legend>
		<dl>
			<dt>
				<label for="dark1_mas_vf_lp_av">{{ lang('ACP_MAS_AVATAR') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_VF_LP_AV_EXPLAIN') }}</div>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="dark1_mas_vf_lp_av" value="1" {% if MAS_VF_LP_AVATAR %}checked="checked"{% endif %}  id="dark1_mas_vf_lp_av" /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="dark1_mas_vf_lp_av" value="0" {% if not MAS_VF_LP_AVATAR %}checked="checked"{% endif %} /> {{ lang('NO') }}</label>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="dark1_mas_vf_lp_av_sz">{{ lang('ACP_MAS_AV_SIZE') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_AV_SZ_SML_EXPLAIN') }}</div>
			</dt>
			<dd>
				<input type="number" min="9" max="99" size="3" maxlength="3" step="1" name="dark1_mas_vf_lp_av_sz" value="{{ MAS_VF_LP_AV_SIZE }}" oninput="mas_sync_av_size('dark1_mas_vf_lp_av_sz','div_dark1_mas_vf_lp_av_sz')" id="dark1_mas_vf_lp_av_sz" />&nbsp;{{ lang('ACP_MAS_AV_SIZE_PX') }}
				<br>
				<br>
				<div class="acp-mas-avatar-div-wrapper">
					<div id="div_dark1_mas_vf_lp_av_sz" class="mas-avatar" style="width: {{ MAS_VF_LP_AV_SIZE }}px; height: {{ MAS_VF_LP_AV_SIZE }}px;">
						{{ MAS_NO_AVATAR_IMG }}
					</div>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="dark1_mas_vf_lp_ol">{{ lang('ACP_MAS_ONLINE') ~ lang('COLON') }}</label>
				<br>
				<div>{{ lang('ACP_MAS_VF_LP_OL_EXPLAIN') }}</div>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="dark1_mas_vf_lp_ol" value="1" {% if MAS_VF_LP_ONLINE %}checked="checked"{% endif %} id="dark1_mas_vf_lp_ol" /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="dark1_mas_vf_lp_ol" value="0" {% if not MAS_VF_LP_ONLINE %}checked="checked"{% endif %} /> {{ lang('NO') }}</label>
				<br>
				<br>
				<div style="font-weight: bold;">
					<span class="mas-status-online">
						<span>{{ lang('ONLINE') }}</span>
						<span class="mas-status-dot mas-color" title="{{ lang('ONLINE') }}"></span>
					</span>
					<span style="font-weight: normal;">&nbsp;&nbsp;{{ lang('ACP_MAS_AND') }}&nbsp;&nbsp;</span>
					<span>
						<span>{{ lang('OFFLINE') }}</span>
						<span class="mas-status-dot mas-color" title="{{ lang('OFFLINE') }}"></span>
					</span>
				</div>
			</dd>
		</dl>
	</fieldset>

	<fieldset>
		<legend>{{ lang('ACP_SUBMIT_CHANGES') }}</legend>
		<fieldset class="submit-buttons">
			<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}" />
			&nbsp;&nbsp;
			<input class="button2" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}" onclick="mas_reset_av_size('div_dark1_mas_vf_fp_av_sz',{{ MAS_VF_FP_AV_SIZE }});mas_reset_av_size('div_dark1_mas_vf_lp_av_sz',{{ MAS_VF_LP_AV_SIZE }})" />
			{{ S_FORM_TOKEN }}
		</fieldset>
	</fieldset>

</form>

{% INCLUDE 'overall_footer.html' %}