#if ($gui.getGuiElem('agov.appSamlRpEntityId').value)
	#set($includeCantonalBrandingInMobileMenu = true)
#else
	#set($includeCantonalBrandingInMobileMenu = false)
#end

#parse("${templatePath}/header.vm")
#set ($formTarget = $utils.escapeHtmlAttribute($gui.target.replaceAll('&?language=[^&]*','')))
#parse("${templatePath}/backdrop.vm")

<main id="mainContent"
	  class="hidden sm:grid grid-cols-[1fr_auto] gap-4 mt-8 max-w-[600px] md:max-w-[1200px] mx-auto items-start"
	  data-lastLoginMethod="$utils.escapeHtmlAttribute($gui.getGuiElem('lastLoginMethod').value)">
	<div id="cantonalBranding" class="hidden col-span-full flex items-center rounded-xl gap-5 bg-transparent px-6">
		<div class="flex items-center p-2 bg-white rounded sm:rounded-xl w-12 h-12" id="logo"></div>
		<h1 class="font-header text-h6 sm:text-h4 text-space-blue dark:text-white">
			#if ($login.language =="en")
				$utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameEN').value)
			#elseif ($login.language =="de")
				$utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameDE').value)
			#elseif ($login.language =="fr")
				$utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameFR').value)
			#elseif ($login.language =="it")
				$utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameIT').value)
			#else
				$utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameRM').value)
			#end
		</h1>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 md:grid-rows-1 gap-6 md:gap-y-0 p-6 items-start rounded-[2.25rem]
	sm:bg-lily-blue dark:sm:bg-purple-black text-space-blue dark:text-white">
		<section id="loginCard"
				 class="md:row-span-full rounded-[1.25rem] p-10 bg-white dark:bg-surface-black flex flex-col">
			<h2 id="desktopTitle" class="font-header text-h4 font-bold text-space-blue dark:text-white mr-3 mb-6"
				data-accessAppLabel="$text.get("general.login.accessApp")"
				data-securityKeyLabel="$text.get("general.login.securityKey")"></h2>

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

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

			<div id="desktopMenu">
				<div class="flex items-center mt-4">
					<span class="h-px w-full bg-silver"></span>
				</div>
				<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget"
					  autocomplete="off"
					  accept-charset="UTF-8" class="flex flex-col gap-4 pt-6">
					<button class="hidden" id="onReload" name="onReload"></button>
					<h2 id="cannotLoginSubtitle" class="font-header text-h5 font-bold text-space-blue dark:text-white"
						data-securityKeyLabel="$text.get("mauth_usernameless.cannotLogin.securityKey")"
						data-accessAppLabel="$text.get("mauth_usernameless.cannotLogin.accessApp")"></h2>
					<agov-button
							data-style="secondary"
							data-name="fallback"
							data-value="recovery"
							data-label="<i class='fa-regular fa-suitcase-medical text-indigo dark:text-lilac mr-2'></i>$text.get(
								"mauth_usernameless.startRecovery")"
							data-type="submit"
							data-fullwidth="true"
							class="block">
					</agov-button>
					<input class="hidden" name="authRequestId" type="hidden"
						   value="$gui.getGuiElem('authRequestId').value"/>
				</form>
			</div>
		</section>
		<div id="otherMethodsAndRegister" class="flex flex-col gap-6">
			<section id="otherLoginMethods"
					 class="md:self-stretch rounded-[1.25rem] p-10 bg-white dark:bg-surface-black flex flex-col gap-4">
				<h2 class="font-header text-h4 font-bold text-space-blue dark:text-white mr-3 mb-4">$text.get(
					"general.otherLoginMethods")</h2>
				<agov-button
						id="accessAppLoginBtn"
						data-name="accessApp"
						data-value="accessApp"
						data-image="${login.appDataPath}/static/images/accessApp.svg"
						data-imagedark="${login.appDataPath}/static/images/accessApp_dark.svg"
						data-label="$text.get("general.accessApp")"
						data-type="button"
						data-style="secondary"
						data-fullwidth="true">
				</agov-button>
				<agov-button
						id="securityKeyLoginBtn"
						data-name="securityKey"
						data-value="securityKey"
						data-image="${login.appDataPath}/static/images/securityKey.svg"
						data-imagedark="${login.appDataPath}/static/images/securityKey_dark.svg"
						data-label="$text.get("general.securityKey")"
						data-type="button"
						data-style="secondary"
						data-fullwidth="true">
				</agov-button>
			</section>
			<section id="registerCard"
					 class="md:self-stretch rounded-[1.25rem] p-10 bg-white dark:bg-surface-black flex flex-col gap-6">
				<h2 class="font-header text-h4 font-bold text-space-blue dark:text-white">$text.get("general.registration")</h2>
				<p class="font-header text-h5 font-bold text-space-blue dark:text-white mb-6">$text.get(
					"mauth_usernameless.noAccount")</p>
				<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget"
					  autocomplete="off"
					  accept-charset="UTF-8" class="w-full">
					<agov-button
							class="block"
							data-style="secondary"
							data-name="fallback"
							data-value="register"
							data-id="fallback"
							data-label="$text.get("general.registerNow")"
							data-type="submit"
							data-fullwidth="true">
					</agov-button>
					<input class="hidden" name="authRequestId" type="hidden"
						   value="$gui.getGuiElem('authRequestId').value"/>
				</form>
			</section>
		</div>
	</div>
	<span class="flex flex-row items-center m-auto hidden lg:block">
		<img alt="" src="${login.appDataPath}/static/images/login.svg" class="w-[320px] h-[468px] self-center block dark:hidden">
		<img alt="" src="${login.appDataPath}/static/images/login_dark.svg" class="w-[320px] h-[468px] self-center hidden dark:block">
	</span>
