{% 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_TITLE }}</h2>
			</header>

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

				{% if ERROR %}
					<div class="iz-alert iz-alert--info" role="status">
						<strong>{{ L_INFO_BOX }}</strong>&nbsp;{{ ERROR }}
					</div>
					<div class="iz-space iz-space--sm"></div>
				{% endif %}

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

					<div class="iz-card__body">
						<div class="iz-tablewrap" role="region" aria-label="{{ L_LOGIN_KEY }}">
							<table class="iz-table iz-table--autologin-keys">
								<thead>
									<tr>
										<th scope="col">{{ L_IP }}</th>
										<th scope="col" class="iz-only-desktop">{{ L_LOGIN_KEY }}</th>
										<th scope="col" class="iz-only-desktop">{{ L_LOGIN_TIME }}</th>
										<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
									</tr>
								</thead>
								<tbody>
									{% for sessions in sessions %}
										<tr>
											<td>{{ sessions.IP }}</td>

											<td class="iz-only-desktop">
												<code class="iz-code">{{ sessions.KEY }}</code>
											</td>

											<td class="iz-only-desktop">
												<div class="iz-meta iz-meta--small">{{ sessions.LOGIN_TIME }}</div>
											</td>

											<td class="iz-table__check">
												<div class="iz-choice iz-choice--check">
													<input
														type="checkbox"
														name="keys[]"
														value="{{ sessions.KEY }}"
														id="key_{{ sessions.S_ROW_COUNT }}"
													/>
													<label for="key_{{ sessions.S_ROW_COUNT }}">
														<span class="iz-visually-hidden">{{ L_MARK }}</span>
													</label>
												</div>
											</td>
										</tr>
									<!-- BEGINELSE -->
										<tr>
											<td colspan="4">
												<div class="iz-alert iz-alert--info" role="status">
													{{ L_PROFILE_NO_AUTOLOGIN_KEYS }}
												</div>
											</td>
										</tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</section>

				{% if sessions %}
					<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">
								{{ S_HIDDEN_FIELDS }}

								<button type="button" class="iz-btn iz-btn--ghost iz-btn--sm"
									onclick="marklist('ucp', 'keys', true); return false;">
									{{ L_MARK_ALL }}
								</button>

								<button type="button" class="iz-btn iz-btn--ghost iz-btn--sm"
									onclick="marklist('ucp', 'keys', false); return false;">
									{{ L_UNMARK_ALL }}
								</button>

								<button type="submit" name="submit" value="{{ L_DELETE_MARKED }}" class="iz-btn iz-btn--danger iz-btn--sm">
									{{ L_DELETE_MARKED }}
								</button>

								{{ S_FORM_TOKEN }}
							</div>
						</div>
					</div>
				{% endif %}

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}