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

            <h3 class="font-header text-h3 text-space-blue dark:text-white mb-6">
								$text.get("loainfo.title")
				            </h3>
				            <h5 class="font-header text-h5 text-space-blue dark:text-white mb-4">
								$text.get("loainfo.helper")
				            </h5>
				            <p class="font-body text-body-l text-space-blue dark:text-white mb-4">
								$text.get("loainfo.description.$gui.getGuiElem('loainfo').value")
				            </p>
				            <p class="font-body text-body-l text-space-blue dark:text-white mb-4">
								$text.get("loainfo.startNow")
				            </p>

			#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 ">

                <div class="w-full sm:static mb-6 sm:mb-0 mt-4 sm:mt-52">
                    <div class="flex sm:flex-row-reverse flex-col gap-2">
                        <agov-button
                                class="block basis-full"
                                data-name="goToRegistration"
                                data-value="goToRegistration"
                                data-label="$text.get("loainfo.startVerification")"
                                data-type="submit"
                                data-fullwidth="true">
                        </agov-button>
                        <agov-button
                                class="block basis-full"
                                data-style="secondary"
                                data-name="goToOriginApp"
                                data-value="goToOriginApp"
                                data-label="$text.get("loainfo.later")"
                                data-type="submit"
                                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/insufficient_rights.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/insufficient_rights-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>

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