<!-- INCLUDE overall_header.html -->

<a id="maincontent"></a>

<p>{L_ACP_BAN_EXPLAIN}</p>

<h1>{L_TITLE}</h1>

<p>{L_EXPLAIN}</p>

<script>
// <![CDATA[

	const ban_length = [];
	ban_length[-1] = '';
	const ban_reason = [];
		ban_reason[-1] = '';
	const ban_give_reason = [];
		ban_give_reason[-1] = '';

	<!-- BEGIN bans -->
		ban_length['{bans.BAN_ID}'] = '{bans.A_LENGTH}';
		<!-- IF bans.A_REASON -->
			ban_reason['{bans.BAN_ID}'] = '{bans.A_REASON}';
		<!-- ENDIF -->
		<!-- IF bans.A_GIVE_REASON -->
			ban_give_reason['{bans.BAN_ID}'] = '{bans.A_GIVE_REASON}';
		<!-- ENDIF -->
	<!-- END bans -->

	function display_details(option)
	{
		document.getElementById('unbanlength').value = ban_length[option];
		if (option in ban_reason) {
			document.getElementById('unbanreason').innerHTML = ban_reason[option];
		} else {
			document.getElementById('unbanreason').innerHTML = '';
		}
		if (option in ban_give_reason) {
			document.getElementById('unbangivereason').innerHTML = ban_give_reason[option];
		} else {
			document.getElementById('unbangivereason').innerHTML = '';
		}
	}

	document.addEventListener("DOMContentLoaded", () => {
		const $unbanSelect = document.getElementById('unban');
		if ($unbanSelect) {
			$unbanSelect.addEventListener('change', function () {
				if (this.selectedIndex > -1) {
					display_details(this.options[this.selectedIndex].value);
				} else {
					display_details(-1);
				}
			});
		}
	});

// ]]>
</script>

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

<fieldset>
	<legend>{L_TITLE}</legend>
<dl>
	<dt><label for="ban">{L_BAN_CELL}{L_COLON}</label></dt>
	<dd><!-- EVENT acp_ban_cell_prepend --><textarea name="ban" cols="40" rows="3" id="ban"></textarea><!-- EVENT acp_ban_cell_append --></dd>
	<!-- IF S_USERNAME_BAN --><dd>[ <a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;">{L_FIND_USERNAME}</a> ]</dd><!-- ENDIF -->
</dl>
<dl>
	<dt><label for="banlength">{L_BAN_LENGTH}{L_COLON}</label></dt>
	<dd><label for="banlength"><select name="banlength" id="banlength" onchange="if(this.value==-1){document.getElementById('banlengthother').style.display = 'block';}else{document.getElementById('banlengthother').style.display='none';}">{S_BAN_END_OPTIONS}</select></label></dd>
	<dd id="banlengthother" style="display: none;"><label><input type="text" name="banlengthother" class="inputbox" /><br /><span>{L_YEAR_MONTH_DAY}</span></label></dd>
</dl>
<dl>
	<dt><label for="banreason">{L_BAN_REASON}{L_COLON}</label></dt>
	<dd><input name="banreason" type="text" class="text medium" maxlength="255" id="banreason" /></dd>
</dl>
<dl>
	<dt><label for="bangivereason">{L_BAN_GIVE_REASON}{L_COLON}</label></dt>
	<dd><input name="bangivereason" type="text" class="text medium" maxlength="255" id="bangivereason" /></dd>
</dl>
</fieldset>
<fieldset>
	<legend>{L_ACP_SUBMIT_CHANGES}</legend>
	<p class="submit-buttons">
		<input class="button1" type="submit" id="bansubmit" name="bansubmit" value="{L_SUBMIT}" />&nbsp;
		<input class="button2" type="reset" id="banreset" name="banreset" value="{L_RESET}" />
	</p>
	{S_FORM_TOKEN}
</fieldset>
</form>

<br /><br />

<h1>{L_UNBAN_TITLE}</h1>

<p>{L_UNBAN_EXPLAIN}</p>

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

<fieldset>
	<legend>{{ lang('UNBAN_TITLE') }}</legend>

{% if BANNED_SELECT %}
	<dl>
		<dt><label for="unban">{{ lang('BAN_CELL') ~ lang('COLON') }}</label></dt>
		<dd>
			{{ FormsSelect(BANNED_SELECT) }}
		</dd>
	</dl>
	<dl>
		<dt><label for="unbanlength">{{ lang('BAN_LENGTH') ~ lang('COLON') }}</label></dt>
		<dd><input style="border: 0;" type="text" class="text full" readonly="readonly" name="unbanlength" id="unbanlength" /></dd>
	</dl>
	<dl>
		<dt><label for="unbanreason">{{ lang('BAN_REASON') ~ lang('COLON') }}</label></dt>
		<dd><textarea style="border: 0;" class="text full" readonly="readonly" name="unbanreason" id="unbanreason" rows="5" cols="80">&nbsp;</textarea></dd>
	</dl>
	<dl>
		<dt><label for="unbangivereason">{{ lang('BAN_GIVE_REASON') ~ lang('COLON') }}</label></dt>
		<dd><textarea style="border: 0;" class="text full" readonly="readonly" name="unbangivereason" id="unbangivereason" rows="5" cols="80">&nbsp;</textarea></dd>
	</dl>

	<p class="submit-buttons">
		<input class="button1" type="submit" id="unbansubmit" name="unbansubmit" value="{{ lang('SUBMIT') }}" />&nbsp;
		<input class="button2" type="reset" id="unbanreset" name="unbanreset" value="{{ lang('RESET') }}" />
	</p>
{% else %}
	<p>{{ lang('NO_BAN_CELL') }}</p>
{% endif %}
	{{ S_FORM_TOKEN }}
</fieldset>

</form>

<!-- INCLUDE overall_footer.html -->
