#parse("${templatePath}/recovery_header.vm")
#set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
#set ($PDFRecoveryTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','').replaceAll(
	'^(https:\/\/[^\/]+\/).*$', '$1')))
#set ($concat = "recovery/pdf?authToken=")
#set ($PDFLink = "$PDFRecoveryTarget$concat$gui.getGuiElem('pdfAuthToken').value")

<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 flex-col gap-8">
                <div class="flex items-baseline">
                    <h3 class="font-header text-h3 text-space-blue dark:text-white mr-3">
						$text.get("general.login")
                    </h3>
                    <h4 class="font-header text-h4 text-disabled-grey dark:text-silver">
						$text.get("recovery_code.newRecoveryCode")
                    </h4>
                </div>
                <div id="codeNotSeen"
                     class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-4 mb-4 hidden">
                    <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_code.banner.error")
                    </p>
                </div>
                <p class="font-body text-body-l text-space-blue dark:text-white">
					$text.get("recovery_code.instruction")
                </p>
                <div class="flex justify-center items-center relative mb-4 py-4 pr-4 pl-8 rounded-xl bg-indigo-light
					dark:bg-purple-black">
                    <div id="codeBlur"
                         class="absolute top-0 bottom-0 left-0 right-0 backdrop-blur-sm rounded-xl z-50">
                    </div>
                    <div>
                        <p class="font-header text-h5 text-space-blue dark:text-white select-none"
                           id="recoveryCode">
							$gui.getGuiElem('isiwebpasswd').value
                        </p>
                        <p class="font-body text-body-m text-space-blue dark:text-white text-center">
							$text.get("recovery_code.validUntil")
							$gui.getGuiElem('validTil').value
                        </p>
                    </div>
                </div>
            </div>
            <agov-button
                    id="showCode"
                    class="block basis-full mb-20"
                    data-style="secondary"
                    data-label="$text.get("general.recoveryCode.reveal")"
                    data-type="button"
                    data-fullwidth="true">
            </agov-button>
            <a class="mb-20 hidden"
               id="downloadPDF"
               target="_blank"
               href="$PDFLink">
                <agov-button
                        class="block basis-full"
                        data-style="secondary"
                        data-label="$text.get("general.recoveryCode.downloadPdf")"
                        data-type="button"
                        data-fullwidth="true">
                </agov-button>
            </a>
            <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("general.recoveryCode.repeatCodeError")
                </p>
            </div>
            <agov-button
                    id="recoveryCodeContinue"
                    class="block basis-full"
                    data-type="button"
                    data-label="$text.get("general.continue")"
                    data-fullwidth="true">
            </agov-button>
        </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 block sm: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:block dark:sm:hidden dark:md:block">
    </div>
</div>

<div id="modal" class="fixed top-0 bottom-0 left-0 right-0 pb-20 z-50 hidden">
    <div class="fixed top-0 bottom-0 left-0 right-0 backdrop-blur-[10px]" id="modal_light"></div>
    <div class="fixed top-0 bottom-0 left-0 right-0 bg-[#E2E2E2E5]/80 dark:bg-[#111111]/90" id="modal_dark"></div>

    <div id="drawer"
         class="fixed bg-white dark:bg-surface-black rounded-[20px] p-10 w-11/12 sm:max-w-[660px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">

        <div id="modalTab" class="mb-6 cursor-pointer hidden">
            <div class="w-10 h-1 rounded-full bg-light-grey dark:bg-ash mx-auto"></div>
        </div>
        <h4 id="modalTitle" class="font-header text-h4 text-space-blue dark:text-white mb-8">
			$text.get("general.recoveryCode.repeatCodeModal.title")
        </h4>
        <div class="flex flex-col gap-8">
            <div id="modalDescription">
                <p class="font-body text-body-l text-space-blue dark:text-white">
					$text.get("general.recoveryCode.repeatCodeModal.description")
                </p>
            </div>
            <agov-input
                    data-label="$text.get("general.recoveryCode.inputLabel")"
                    data-id="repeatRecoveryCodeInput"
                    data-name="repeatRecoveryCodeInput"
                    data-placeholder=""
                    data-value=""
                    data-type="text"
                    data-autofocus="true"
                    data-email_required="$text.get("general.fieldRequired")">
            </agov-input>
        </div>
        <div class="w-full sm:static mt-auto">
            <div class="flex justify-end flex-col-reverse sm:flex-row gap-4">
                <agov-button
                        id="repeatRecoveryCodeModalBack"
                        class="block"
                        data-style="secondary"
                        data-label="$text.get("general.back")"
                        data-type="button"
                        data-fullwidth="true">
                </agov-button>
                <agov-button
                        id="repeatRecoveryCodeModalContinue"
                        class="block"
                        data-style="primary"
                        data-label="$text.get("general.continue")"
                        data-type="button"
                        data-fullwidth="true">
                </agov-button>

                <form id="$gui.name" name="$gui.name" method="POST" target="_self"
                      action="$formTarget" autocomplete="off"
                      accept-charset="UTF-8"
                      class="hidden">
                    <agov-button
                            class="block basis-full"
                            data-name="submit"
                            data-id="submit"
                            data-value="submit"
                            data-type="submit"
                            data-label="$text.get("general.continue")"
                            data-fullwidth="true">
                    </agov-button>
                    <input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
                </form>
            </div>
        </div>
    </div>
</div>

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

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