{% extends '/wpadmin/plugin_pages/base_inner_page.twig' %}

{% block inner_page_body %}
	<div id="SecurityAdminOverlay" class="modal fade"
		 role="dialog" tabindex="-1"
		 aria-labelledby="SecurityAdminLabel"
		 aria-hidden="true"
		 data-bs-backdrop="static"
		 data-bs-keyboard="false">
		<div class="modal-dialog security-admin-dialog">
			<div id="IcwpWpsfSecurityAdmin" class="modal-content rounded-3 shield-modal-content-raised">
				<div class="modal-body p-4 p-md-5">

					<form method="post" class="form-horizontal" id="SecurityAdminForm">

						<div class="text-center mb-4">
							<div class="shield-pin-icon text-secondary mb-2">
								{{ imgs.icon_shield|raw }}
							</div>
							<h5 id="SecurityAdminLabel" class="mb-1 fw-semibold text-secondary">{{ strings.aar_enter_access_key }}</h5>
							<p class="text-muted small mb-0">{{ strings.aar_to_manage_must_enter_key }}</p>
						</div>

						<div class="mb-3">
							<input type="password" name="sec_admin_key"
								   class="form-control form-control-lg text-center rounded-3"
								   id="sec_admin_key"
								   placeholder="{{ strings.aar_enter_access_key }}"
								   value="" autocomplete="off" autofocus />
						</div>

						<div class="d-grid mb-3">
							<button type="submit" class="btn btn-primary btn-lg" name="submit">
								{{ strings.aar_submit_access_key }}</button>
						</div>

						<div class="text-center">
							<a class="text-muted small"
							   href="{{ hrefs.aar_forget_key }}" target="_blank" rel="noopener noreferrer">
								{{ strings.aar_forget_key }}?
								<span class="icon-external-link">{{ imgs.icon_external_link|raw }}</span>
							</a>
						</div>

					</form>

					{% if flags.allow_email_override %}
						<hr class="my-3">
						<div class="text-center">
							<a href="#" id="SecAdminRemoveConfirmEmail" class="small fw-semibold">
								{{ strings.disable_security_admin }}
							</a>
							<p class="text-muted small mt-1 mb-0">
								{{ strings.send_to_email }}
							</p>
						</div>
					{% endif %}

				</div>
			</div>
		</div>
	</div>
{% endblock %}
