{% include 'ucp_header.html' %}

<div class="tab-pane active">
	<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_USERGROUPS }}
					{% if GROUP_NAME %}
						&nbsp;&#45;&nbsp;
						<small{% if GROUP_COLOUR %} style="color:#{{ GROUP_COLOUR }};"{% endif %}>{{ GROUP_NAME }}</small>
					{% endif %}
				</h2>
			</header>

			<div class="iz-card__body">

				{% if S_ERROR %}
					<div class="iz-alert iz-alert--warning" role="alert">
						<strong>{{ L_WARNING }}</strong>&nbsp;{{ ERROR_MSG }}
					</div>
				{% endif %}

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

				{% if S_EDIT %}

					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_DETAILS }}</h3>
						</header>

						<div class="iz-card__body">

							<div class="iz-field">
								<label class="iz-label" for="group_name">{{ L_GROUP_NAME }}{{ L_COLON }}</label>

								{% if S_SPECIAL_GROUP %}
									<strong{% if GROUP_COLOUR %} style="color: #{{ GROUP_COLOUR }};"{% endif %}>{{ GROUP_NAME }}</strong>
									<input name="group_name" type="hidden" value="{{ GROUP_INTERNAL_NAME }}" />
								{% else %}
									<input name="group_name" type="text" id="group_name" value="{{ GROUP_INTERNAL_NAME }}" class="iz-input">
								{% endif %}
							</div>

							<div class="iz-field">
								<label class="iz-label" for="group_desc">{{ L_GROUP_DESC }}{{ L_COLON }}</label>

								<textarea placeholder="{{ L_GROUP_DESC }}" rows="2" id="group_desc" name="group_desc" class="iz-textarea">{{ GROUP_DESC }}</textarea>

								<div class="iz-space iz-space--xs"></div>

								<div class="iz-choicegroup" aria-label="{{ L_GROUP_DESC }}">
									<div class="iz-choice iz-choice--check">
										<input type="checkbox" name="desc_parse_bbcode" id="desc_parse_bbcode"{% if S_DESC_BBCODE_CHECKED %} checked="checked"{% endif %}>
										<label for="desc_parse_bbcode">{{ L_PARSE_BBCODE }}</label>
									</div>
									<div class="iz-choice iz-choice--check">
										<input type="checkbox" name="desc_parse_smilies" id="desc_parse_smilies"{% if S_DESC_SMILIES_CHECKED %} checked="checked"{% endif %}>
										<label for="desc_parse_smilies">{{ L_PARSE_SMILIES }}</label>
									</div>
									<div class="iz-choice iz-choice--check">
										<input type="checkbox" name="desc_parse_urls" id="desc_parse_urls"{% if S_DESC_URLS_CHECKED %} checked="checked"{% endif %}>
										<label for="desc_parse_urls">{{ L_PARSE_URLS }}</label>
									</div>
								</div>
							</div>

							{% if not S_SPECIAL_GROUP %}
								<fieldset class="iz-fieldset">
									<legend class="iz-label">{{ L_GROUP_TYPE }}{{ L_COLON }}</legend>
									<p class="iz-hint">{{ L_GROUP_TYPE_EXPLAIN }}</p>

									<div class="iz-choicegroup" role="radiogroup" aria-label="{{ L_GROUP_TYPE }}">
										<div class="iz-choice">
											<input type="radio" name="group_type" id="group_type1" value="{{ GROUP_TYPE_FREE }}"{{ GROUP_FREE }}>
											<label for="group_type1">{{ L_GROUP_OPEN }}</label>
										</div>
										<div class="iz-choice">
											<input type="radio" name="group_type" id="group_type2" value="{{ GROUP_TYPE_OPEN }}"{{ GROUP_OPEN }}>
											<label for="group_type2">{{ L_GROUP_REQUEST }}</label>
										</div>
										<div class="iz-choice">
											<input type="radio" name="group_type" id="group_type3" value="{{ GROUP_TYPE_CLOSED }}"{{ GROUP_CLOSED }}>
											<label for="group_type3">{{ L_GROUP_CLOSED }}</label>
										</div>
										<div class="iz-choice">
											<input type="radio" name="group_type" id="group_type4" value="{{ GROUP_TYPE_HIDDEN }}"{{ GROUP_HIDDEN }}>
											<label for="group_type4">{{ L_GROUP_HIDDEN }}</label>
										</div>
									</div>
								</fieldset>
							{% else %}
								<input name="group_type" type="hidden" value="{{ GROUP_TYPE_SPECIAL }}" />
							{% endif %}

						</div>
					</section>

					<div class="iz-space iz-space--md"></div>

					<section class="iz-card iz-card--nested">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_GROUP_SETTINGS_SAVE }}</h3>
						</header>

						<div class="iz-card__body">

							<div class="iz-field">
								<label class="iz-label" for="group_colour">{{ L_GROUP_COLOR }}{{ L_COLON }}</label>
								<p class="iz-hint">{{ L_GROUP_COLOR_EXPLAIN }}</p>

								<div class="iz-inputgroup">
									<input
										type="text"
										name="group_colour"
										id="group_colour"
										value="{{ GROUP_COLOUR }}"
										maxlength="6"
										placeholder="E.g. #26bcb5"
										class="iz-input"
									>
									<span class="iz-inputgroup__addon" aria-hidden="true" style="background-color: #{{ GROUP_COLOUR }};">&nbsp;&nbsp;&nbsp;</span>
									<a class="iz-inputgroup__addon iz-link" href="#" id="color_palette_toggle">{{ L_COLOUR_SWATCH }}</a>
								</div>

								<div id="color_palette_placeholder" class="iz-hidden" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
							</div>

							<div class="iz-field">
								<label class="iz-label" for="group_rank">{{ L_GROUP_RANK }}{{ L_COLON }}</label>
								<select class="iz-select" name="group_rank" id="group_rank">{{ S_RANK_OPTIONS }}</select>
							</div>

						</div>
					</section>

					<div class="iz-space iz-space--md"></div>

					{% include 'ucp_avatar_options.html' %}

					<div class="iz-space iz-space--md"></div>

					<div class="iz-actions">
						{{ S_HIDDEN_FIELDS }}

						{% if S_DISPLAY_GALLERY %}
							<button type="submit" name="display_gallery" value="{{ L_DISPLAY_GALLERY }}" class="iz-btn iz-btn--ghost">
								{{ L_DISPLAY_GALLERY }}
							</button>
						{% endif %}

						{% if S_IN_AVATAR_GALLERY %}
							<button type="submit" name="cancel" value="{{ L_CANCEL }}" class="iz-btn iz-btn--ghost">
								{{ L_CANCEL }}
							</button>
						{% endif %}

						<button type="submit" name="update" value="{{ L_SUBMIT }}" class="iz-btn iz-btn--primary">
							{{ L_SUBMIT }}
						</button>

						{{ S_FORM_TOKEN }}
					</div>

				{% elseif S_LIST %}

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

							<div class="iz-card__body">
								<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUPS }}">
									<table class="iz-table">
										<thead>
											<tr>
												<th scope="col">{{ L_GROUP_LEAD }}</th>
												<th scope="col" class="iz-only-desktop">{{ L_GROUP_DEFAULT }}</th>
												<th scope="col" class="iz-only-desktop">{{ L_POSTS }}</th>
												<th scope="col" class="iz-only-desktop">{{ L_JOINED }}</th>
												<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
											</tr>
										</thead>
										<tbody>
											{% for leader in leader %}
												<tr>
													<td>{{ leader.USERNAME_FULL }}</td>
													<td class="iz-only-desktop">{% if leader.S_GROUP_DEFAULT %}{{ L_YES }}{% else %}{{ L_NO }}{% endif %}</td>
													<td class="iz-only-desktop">{{ leader.USER_POSTS }}</td>
													<td class="iz-only-desktop">{{ leader.JOINED }}</td>
													<td class="iz-table__check">&nbsp;</td>
												</tr>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div>
						</section>

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

					{% for member in member %}
						{% if member.S_PENDING %}
							<section class="iz-card iz-card--nested">
								<header class="iz-card__header">
									<h3 class="iz-card__title">{{ L_GROUPS }}</h3>
								</header>
								<div class="iz-card__body">
									<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_PENDING }}">
										<table class="iz-table">
											<thead>
												<tr>
													<th scope="col">{{ L_GROUP_PENDING }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_GROUP_DEFAULT }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_POSTS }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_JOINED }}</th>
													<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
												</tr>
											</thead>
											<tbody>
						{% elseif member.S_APPROVED %}
							{% if S_PENDING_SET %}
											</tbody>
										</table>
									</div>
								</div>
							</section>

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

							<section class="iz-card iz-card--nested">
								<header class="iz-card__header">
									<h3 class="iz-card__title">{{ L_GROUPS }}</h3>
								</header>
								<div class="iz-card__body">
									<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUP_APPROVED }}">
										<table class="iz-table">
											<thead>
												<tr>
													<th scope="col">{{ L_GROUP_APPROVED }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_GROUP_DEFAULT }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_POSTS }}</th>
													<th scope="col" class="iz-only-desktop">{{ L_JOINED }}</th>
													<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
												</tr>
											</thead>
											<tbody>
						{% else %}
												<tr>
													<td>{{ member.USERNAME_FULL }}</td>
													<td class="iz-only-desktop">{% if member.S_GROUP_DEFAULT %}{{ L_YES }}{% else %}{{ L_NO }}{% endif %}</td>
													<td class="iz-only-desktop">{{ member.USER_POSTS }}</td>
													<td class="iz-only-desktop">{{ member.JOINED }}</td>
													<td class="iz-table__check">
														<div class="iz-choice iz-choice--check">
															<input type="checkbox" name="mark[]" value="{{ member.USER_ID }}" id="mark-{{ member.USER_ID }}">
															<label for="mark-{{ member.USER_ID }}">
																<span class="iz-visually-hidden">{{ L_MARK }}</span>
															</label>
														</div>
													</td>
												</tr>
						{% endif %}
					<!-- BEGINELSE -->
						<section class="iz-card iz-card--nested">
							<header class="iz-card__header">
								<h3 class="iz-card__title">{{ L_GROUPS }}</h3>
							</header>
							<div class="iz-card__body">
								<div class="iz-tablewrap" role="region" aria-label="{{ L_MEMBERS }}">
									<table class="iz-table">
										<thead>
											<tr>
												<th scope="col">{{ L_MEMBERS }}</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>{{ L_GROUPS_NO_MEMBERS }}</td>
											</tr>
					{% endfor %}
										</tbody>
									</table>
								</div>
							</div>
						</section>

						<div class="iz-space iz-space--sm"></div>

						{% if pagination %}
							<nav class="iz-paginationbar" aria-label="{{ L_PAGINATION }}">
								<ul class="iz-pagination__list">
									{% include 'pagination.html' %}
								</ul>
							</nav>
						{% endif %}

						<div class="iz-space iz-space--sm"></div>

						<div class="iz-toolbar iz-toolbar--ucp-actions" aria-label="{{ L_OPTIONS }}">
							<div class="iz-toolbar__left">
								<div class="iz-actions">
									<a href="javascript:void(0)" class="iz-btn iz-btn--ghost iz-btn--sm" onclick="marklist('ucp', 'mark', true); return false;" title="{{ L_MARK_ALL }}">
										{{ L_MARK_ALL }}
									</a>
									<a href="javascript:void(0)" class="iz-btn iz-btn--ghost iz-btn--sm" onclick="marklist('ucp', 'mark', false); return false;" title="{{ L_UNMARK_ALL }}">
										{{ L_UNMARK_ALL }}
									</a>
								</div>
							</div>

							<div class="iz-toolbar__right">
								<div class="iz-inputgroup">
									<select class="iz-select" name="action" aria-label="{{ L_SELECT_OPTION }}">
										<option value="">{{ L_SELECT_OPTION }}</option>
										{{ S_ACTION_OPTIONS }}
									</select>
									<button name="update" value="{{ L_SUBMIT }}" type="submit" class="iz-btn iz-btn--primary">
										{{ L_SUBMIT }}
									</button>
								</div>
							</div>
						</div>

						<div class="iz-space iz-space--md"></div>

						<section class="iz-card iz-card--nested">
							<header class="iz-card__header">
								<h3 class="iz-card__title">{{ L_ADD_USERS }}</h3>
							</header>

							<div class="iz-card__body">
								<p class="iz-prose">{{ L_ADD_USERS_UCP_EXPLAIN }}</p>

								<fieldset class="iz-fieldset">
									<legend class="iz-label">{{ L_USER_GROUP_DEFAULT }}{{ L_COLON }}</legend>
									<p class="iz-hint">{{ L_USER_GROUP_DEFAULT_EXPLAIN }}</p>

									<div class="iz-choicegroup" role="radiogroup" aria-label="{{ L_USER_GROUP_DEFAULT }}">
										<div class="iz-choice">
											<input type="radio" name="default" id="default1" value="1">
											<label for="default1">{{ L_YES }}</label>
										</div>
										<div class="iz-choice">
											<input type="radio" name="default" id="default0" value="0" checked="checked">
											<label for="default0">{{ L_NO }}</label>
										</div>
									</div>
								</fieldset>

								<div class="iz-field">
									<label class="iz-label" for="usernames">{{ L_USERNAME }}{{ L_COLON }}</label>
									<p class="iz-hint">{{ L_USERNAMES_EXPLAIN }}</p>

									<textarea rows="2" name="usernames" id="usernames" class="iz-textarea"></textarea>

									<div class="iz-space iz-space--xs"></div>

									<a class="iz-link" href="{{ U_FIND_USERNAME }}" onclick="find_username(this.href); return false;">
										{{ L_FIND_USERNAME }}
									</a>
								</div>

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

				{% else %}

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

							<div class="iz-card__body">
								<div class="iz-tablewrap" role="region" aria-label="{{ L_GROUPS }}">
									<table class="iz-table">
										<thead>
											<tr>
												<th scope="col">{{ L_GROUP_LEADER }}</th>
												<th scope="col" class="iz-table__actions">{{ L_OPTIONS }}</th>
											</tr>
										</thead>
										<tbody>
											{% for leader in leader %}
												<tr>
													<td>
														<a class="iz-link" href="{{ leader.U_EDIT }}"{% if leader.GROUP_COLOUR %} style="color: #{{ leader.GROUP_COLOUR }};"{% endif %}>{{ leader.GROUP_NAME }}</a>
														{% if leader.GROUP_DESC %}<div class="iz-meta iz-meta--small">{{ leader.GROUP_DESC }}</div>{% endif %}
													</td>
													<td class="iz-table__actions">
														<div class="iz-actions iz-actions--compact">
															<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ leader.U_EDIT }}" title="{{ L_EDIT }}">{{ L_EDIT }}</a>
															<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ leader.U_LIST }}" title="{{ L_GROUP_LIST }}">{{ L_GROUP_LIST }}</a>
														</div>
													</td>
												</tr>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div>
						</section>
					{% else %}
						<div class="iz-alert iz-alert--info" role="status">
							<strong>{{ L_NO_LEADERS }}</strong>
						</div>
					{% endif %}

				{% endif %}

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}