{% include 'overall_header.html' %}

<div class="iz-page">

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

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

		{% for group in group %}
			<section class="iz-card" aria-labelledby="iz-group-title-{{ group.GROUP_ID }}">
				<header class="iz-card__header">
					<h3 class="iz-card__title" id="iz-group-title-{{ group.GROUP_ID }}">
						{% if group.U_GROUP %}
							<a class="iz-link iz-link--strong" href="{{ group.U_GROUP }}">{{ group.GROUP_NAME }}</a>
						{% else %}
							{{ group.GROUP_NAME }}
						{% endif %}
					</h3>
				</header>

				<div class="iz-card__body">
					<div class="iz-table" role="region" aria-label="{{ group.GROUP_NAME }}">
						<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_MEMBERS }}
									</th>
									<th scope="col" class="iz-table__th">{{ L_PRIMARY_GROUP }}</th>
									<th scope="col" class="iz-table__th">{{ L_RANK_IMAGE }}</th>
									{% if S_DISPLAY_MODERATOR_FORUMS %}
										<th scope="col" class="iz-table__th">{{ L_MODERATOR }}</th>
									{% endif %}
								</tr>
							</thead>

							<tbody class="iz-table__body">
								{% for user in user %}
									<tr class="iz-table__row">
										<td class="iz-table__td">
											{{ group.user.USERNAME_FULL }}
											{% if group.user.S_INACTIVE %}
												&nbsp;&#40;{{ L_INACTIVE }}&#41;
											{% endif %}
											{% if group.user.RANK_TITLE %}
												&nbsp;&#45;&nbsp;{{ group.user.RANK_TITLE }}
											{% endif %}
										</td>

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

										<td class="iz-table__td">
											{% if group.user.RANK_IMG %}
												<span class="rank-img">{{ group.user.RANK_IMG }}</span>
											{% endif %}
										</td>

										{% if S_DISPLAY_MODERATOR_FORUMS %}
											<td class="iz-table__td">
												{% if group.user.FORUM_OPTIONS %}
													<label class="iz-sr-only" for="forums_{{ group.user.USER_ID }}_{{ group.GROUP_ID }}">{{ L_FORUMS }}</label>
													<select class="iz-select" id="forums_{{ group.user.USER_ID }}_{{ group.GROUP_ID }}">
														{{ group.user.FORUMS }}
													</select>
												{% elseif group.user.FORUMS %}
													{{ group.user.FORUMS }}
												{% else %}
													&#45;
												{% endif %}
											</td>
										{% endif %}
									</tr>
								<!-- BEGINELSE -->
									<tr class="iz-table__row">
										<td class="iz-table__td" colspan="{% if S_DISPLAY_MODERATOR_FORUMS %}4{% else %}3{% endif %}">
											<strong>{{ L_NO_MEMBERS }}</strong>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
			</section>
		{% endfor %}

	</form>

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

</div>

{% include 'overall_footer.html' %}