{% include 'mcp_header.html' %}

<script>
	(function () {
		'use strict';

		// Keep JS light, no dependencies. Values are template-escaped with e('js') where needed.
		var banLength = { '-1': '' };
		var banReason = { '-1': '' };
		var banGiveReason = { '-1': '' };

		{% for bans in bans %}
			banLength['{{ bans.BAN_ID }}'] = '{{ bans.A_LENGTH }}';
			{% if bans.A_REASON %}
				banReason['{{ bans.BAN_ID }}'] = '{{ bans.REASON | e('js') }}';
			{% endif %}
			{% if bans.A_GIVE_REASON %}
				banGiveReason['{{ bans.BAN_ID }}'] = '{{ bans.GIVE_REASON | e('js') }}';
			{% endif %}
		{% endfor %}

		function byId(id) { return document.getElementById(id); }

		function setText(id, value) {
			var el = byId(id);
			if (!el) return;
			el.textContent = value || '';
		}

		function show(el) { if (el) el.removeAttribute('hidden'); }
		function hide(el) { if (el) el.setAttribute('hidden', 'hidden'); }

		function toggleBanLengthOther(value) {
			var other = byId('iz-banlengthother');
			if (!other) return;
			if (String(value) == '-1') show(other); else hide(other);
		}

		function displayDetails(banId) {
			var key = String(banId);

			setText('iz-unbanlength', banLength[key] || '');
			setText('iz-unbanreason', Object.prototype.hasOwnProperty.call(banReason, key) ? banReason[key] : '');
			setText('iz-unbangivereason', Object.prototype.hasOwnProperty.call(banGiveReason, key) ? banGiveReason[key] : '');
		}

		document.addEventListener('DOMContentLoaded', function () {
			var banlength = byId('banlength');
			if (banlength) {
				banlength.addEventListener('change', function () {
					toggleBanLengthOther(this.value);
				});
				toggleBanLengthOther(banlength.value);
			}

			var unban = byId('unban');
			if (unban) {
				unban.addEventListener('change', function () {
					// For multi-select, show details for the first selected option
					var opt = this.options[this.selectedIndex];
					if (opt && opt.value != undefined) displayDetails(opt.value);
				});

				if (unban.selectedIndex != -1 && unban.options[unban.selectedIndex]) {
					displayDetails(unban.options[unban.selectedIndex].value);
				}
			}
		});
	})();
</script>