</main>

<main id="mobileMainContainer"
	  class="sm:hidden grow text-space-blue dark:text-white flex flex-col gap-2"
	  data-lastLoginMethod="$utils.escapeHtmlAttribute($gui.getGuiElem('lastLoginMethod').value)">
	#parse("${templatePath}/otherLoginMethodsMobile.vm")
	<span id="loginContent" class="flex flex-col h-[calc(100vh-200px)]">
		<header id="mobileTitle" class="pb-4">
			<h1 class="font-header text-h4 font-bold text-space-blue dark:text-white mr-3">$text.get("general.login")</h1>
			<h2 id="mobileSubtitle" class="font-header text-h5 font-bold text-disabled-grey dark:text-white mr-3"
				data-accessAppLabel="$text.get("general.login.accessApp")"
				data-securityKeyLabel="$text.get("general.login.securityKey")"></h2>
		</header>
		<span class="flex flex-col flex-1 justify-center">
			<section id="mobileLoginContainer">
				#parse("${templatePath}/accessAppLogin.vm")

				#parse("${templatePath}/securityKeyLogin.vm")
			</section>

			<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget"
				  autocomplete="off"
				  accept-charset="UTF-8" class="w-full sm:static">
				<div class="flex items-center mt-6 mb-6">
					<span class="h-px w-full bg-silver"></span>
					<span class="px-2 text-disabled-grey dark:text-white font-body-semi text-body-l whitespace-nowrap">
						$text.get("general.or")</span>
					<span class="h-px w-full bg-silver"></span>
				</div>

				<agov-button
						id="mobileOtherLoginMethodsBtn"
						class="block basis-full mb-4"
						data-style="secondary"
						data-name="otherLoginMethods"
						data-value="otherLoginMethods"
						data-label="$text.get("general.otherLoginMethods")"
						data-type="button"
						data-fullwidth="true">
				</agov-button>
				<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
			</form>
		</span>
	</span>
	<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
		  accept-charset="UTF-8" class="formDrawer">
		<div class="w-full z-30 fixed left-0 pointer-events-none" id="drawerContainer">
			<div class="w-full bg-white dark:bg-surface-black px-4 pb-[130px] rounded-t-2xl pointer-events-auto"
				 id="drawer">
				<div class="pt-2 pb-4 cursor-pointer">
					<div class="w-10 h-1 rounded-full bg-silver dark:bg-ash mx-auto"></div>
				</div>

				<div class="flex items-center justify-center mb-6">
							<span class="px-2 text-disabled-grey dark:text-white font-body-semi font-semibold text-body-l
							whitespace-nowrap">
								$text.get("general.moreOptions")
							</span>
				</div>

				<p class="font-body-semi font-semibold text-body-l text-space-blue dark:text-white text-center mb-2">
					$text.get("mauth_usernameless.noAccount")
				</p>

				<agov-button
						data-style="secondary"
						data-name="fallback"
						data-value="register"
						data-label="$text.get("general.registerNow")"
						data-type="submit"
						data-fullwidth="true"
						class="block">
				</agov-button>

				<div class="flex items-center mt-6 mb-6">
					<span class="h-px w-full bg-silver"></span>
					<span class="px-2 text-disabled-grey dark:text-white font-body-semi text-body-l whitespace-nowrap">
						$text.get("general.or")</span>
					<span class="h-px w-full bg-silver"></span>
				</div>

				<div class="flex flex-col flex-wrap justify-center items-center mb-6 gap-1">
					<p id="cannotLoginSubtitleDrawer" class="font-body-semi font-semibold text-body-l text-space-blue
							dark:text-white"
					   data-securityKeyLabel="$text.get("mauth_usernameless.cannotLogin.securityKey")"
					   data-accessAppLabel="$text.get("mauth_usernameless.cannotLogin.accessApp")"></p>
					<agov-button
							data-style="frameless"
							data-name="fallback"
							data-value="recovery"
							data-label="<i class='fa-regular fa-suitcase-medical text-indigo dark:text-lilac mr-2'></i>
									$text.get("mauth_usernameless.startRecovery")"
							data-fullwidth="true"
							data-type="submit"
							class="block">
					</agov-button>
				</div>

				<div class="font-body text-body-s text-disabled-grey dark:text-silver text-center">
					$text.get("footer.text")
					<a target="_blank" class='text-hyperlink dark:text-info underline'
					   href='$text.get("footer.link")'>$text.get(
						"footer.link.label")</a>
				</div>
			</div>
		</div>
		<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
	</form>
