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

<agov-backdrop></agov-backdrop>
<div id="mainContent" class="container mx-auto sm:mt-32 sm:max-w-full flex flex-auto sm:block">
	<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-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">

			<div class="flex mb-6 items-baseline">
				<h3 class="font-header text-h3 text-space-blue dark:text-white mr-3">$text.get("general.recovery")</h3>
			</div>

			<div class="info flex rounded-xl bg-info-background dark:bg-dark-info-background items-center p-4 mb-4">
				<i class="fa-regular fa-info-circle rounded-full p-3 text-info dark:text-dark-info bg-info/10 dark:bg-dark-info-icon mr-4 text-xl leading-none"></i>
				<p class="font-body text-body-l text-space-blue dark:text-white">
                    $text.get("recovery_intro_email.banner.info")
				</p>
			</div>

            #set($error = $gui.getGuiElem("lasterror"))
            #if (($error.value && $error.value != ""))
				<div class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4 mb-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_intro_email.banner.error")
					</p>
				</div>
            #end

			<div id="captchaNotFilled"
				 class="hidden error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4 mb-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("error_9909")
				</p>
			</div>

            #set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
			<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
				  accept-charset="UTF-8"
				  class="mt-4 flex flex-col flex-auto block ">
                #set ($emailInput = $gui.getGuiElem('email'))
				<agov-input
						data-label="$text.get("general.email.address")"
						data-placeholder="$text.get("general.email")"
						data-id="email"
						data-name="email"
                    #if ($emailInput && $emailInput.value && $emailInput.value.length() > 0)
						data-value="$utils.escapeHtmlAttribute($emailInput.value)"
                    #else
						data-value=""
                    #end
						data-type="text"
						data-autofocus="true"
						data-left_icon="fa-envelope"
						data-email_invalid="$text.get("user_input.invalid.email")"
						data-email_too_long="$text.get("user_input.invalid.email.tooLong")"
						data-email_required="$text.get("user_input.invalid.email.required")">
				</agov-input>

				<p class="font-body text-body-l text-space-blue dark:text-white mb-2 sm:mb-8">
					<span class="font-body-semi">$text.get("recovery_intro_email.important")</span>
                    $text.get("recovery_intro_email.process")
				</p>

                #set ($siteKey = $gui.getGuiElem("friendlyCaptchaSettings.siteKey"))
                #set ($puzzleUrl = $gui.getGuiElem("friendlyCaptchaSettings.puzzleUrl"))
                #set ($captchaEnabled = $gui.getGuiElem("captchaSettings.enabled"))

                #if ($captchaEnabled.value && $captchaEnabled.value == "true")
					<div class="font-body w-full text-body-l mb-4">
						<div class="flex mt-8">
							<div class="frc-captcha"
								 id="frc-captcha"
								 data-puzzle-endpoint="$puzzleUrl.value"
								 data-sitekey="$siteKey.value"
								 data-start="auto"
								 data-lang="$login.language"
								 data-solution-field-name="captcha_response">
							</div>
						</div>
					</div>
                #end ## if

				<div class="w-full sm:static mt-auto mb-6 sm:mb-0">
					<div class="flex flex-col sm:flex-row-reverse gap-4">
                        #if ($captchaEnabled.value && $captchaEnabled.value == "true")
							<agov-button
									id="submit_btn_captcha_enabled"
									disabled="true"
									class="block basis-full"
									data-name="continue"
									data-value="continue"
									data-id="submit"
									data-label="$text.get("general.continue")"
									data-type="submit"
									data-fullwidth="true">
							</agov-button>
                        #else
							<agov-button
									id="submit_btn_captcha_disabled"
									class="block basis-full"
									data-name="continue"
									data-value="continue"
									data-id="submit"
									data-label="$text.get("general.continue")"
									data-type="submit"
									data-fullwidth="true">
							</agov-button>
                        #end ## if

						<agov-button
								class="block basis-full"
								data-style="secondary"
								data-name="cancel"
								data-value="cancel"
								data-id="cancel"
								data-label="$text.get("general.cancel")"
								data-type="submit"
								data-fullwidth="true"
								data-validate="false">
						</agov-button>
					</div>
				</div>
				<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
			</form>
		</div>
		<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_intro_email.js">
</script>


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