#parse("${templatePath}/recovery_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>

			#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>
			#else
                <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>
			#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 class="mt-4 flex flex-col flex-auto block"
				  id="$gui.name"
				  name="$gui.name"
				  method="POST"
				  target="_self"
				  action="$formTarget"
				  autocomplete="off"
                  accept-charset="UTF-8">
				#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
                <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
                        <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")