</main>

<agov-modal
			class="hidden"
			id="QRCodeModal"
			ishidden="true"
			data-title="$text.get("general.login.accessApp")"
			data-cancel-button-label="$text.get("general.back")"
			data-cancel-button-event-name="closeQRModal"
			data-cancel-button-style="frameless">
	<div id="QRCodeHolderModal">
		<div class="relative">
			<canvas role="img" aria-labelledby="labelQRCodeInstructions" id="mauth_qrcode_modal"
					class="mb-6 mx-auto"></canvas>
			<div class="hidden" id="QRcodeHiddenLink"></div>
		</div>
		<div class="accessAppInstructions flex bg-indigo-light rounded-xl p-4 sm:mb-0 mb-2 items-center	dark:bg-purple-black">
			<img alt="" src="${login.appDataPath}/static/images/accessApp.svg" class="h-12 mr-4 block dark:hidden">
			<img alt="" src="${login.appDataPath}/static/images/accessApp_dark.svg"
				 class="h-12 mr-4 hidden dark:block">
			<p id="labelQRCodeInstructions"
			   class="font-header text-h5 text-space-blue dark:text-white">
				$text.get("mauth_usernameless.instructions")
			</p>
		</div>
	</div>
</agov-modal>

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

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

<script src="${login.appDataPath}/static/js-code/otherLoginMethodsMobile.js">
</script>
<div id="appSamlRpEntityId" class="hidden"
	 data-value="$gui.getGuiElem('agov.appSamlRpEntityId').value"
	 data-language="$login.language">
</div>

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