#parse("${templatePath}/recovery_header.vm")
#parse("${templatePath}/backdrop.vm")

<div id="mainContent" class="container mx-auto sm:mt-32 sm:max-w-full flex flex-auto sm:block">
	<div class="flex flex-col-reverse sm:flex-row justify-evenly items-center gap-5 w-full">
		<div class="flex flex-col sm:bg-white sm:dark:bg-surface-black rounded-[20px] sm:px-10 sm:py-10 max-w-[550px] w-full
		basis-full md:basis-1/2 min-h-[535px]">
	<span id="spinner" class="hidden absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
				<img src="${login.appDataPath}/static/images/spinner.svg" class="animate-spin block dark:hidden">
				<img src="${login.appDataPath}/static/images/spinner-dark.svg" class="animate-spin hidden dark:block">
			</span>
			<div id="blurBackdrop" class="hidden absolute backdrop-blur-sm -top-1 -bottom-96 -left-4 -right-4 z-20"></div>
			<div class="flex flex-col gap-8">
				<div class="flex items-baseline">
					#set($error = $gui.getGuiElem("lasterror"))
					<h3 class="font-header text-h3 text-space-blue dark:text-white mr-3">
						$text.get("general.recovery")
					</h3>
					<h4 class="font-header text-h4 text-disabled-grey dark:text-silver">
						$text.get("general.entryCode")
					</h4>
				</div>
				#if (($error.value && $error.value != ""))
					#if (($error.value == "locked"))
						<div class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4">
							<i class="fa-regular fa-exclamation-circle rounded-full p-3 text-error dark:text-dark-error bg-error/10 dark:bg-dark-error-icon mr-4 text-xl leading-none"></i>
							<p class="font-body text-body-l text-space-blue dark:text-white">
								$text.get("recovery_check_code.banner.lockedError")
							</p>
						</div>
						<p class="font-body text-body-l text-space-blue dark:text-white">
							$text.get("recovery_check_code.too_many_tries.instruction1")
						</p>
						<p class="font-body text-body-l text-space-blue dark:text-white">
							$text.get("recovery_check_code.too_many_tries.instruction2")
						</p>
					#else
						<div class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4">
							<i class="fa-regular fa-exclamation-circle rounded-full p-3 text-error dark:text-dark-error bg-error/10 dark:bg-dark-error-icon mr-4 text-xl leading-none"></i>
							<p class="font-body text-body-l text-space-blue dark:text-white">
								$text.get("recovery_check_code.codeIncorrect")
							</p>
						</div>
						<p class="font-body text-body-l text-space-blue dark:text-white">
							$text.get("recovery_check_code.instruction")
						</p>
					#end
				#else
					<p class="font-body text-body-l text-space-blue dark:text-white">
						$text.get("recovery_check_code.instruction")
					</p>
				#end
			</div>
			#set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
			#if (($error.value && $error.value != "locked") || !($error.value))
				<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
					  accept-charset="UTF-8"
					  class="flex flex-col flex-auto block">
					<agov-input
							id="recovery_code_input"
							class="py-16"
							data-label="$text.get("recovery_check_code.enterRecoveryCode")"
							data-isLabelHidden="true"
							data-placeholder=""
							data-id="code"
							data-name="code"
							data-value=""
							data-type="text"
							data-autofocus="true"
							data-email_invalid="$text.get("recovery_check_code.invalid.code")"
							data-email_too_long="$text.get("recovery_check_code.invalid.code.tooLong")"
							data-email_required="$text.get("recovery_check_code.invalid.code.required")">
					</agov-input>
					<div class="w-full sm:static mt-auto mb-6 sm:mb-0">
						<div class="flex flex-col flex-row-reverse gap-4">
							<agov-button
									id="recovery_code_btn"
									class="block basis-full"
									data-name="confirm"
									data-value="confirm"
									data-id="confirm"
									data-label="$text.get("general.confirm")"
									data-type="submit"
									data-fullwidth="true">
							</agov-button>
							<agov-button
									id="recovery_code_btn_cancel"
									class="block basis-full"
									data-style="frameless"
									data-name="cancelFido2"
									data-value="cancelFido2"
									data-id="cancelFido2"
									data-label="$text.get("recovery_check_code.noAccess")"
									data-type="button"
									data-fullwidth="true"
									data-validate="false">
							</agov-button>
							<input class="hidden" name="authRequestId" type="hidden"
								   value="$gui.getGuiElem('authRequestId').value"/>
						</div>
					</div>
				</form>
			#else
				<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
					  accept-charset="UTF-8"
					  class="flex flex-col flex-auto block">
					<div class="w-full sm:static mt-auto mb-6 sm:mb-0">
						<div class="flex flex-col flex-row-reverse gap-4">
							<agov-button
									id="recovery_code_btn_cancel"
									class="block basis-full"
									data-name="cancelFido2"
									data-value="cancelFido2"
									data-id="cancelFido2"
									data-label="$text.get("recovery_check_code.noAccess")"
									data-type="button"
									data-fullwidth="true"
									data-validate="false">
							</agov-button>
							<input class="hidden" name="authRequestId" type="hidden"
								   value="$gui.getGuiElem('authRequestId').value"/>
						</div>
					</div>
				</form>
			#end
		</div>
		<form class="hidden"
			  id="$gui.name"
			  name="$gui.name"
			  method="POST"
			  target="_self"
			  action="$formTarget"
			  autocomplete="off"
			  accept-charset="UTF-8">
			<agov-button
					data-name="submit"
					data-id="submitFormButton"
					data-value="submit"
					data-type="submit"
					data-fullwidth="true">
			</agov-button>
			<input class="hidden" name="no_code" id="noCodeCheckbox" type="checkbox" value="true">
			<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
		</form>
		<img alt="" src="${login.appDataPath}/static/images/recovery.svg"
			 class="md:max-w-[520px] max-w-[350px] sm:max-w-[300px] w-full md:basis-1/2 dark:hidden hidden md:block">
		<img alt="" src="${login.appDataPath}/static/images/recovery_dark.svg"
			 class="md:max-w-[520px] max-w-[350px] sm:max-w-[300px] w-full md:basis-1/2 hidden dark:md:block">
	</div>
</div>

<script src="${login.appDataPath}/static/js-code/recovery_check_code.js">
</script>

#parse("${templatePath}/footer.vm")