{% include 'overall_header.html' %}

<div class="iz-page">

	<header class="iz-pagehead" aria-labelledby="iz-leaders-title">
		<h2 class="iz-pagehead__title" id="iz-leaders-title">{{ PAGE_TITLE }}</h2>
	</header>

	<form method="post" action="{{ S_MODE_ACTION }}" class="iz-form">

		<section class="iz-card" aria-labelledby="iz-admins-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-admins-title">{{ L_ADMINISTRATORS }}</h3>
			</header>

			<div class="iz-card__body">
				<div class="iz-table" role="region" aria-label="{{ L_ADMINISTRATORS }}">
					<table class="iz-table__table">
						<thead class="iz-table__head">
							<tr class="iz-table__row">
								<th scope="col" class="iz-table__th iz-table__th--grow">{{ L_RANK }}&nbsp;{{ L_ADMINISTRATORS }}</th>
								<th scope="col" class="iz-table__th">{{ L_PRIMARY_GROUP }}</th>
								<th scope="col" class="iz-table__th">{{ L_FORUMS }}</th>
							</tr>
						</thead>

						<tbody class="iz-table__body">
							{% for admin in admin %}
								<tr class="iz-table__row">
									<td class="iz-table__td">
										{{ admin.USERNAME_FULL }}&nbsp;({{ admin.RANK_TITLE }})
									</td>

									<td class="iz-table__td">
										{% if admin.U_GROUP %}
											<a class="iz-link"
											   href="{{ admin.U_GROUP }}"{% if admin.GROUP_COLOR %} style="font-weight: bold; color:#{{ admin.GROUP_COLOR }}"{% endif %}>
												{{ admin.GROUP_NAME }}
											</a>
										{% else %}
											{{ admin.GROUP_NAME }}
										{% endif %}
									</td>

									<td class="iz-table__td">&#45;</td>
								</tr>
							<!-- BEGINELSE -->
								<tr class="iz-table__row">
									<td class="iz-table__td" colspan="3"><strong>{{ L_NO_ADMINISTRATORS }}</strong></td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</section>


		<section class="iz-card" aria-labelledby="iz-mods-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-mods-title">{{ L_MODERATORS }}</h3>
			</header>

			<div class="iz-card__body">
				<div class="iz-table" role="region" aria-label="{{ L_MODERATORS }}">
					<table class="iz-table__table">
						<thead class="iz-table__head">
							<tr class="iz-table__row">
								<th scope="col" class="iz-table__th iz-table__th--grow">{{ L_MODERATORS }}</th>
								<th scope="col" class="iz-table__th">{{ L_GROUPS }}</th>
								<th scope="col" class="iz-table__th">{{ L_FORUMS }}</th>
							</tr>
						</thead>

						<tbody class="iz-table__body">
							{% for mod in mod %}
								<tr class="iz-table__row">
									<td class="iz-table__td">
										{{ mod.USERNAME_FULL }}
										{% if mod.RANK_IMG %}
											<!-- keep legacy behavior: when rank image exists, do not append text -->
										{% else %}
											&nbsp;({{ mod.RANK_TITLE }})
										{% endif %}
									</td>

									<td class="iz-table__td">
										{% if mod.U_GROUP %}
											<a class="iz-link"
											   href="{{ mod.U_GROUP }}"{% if mod.GROUP_COLOR %} style="font-weight: bold; color:#{{ mod.GROUP_COLOR }}"{% endif %}>
												{{ mod.GROUP_NAME }}
											</a>
										{% else %}
											{{ mod.GROUP_NAME }}
										{% endif %}
									</td>

									<td class="iz-table__td">
										{% if not mod.FORUMS %}
											{{ L_ALL_FORUMS }}
										{% else %}
											<label class="iz-sr-only" for="forums_{{ mod.USER_ID }}">{{ L_FORUMS }}</label>
											<select class="iz-select" id="forums_{{ mod.USER_ID }}">
												{{ mod.FORUMS }}
											</select>
										{% endif %}
									</td>
								</tr>
							<!-- BEGINELSE -->
								<tr class="iz-table__row">
									<td class="iz-table__td" colspan="3"><strong>{{ L_NO_MODERATORS }}</strong></td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</section>

	</form>

	<div class="iz-toolbar" role="region" aria-label="{{ L_JUMPBOX }}">
		<div class="iz-toolbar__left">
			{% include 'jumpbox.html' %}
		</div>
		<div class="iz-toolbar__right"></div>
	</div>

</div>

{% include 'jump_links.html' %}
{% include 'overall_footer.html' %}