#parse("${templatePath}/header.vm")
#set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
#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">
            <div class="flex mb-8 items-baseline">
                <h3 class="font-header text-h3 text-space-blue dark:text-white mr-3">
					$text.get("providePhoneNumber.title")
                </h3>
            </div>
            <div class="flex flex-col gap-8">
                <div class="error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center p-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("providePhoneNumber.errorBanner")
                    </p>
                </div>
                <div class="flex flex-col gap-4">
                    <p class="font-body text-body-l text-space-blue dark:text-white">
						$text.get("providePhoneNumber.description")
                    </p>
                    <agov-input
                            id="agovInputPhoneNumberInput"
                            data-label="$text.get("providePhoneNumber.inputLabel")"
                            data-id="phoneNumberInput"
                            data-name="phoneNumberInput"
                            data-placeholder=""
                            data-value=""
                            data-type="tel"
                            data-autofocus="true"
                            data-is_icon_padding_ignored="true"
                            data-email_invalid="$text.get("general.wrongPhoneNumber")"
                            data-email_required="$text.get("general.fieldRequired")">
                    </agov-input>
                </div>
            </div>
            <div class="flex flex-col gap-4">
                <div class="info flex rounded-xl bg-info-background dark:bg-dark-info-background items-center p-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("providePhoneNumber.banner")
                    </p>
                </div>
                <div class="w-full sm:static mt-auto">
                    <div class="flex flex-col-reverse sm:flex-row gap-4">
                        <form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
                              class="w-full"
                              accept-charset="UTF-8">
                            <agov-button
                                    data-name="submit"
                                    data-value="submit"
                                    data-style="secondary"
                                    data-label="$text.get("loainfo.later")"
                                    data-type="submit"
                                    data-fullwidth="true">
                            </agov-button>
                            <input class="hidden" name="skip" value="later">
                            <input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
                        </form>
                        <agov-button
                                id="providePhoneNumberContinueButton"
                                class="w-full"
                                data-style="primary"
                                data-label="$text.get("providePhoneNumber.saveButtonText")"
                                data-type="button"
                                data-fullwidth="true">
                        </agov-button>
                    </div>
                </div>
            </div>
        </div>
        <img alt="" src="${login.appDataPath}/static/images/provide-phone-number.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/provide-phone-number-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("providePhoneNumber.modal.title")
        </h4>
        <div class="flex flex-col gap-[72px]">
            <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("providePhoneNumber.modal.description")
                    </p>
                </div>
                <agov-input
                        id="agovInputRepeatPhoneNumberInput"
                        data-label="$text.get("providePhoneNumber.modal.inputLabel")"
                        data-id="repeatPhoneNumberInput"
                        data-name="repeatPhoneNumberInput"
                        data-placeholder=""
                        data-value=""
                        data-type="tel"
                        data-autofocus="true"
                        data-is_icon_padding_ignored="true"
                        data-email_invalid="$text.get("general.wrongPhoneNumber")"
                        data-email_required="$text.get("general.fieldRequired")">
                </agov-input>
                <form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
                      accept-charset="UTF-8"
                      class="hidden flex flex-col flex-auto block">
                    <agov-input
                            id="agovInputMobile"
                            data-label="$text.get("providePhoneNumber.modal.inputLabel")"
                            data-id="mobile"
                            data-name="mobile"
                            data-placeholder=""
                            data-value=""
                            data-type="tel"
                            data-autofocus="true">
                    </agov-input>
                    <agov-button
                            class="basis-full"
                            data-name="submit"
                            data-id="submitPhoneNumber"
                            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 class="w-full sm:static mt-auto">
                <div class="flex justify-end flex-col-reverse sm:flex-row gap-4">
                    <agov-button
                            class="block"
                            id="repeatPhoneNumberModalBack"
                            data-style="secondary"
                            data-label="$text.get("general.back")"
                            data-type="button"
                            data-fullwidth="true">
                    </agov-button>
                    <agov-button
                            class="block"
                            id="repeatPhoneNumberModalContinue"
                            data-style="primary"
                            data-label="$text.get("general.continue")"
                            data-type="button"
                            data-fullwidth="true">
                    </agov-button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="declineModal" 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("providePhoneNumber.laterModal.title")
        </h4>
        <div class="flex flex-col gap-[72px]">
            <div class="flex flex-col gap-4" id="modalDescription">
                <p class="font-body text-body-l text-space-blue dark:text-white">
					$text.get("providePhoneNumber.laterModal.description1")
                </p>
                <p class="font-body text-body-l text-space-blue dark:text-white">
					$text.get("providePhoneNumber.laterModal.description2")
                </p>
                <p class="font-body text-body-l text-space-blue dark:text-white">
					$text.get("providePhoneNumber.laterModal.description3")
                </p>
            </div>
            <div class="w-full sm:static mt-auto sm:justify-items-end">
                <div class="flex justify-end flex-col-reverse sm:flex-row gap-4">
                    <agov-button
                            id="declineModalBack"
                            data-style="secondary"
                            data-label="$text.get("general.back")"
                            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="flex flex-col flex-auto block">
                        <agov-button
                                data-name="submit"
                                data-value="submit"
                                data-label="$text.get("general.continue")"
                                data-type="submit"
                                data-fullwidth="true">
                        </agov-button>
                        <input class="hidden" name="skip" value="persistent">
                        <input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

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

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