#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">
				<agov-banner class="hidden error"
							 id="errorBanner"
							 data-error-description="$text.get("providePhoneNumber.errorBanner")">
				</agov-banner>
                <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">
				<agov-banner class="info"
							 data-info-description="$text.get("providePhoneNumber.banner")">
				</agov-banner>
                <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>

<agov-modal class="hidden"
			id="repeatModal"
			data-title="$text.get("providePhoneNumber.modal.title")"
			data-description="$text.get("providePhoneNumber.modal.description")"
			data-cancel-button-label="$text.get("general.back")"
			data-submit-button-label="$text.get("general.continue")"
			data-submit-button-event-name="repeatModalSubmitEvent"
			data-cancel-button-event-name="repeatModalCancelEvent">
	<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>
</agov-modal>
<form class="hidden"
	  id="$gui.name"
	  name="$gui.name"
	  method="POST"
	  target="_self"
	  action="$formTarget"
	  autocomplete="off"
	  accept-charset="UTF-8">
	<agov-input data-label="$text.get("providePhoneNumber.modal.inputLabel")"
				data-id="mobile"
				data-name="mobile"
				data-placeholder=""
				data-value=""
				data-type="tel">
	</agov-input>
	<agov-button data-name="submit"
				 data-id="submitPhoneNumber"
				 data-value="submit"
				 data-type="submit"
				 data-label="$text.get("general.continue")">
	</agov-button>
	<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
</form>

<agov-modal class="hidden"
			id="declineModal"
			data-title="$text.get("providePhoneNumber.laterModal.title")"
			data-cancel-button-label="$text.get("general.back")"
			data-submit-button-label="$text.get("general.continue")"
			data-submit-button-event-name="declineModalSubmitEvent"
			data-cancel-button-event-name="declineModalCancelEvent">
	<div class="flex flex-col gap-4" id="modalDescriptionExtra">
		<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>
</agov-modal>
<form class="hidden"
	  id="$gui.name"
	  name="$gui.name"
	  method="POST"
	  target="_self"
	  action="$formTarget"
	  autocomplete="off"
	  accept-charset="UTF-8">
	<agov-button
			data-name="submit"
			data-id="continueWithoutPhoneNumberButton"
			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>

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

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