#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">
	<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-8 items-baseline">
				<h3 class="font-header text-h3 text-space-blue dark:text-white mr-3">$text.get("general.recovery")</h3>
			</div>

			<p class="font-body text-body-l text-space-blue dark:text-white mb-8">
                $text.get("recovery_questionnaire_loginfactor.question")
			</p>

			<div class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4 mb-4 hidden"
				 id="errorBanner">
				<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_questionnaire_loginfactor.banner.error")
				</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="flex flex-col flex-auto block ">
				<agov-questionnaire-radio-button data-text="$text.get("recovery_questionnaire_loginfactor.yes")"
								   data-groupName="radio-buttons"
								   data-value="yes"
								   data-id="yes"
								   data-name="continue">
				</agov-questionnaire-radio-button>
				<agov-questionnaire-radio-button data-text="$text.get("recovery_questionnaire_loginfactor.no")"
								   data-groupName="radio-buttons"
								   data-value="no"
								   data-id="no"
								   data-name="continue">
				</agov-questionnaire-radio-button>

				<div id="buttons" class="w-full sm:static mt-auto mb-6 sm:mb-0 mt-24 sm:mt-24">
					<div class="flex sm:flex-row-reverse flex-col gap-2">
						<agov-button
								id="questionnaire_continue_btn"
								class="block basis-full"
								data-label="$text.get("general.continue")"
								data-type="submit"
								data-fullwidth="true">
						</agov-button>
						<agov-button
								class="block basis-full"
								data-style="secondary"
								data-name="cancel"
								data-value="cancel"
								data-label="$text.get("general.back")"
								data-type="cancel"
								data-fullwidth="true">
						</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_questionnaire_loginfactor.js">
</script>

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