{% include 'ucp_header.html' %}

<div class="tab-pane active ucp-membership">
	<form id="ucp" method="post" action="{{ S_UCP_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">

		<section class="iz-card iz-card--ucp">
			<header class="iz-card__header">
				<h2 class="iz-card__title">{{ L_GROUP }}</h2>
			</header>

			<div class="iz-card__body">
				<div class="iz-alert iz-alert--info" role="status">
					<p class="iz-prose">{{ L_GROUPS_EXPLAIN }}</p>
				</div>

				{% set SHOW_BUTTONS = 0 %}

				{% if leader %}
					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_LEADER }}</h3>
						</header>

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_LEADER }}">
								<table class="iz-table iz-table--groups">
									<thead>
										<tr>
											<th scope="col">{{ L_GROUP }}</th>
											<th scope="col" class="iz-table__check">{{ L_SELECT }}</th>
										</tr>
									</thead>
									<tbody>
										{% for leader in leader %}
											{% if not leader.GROUP_SPECIAL %}
												{% set SHOW_BUTTONS = 1 %}
											{% endif %}
											<tr>
												<td>
													{% if S_CHANGE_DEFAULT %}
														<div class="iz-choice iz-choice--radio">
															<input
																title="{{ L_CHANGE_DEFAULT_GROUP }}"
																type="radio"
																name="default"
																value="{{ leader.GROUP_ID }}"
																id="default-{{ leader.GROUP_ID }}"
																{% if leader.S_GROUP_DEFAULT %} checked="checked"{% endif %}
															>
															<label for="default-{{ leader.GROUP_ID }}">
																<span class="iz-visually-hidden">{{ L_CHANGE_DEFAULT_GROUP }}</span>
															</label>
														</div>
													{% endif %}

													<a class="iz-group-link" href="{{ leader.U_VIEW_GROUP }}"{% if leader.GROUP_COLOUR %} style="font-weight:700;color:#{{ leader.GROUP_COLOUR }}"{% endif %}><span class="iz-group-link__name">{{ leader.GROUP_NAME }}</span>{% if not leader.GROUP_SPECIAL %}<span class="iz-group-link__meta"><strong>{{ leader.GROUP_STATUS }}</strong></span>{% endif %}{% if leader.GROUP_DESC %}<span class="iz-group-link__meta">{{ leader.GROUP_DESC }}</span>{% endif %}</a></td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--radio">
														<input
															type="radio"
															name="selected"
															value="{{ leader.GROUP_ID }}"
															id="select-leader-{{ leader.GROUP_ID }}"
															{% if leader.GROUP_SPECIAL %}disabled="disabled"{% endif %}
														>
														<label for="select-leader-{{ leader.GROUP_ID }}">
															<span class="iz-visually-hidden">{{ L_SELECT }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</section>

					<div class="iz-space iz-space--md"></div>
				{% endif %}

				{% if member %}
					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_MEMBER }}</h3>
						</header>

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_MEMBER }}">
								<table class="iz-table iz-table--groups">
									<thead>
										<tr>
											<th scope="col">{{ L_GROUP }}</th>
											<th scope="col" class="iz-table__check">{{ L_SELECT }}</th>
										</tr>
									</thead>
									<tbody>
										{% for member in member %}
											{% if not member.GROUP_SPECIAL %}
												{% set SHOW_BUTTONS = 1 %}
											{% endif %}
											<tr>
												<td>
													{% if S_CHANGE_DEFAULT %}
														<div class="iz-choice iz-choice--radio">
															<input
																title="{{ L_CHANGE_DEFAULT_GROUP }}"
																type="radio"
																name="default"
																value="{{ member.GROUP_ID }}"
																id="default-{{ member.GROUP_ID }}"
																{% if member.S_GROUP_DEFAULT %} checked="checked"{% endif %}
															>
															<label for="default-{{ member.GROUP_ID }}">
																<span class="iz-visually-hidden">{{ L_CHANGE_DEFAULT_GROUP }}</span>
															</label>
														</div>
													{% endif %}

													<a class="iz-group-link" href="{{ member.U_VIEW_GROUP }}"{% if member.GROUP_COLOUR %} style="font-weight:700;color:#{{ member.GROUP_COLOUR }}"{% endif %}><span class="iz-group-link__name">{{ member.GROUP_NAME }}</span>{% if not member.GROUP_SPECIAL %}<span class="iz-group-link__meta"><strong>{{ member.GROUP_STATUS }}</strong></span>{% endif %}{% if member.GROUP_DESC %}<span class="iz-group-link__meta">{{ member.GROUP_DESC }}</span>{% endif %}</a></td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--radio">
														<input
															type="radio"
															name="selected"
															value="{{ member.GROUP_ID }}"
															id="select-member-{{ member.GROUP_ID }}"
															{% if member.GROUP_SPECIAL %}disabled="disabled"{% endif %}
														>
														<label for="select-member-{{ member.GROUP_ID }}">
															<span class="iz-visually-hidden">{{ L_SELECT }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</section>

					<div class="iz-space iz-space--md"></div>
				{% endif %}

				{% if pending %}
					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_PENDING }}</h3>
						</header>

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_PENDING }}">
								<table class="iz-table iz-table--groups">
									<thead>
										<tr>
											<th scope="col">{{ L_GROUP }}</th>
											<th scope="col" class="iz-table__check">{{ L_SELECT }}</th>
										</tr>
									</thead>
									<tbody>
										{% for pending in pending %}
											{% if not pending.GROUP_SPECIAL %}
												{% set SHOW_BUTTONS = 1 %}
											{% endif %}
											<tr>
												<td>
													<a class="iz-group-link" href="{{ pending.U_VIEW_GROUP }}"{% if pending.GROUP_COLOUR %} style="font-weight:700;color:#{{ pending.GROUP_COLOUR }}"{% endif %}><span class="iz-group-link__name">{{ pending.GROUP_NAME }}</span>{% if not pending.GROUP_SPECIAL %}<span class="iz-group-link__meta"><strong>{{ pending.GROUP_STATUS }}</strong></span>{% endif %}{% if pending.GROUP_DESC %}<span class="iz-group-link__meta">{{ pending.GROUP_DESC }}</span>{% endif %}</a>{% if pending.GROUP_DESC %}
														<div class="iz-meta iz-meta--small">{{ pending.GROUP_DESC }}</div>
													{% endif %}
												</td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--radio">
														<input
															type="radio"
															name="selected"
															value="{{ pending.GROUP_ID }}"
															id="select-pending-{{ pending.GROUP_ID }}"
															{% if pending.GROUP_SPECIAL %}disabled="disabled"{% endif %}
														>
														<label for="select-pending-{{ pending.GROUP_ID }}">
															<span class="iz-visually-hidden">{{ L_SELECT }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</section>

					<div class="iz-space iz-space--md"></div>
				{% endif %}

				{% if nonmember %}
					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_NONMEMBER }}</h3>
						</header>

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_NONMEMBER }}">
								<table class="iz-table iz-table--groups">
									<thead>
										<tr>
											<th scope="col">{{ L_GROUP }}</th>
											<th scope="col" class="iz-table__check">{{ L_SELECT }}</th>
										</tr>
									</thead>
									<tbody>
										{% for nonmember in nonmember %}
											{% if nonmember.S_CAN_JOIN %}
												{% set SHOW_BUTTONS = 1 %}
											{% endif %}
											<tr>
												<td>
													<a class="iz-group-link" href="{{ nonmember.U_VIEW_GROUP }}"{% if nonmember.GROUP_COLOUR %} style="font-weight:700;color:#{{ nonmember.GROUP_COLOUR }}"{% endif %}><span class="iz-group-link__name">{{ nonmember.GROUP_NAME }}</span>{% if not nonmember.GROUP_SPECIAL %}<span class="iz-group-link__meta"><strong>{{ nonmember.GROUP_STATUS }}</strong></span>{% endif %}{% if nonmember.GROUP_DESC %}<span class="iz-group-link__meta">{{ nonmember.GROUP_DESC }}</span>{% endif %}</a>{% if nonmember.GROUP_DESC %}
														<div class="iz-meta iz-meta--small">{{ nonmember.GROUP_DESC }}</div>
													{% endif %}
												</td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--radio">
														<input
															type="radio"
															name="selected"
															value="{{ nonmember.GROUP_ID }}"
															id="select-nonmember-{{ nonmember.GROUP_ID }}"
															{% if not nonmember.S_CAN_JOIN %}disabled="disabled"{% endif %}
														>
														<label for="select-nonmember-{{ nonmember.GROUP_ID }}">
															<span class="iz-visually-hidden">{{ L_SELECT }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</section>

					<div class="iz-space iz-space--md"></div>
				{% endif %}

				{% if S_CHANGE_DEFAULT or $SHOW_BUTTONS == 1 %}
					<div class="iz-toolbar iz-toolbar--ucp-actions" aria-label="{{ L_OPTIONS }}">
						<div class="iz-toolbar__left">
							{% if S_CHANGE_DEFAULT %}
								<button class="iz-btn iz-btn--ghost" type="submit" name="change_default" value="{{ L_CHANGE_DEFAULT_GROUP }}">
									{{ L_CHANGE_DEFAULT_GROUP }}
								</button>
								{{ S_FORM_TOKEN }}
							{% endif %}
						</div>

						{% if $SHOW_BUTTONS == 1 %}
							<div class="iz-toolbar__right">
								<div class="iz-inputgroup">
									<select class="iz-select" name="action" id="action">
										<option value="join">{{ L_JOIN_SELECTED }}</option>
										<option value="resign">{{ L_RESIGN_SELECTED }}</option>
										<option value="demote">{{ L_DEMOTE_SELECTED }}</option>
									</select>
									<button class="iz-btn iz-btn--primary" type="submit" name="submit" value="{{ L_SUBMIT }}">
										{{ L_SUBMIT }}
									</button>
								</div>
								{{ S_FORM_TOKEN }}
							</div>
						{% endif %}
					</div>
				{% endif %}

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}