<div class="iz-mcp">
	<form id="mcp_ban" class="iz-form" method="post" action="{{ U_ACTION }}">
		<section class="iz-card iz-card--mcp" aria-labelledby="iz-ban-title">
			<header class="iz-card__header">
				<h2 class="iz-card__title" id="iz-ban-title">{{ L_MCP_MANAG_BAN }}</h2>
			</header>

			<div class="iz-card__body">
				<p class="iz-help">{{ L_EXPLAIN }}</p>

				{% EVENT mcp_ban_fields_before %}

				<div class="iz-field">
					<div class="iz-field__row">
						<label class="iz-label" for="ban">{{ L_BAN_CELL }}{{ L_COLON }}</label>
						{% if S_USERNAME_BAN %}
							<a class="iz-link iz-link--muted"
							   href="{{ U_FIND_USERNAME }}"
							   onclick="find_username(this.href); return false;">
								{{ L_FIND_USERNAME }}
							</a>
						{% endif %}
					</div>

					<textarea class="iz-textarea"
							  placeholder="{{ L_SEARCH_USR_PLACEHOLDER }}"
							  rows="2"
							  name="ban"
							  id="ban">{{ BAN_QUANTIFIER }}</textarea>
				</div>

				<div class="iz-field">
					<label class="iz-label" for="banlength">{{ L_BAN_LENGTH }}{{ L_COLON }}</label>
					<select class="iz-select" name="banlength" id="banlength">
						{{ S_BAN_END_OPTIONS }}
					</select>

					<div class="iz-field iz-field--inline" id="iz-banlengthother" hidden="hidden">
						<label class="iz-label" for="banlengthother">{{ L_YEAR_MONTH_DAY }}</label>
						<input class="iz-input"
							   placeholder="{{ L_YEAR_MONTH_DAY_PLACEHOLDER }}"
							   type="text"
							   name="banlengthother"
							   id="banlengthother"
							   autocomplete="off" />
					</div>
				</div>

				<div class="iz-field">
					<label class="iz-label" for="banreason">{{ L_BAN_REASON }}{{ L_COLON }}</label>
					<input class="iz-input"
						   type="text"
						   placeholder="{{ L_SPAMMER }}"
						   name="banreason"
						   id="banreason"
						   maxlength="255" />
				</div>

				<div class="iz-field">
					<label class="iz-label" for="bangivereason">{{ L_BAN_GIVE_REASON }}{{ L_COLON }}</label>
					<input class="iz-input"
						   type="text"
						   placeholder="{{ L_SPAMMER_PLACEHOLDER }}"
						   name="bangivereason"
						   id="bangivereason"
						   maxlength="255" />
				</div>

				<div class="iz-field iz-field--choicegroup" role="group" aria-labelledby="iz-banexclude-label">
					<div class="iz-label" id="iz-banexclude-label">{{ L_BAN_EXCLUDE }}{{ L_COLON }}</div>
					<p class="iz-help">{{ L_BAN_EXCLUDE_EXPLAIN }}</p>

					<div class="iz-choicegroup">
						<label class="iz-choice" for="banexclude1">
							<input class="iz-choice__input" type="radio" name="banexclude" id="banexclude1" value="1">
							<span class="iz-choice__label">{{ L_YES }}</span>
						</label>

						<label class="iz-choice" for="banexclude0">
							<input class="iz-choice__input" type="radio" name="banexclude" id="banexclude0" value="0" checked="checked">
							<span class="iz-choice__label">{{ L_NO }}</span>
						</label>
					</div>
				</div>

				{% EVENT mcp_ban_fields_after %}

				<fieldset class="iz-actions">
					{{ S_HIDDEN_FIELDS }}
					<button class="iz-btn iz-btn--primary" type="submit" name="bansubmit" value="{{ L_SUBMIT }}">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</fieldset>
			</div>
		</section>

		<section class="iz-card iz-card--mcp" aria-labelledby="iz-unban-title">
			<header class="iz-card__header">
				<h2 class="iz-card__title" id="iz-unban-title">{{ L_UNBAN_TITLE }}</h2>
			</header>

			<div class="iz-card__body">
				<p class="iz-help">{{ L_UNBAN_EXPLAIN }}</p>

				{% if S_BANNED_OPTIONS %}
					{% EVENT mcp_ban_unban_before %}

					<div class="iz-field">
						<label class="iz-label" for="unban">{{ L_BAN_CELL }}{{ L_COLON }}</label>
						<select class="iz-select"
								name="unban[]"
								id="unban"
								multiple="multiple"
								size="8"
								aria-describedby="iz-unban-details">
							{{ BANNED_OPTIONS }}
						</select>
						<p class="iz-help">{{ L_MARK_PLACEHOLDER }}</p>
					</div>

					<div class="iz-card iz-card--subtle" id="iz-unban-details" aria-live="polite">
						<div class="iz-kv">
							<div class="iz-kv__row">
								<div class="iz-kv__key">{{ L_BAN_LENGTH }}{{ L_COLON }}</div>
								<div class="iz-kv__value" id="iz-unbanlength"></div>
							</div>
							<div class="iz-kv__row">
								<div class="iz-kv__key">{{ L_BAN_REASON }}{{ L_COLON }}</div>
								<div class="iz-kv__value" id="iz-unbanreason"></div>
							</div>
							<div class="iz-kv__row">
								<div class="iz-kv__key">{{ L_BAN_GIVE_REASON }}{{ L_COLON }}</div>
								<div class="iz-kv__value" id="iz-unbangivereason"></div>
							</div>
						</div>
					</div>

					{% EVENT mcp_ban_unban_after %}

					<fieldset class="iz-actions">
						{{ S_HIDDEN_FIELDS }}
						<button class="iz-btn iz-btn--primary" type="submit" name="unbansubmit" value="{{ L_SUBMIT }}">
							{{ L_SUBMIT }}
						</button>
						{{ S_FORM_TOKEN }}
					</fieldset>
				{% else %}
					<p class="iz-help"><strong>{{ L_NO_BAN_CELL }}</strong></p>
				{% endif %}
			</div>
		</section>
	</form>
</div>

{% include 'mcp_footer.html' %}