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

<agov-backdrop></agov-backdrop>
<div id="mainContent" class="container mx-auto sm:mt-2 sm:max-w-full flex h-full sm:h-auto">
	<div class="flex flex-col items-start gap-4 w-full rounded-[36px] sm:p-6 mx-auto
	 max-w-[600px] md:max-w-[1200px] sm:bg-lily-blue dark:sm:bg-purple-black">

		<div id="cantonalBranding"
			 class="flex items-center rounded-xl gap-5 p-2 sm:p-0 sm:w-auto w-full hidden bg-pale-blue dark:bg-purple-black sm:bg-transparent">
			<div class="flex items-center p-2 bg-white rounded sm:rounded-xl w-16 h-16" 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)
                #else
                    $utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameIT').value)
                #end
			</h1>
		</div>

		<div class="flex flex-col md:flex-row w-full gap-6">
			<div id="registerCard" class="w-full md:min-h-[689px] flex flex-col justify-between">
				<div class="rounded-[20px] bg-white dark:bg-surface-black p-6 sm:px-10 sm:pt-10 sm:pb-8 ">
					<h1 class="font-header text-h4 text-space-blue dark:text-white mb-8">$text.get("general.registration")</h1>

					<h2 class="font-header text-h5 text-space-blue dark:text-white text-center mb-4">
                        $text.get("mauth_usernameless.noAccount")
					</h2>

					<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>
				</div>

				<div id="agovLoginImage"
					 class="relative md:max-w-[520px] max-w-[350px] sm:max-w-[300px] mb-10 w-full mx-auto hidden md:block">
					<img alt="" src="${login.appDataPath}/static/images/login.svg"
						 class="hidden md:block dark:hidden w-full">
					<img alt="" src="${login.appDataPath}/static/images/login-dark.svg"
						 class="hidden md:hidden dark:md:block w-full">
				</div>
			</div>

			<div id="loginModal"
				 class="flex flex-col bg-white dark:bg-surface-black rounded-[20px] sm:min-h-[700px] p-6 sm:pb-8 sm:pt-10 sm:px-10
				 max-w-[550px] w-full">

				<div class="flex mb-4 sm:mb-6 items-baseline">
					<h1 class="font-header text-h4 text-space-blue dark:text-white mr-3">$text.get("general.login")</h1>
				</div>

				<div id="cantonalBrandingMobile"
					 class="flex items-center rounded-xl gap-5 mb-4 p-2 sm:p-0 sm:w-auto w-full hidden bg-pale-blue dark:bg-purple-black sm:bg-transparent">
					<div class="flex items-center p-2 bg-white dark:bg-black rounded sm:rounded-xl w-16 h-16"
						 id="logoMobile"></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)
                        #else
                            $utils.escapeHtmlAttribute($gui.getGuiElem('agov.appDisplayNameIT').value)
                        #end
					</h1>
				</div>

				<agov-login-toggle
						class="inline-block mb-6"
						data-aria_label='$text.get("mauth_usernameless.useSecurityKey")'
						data-access_app_img='${login.appDataPath}/static/images/access-app.svg'
						data-security_key_img='${login.appDataPath}/static/images/fido-key.svg'
						data-access_app_text='$text.get("general.AGOVAccessApp")'
						data-security_key_text='$text.get("general.securityKey")'>
				</agov-login-toggle>

				<div id="accessAppModal" class="h-full">

					<div class="desktopBanner" aria-live="assertive">
						<div class="hidden info flex rounded-xl bg-info-background dark:bg-dark-info-background items-center p-4
						mb-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("mauth_usernameless.banner.info")
							</p>
						</div>

						<div class="hidden success flex rounded-xl bg-success-background dark:bg-dark-success-background
						items-center p-4 mb-4">
							<i class="fa-regular fa-check-circle rounded-full p-3 text-success dark:text-dark-success bg-success/10 dark:bg-dark-success-icon mr-4 text-xl leading-none"></i>
							<div>
								<p class="font-body text-body-l text-space-blue dark:text-white">
                                    $text.get("mauth_usernameless.banner.success")
								</p>
							</div>
						</div>

						<div class="hidden error flex rounded-xl bg-error-background dark:bg-dark-error-background items-center
						p-4 mb-4">
							<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("mauth_usernameless.banner.error")
							</p>
						</div>
					</div>

					<div class="relative flex flex-col h-full">
						<div id="blurBackdrop" class="hidden absolute backdrop-blur-sm -top-1 -bottom-8 -left-4 -right-4
						z-10"></div>
						<div class="mobileBanner relative z-20" aria-live="assertive">
							<div class="hidden info flex rounded-xl bg-info-background dark:bg-dark-info-background items-center
							p-4 mb-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("mauth_usernameless.banner.info")
								</p>
							</div>

							<div class="hidden success flex rounded-xl bg-success-background dark:bg-dark-success-background
								 items-center p-4 mb-4">
								<i class="fa-regular fa-check-circle rounded-full p-3 text-success dark:text-dark-success bg-success/10 dark:bg-dark-success-icon mr-4 text-xl leading-none"></i>
								<div>
									<p class="font-body text-body-l text-space-blue dark:text-white">
                                        $text.get("mauth_usernameless.banner.success")
									</p>
								</div>
							</div>

							<div class="hidden error flex rounded-xl bg-error-background dark:bg-dark-error-background
							items-center p-4 mb-4">
								<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("mauth_usernameless.banner.error")
								</p>
							</div>
						</div>
						<div id="agovLoginImageMobile"
							 class="hidden max-w-[200px] sm:max-w-full sm:w-full basis-1/2 mx-auto mb-6">
							<img alt=""
								 src="${login.appDataPath}/static/images/login.svg"
								 class="block dark:hidden w-full">

							<img alt=""
								 src="${login.appDataPath}/static/images/login-dark.svg"
								 class="hidden dark:block w-full">
						</div>
						<div id="QRCodeHolder">
							<div class="relative">
								<canvas role="img" aria-labelledby="labelQRCodeInstructions" id="mauth_qrcode"
										class="mb-6 mx-auto"></canvas>
								<div class="hidden" id="QRcodeHiddenLink"></div>
								<span id="spinner" class="hidden absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
								z-20">
								<img src="${login.appDataPath}/static/images/spinner.svg" class="animate-spin block dark:hidden">
								<img src="${login.appDataPath}/static/images/spinner-dark.svg"
									 class="animate-spin hidden dark:block">
								</span>
							</div>

							<a id="accessAppLinkIpad" href="" class="hidden">
								<agov-button
										class="block basis-full mb-6"
										data-name="accessApp"
										data-value="accessApp"
										data-id="accessAppIpad"
										data-label="$text.get("general.goAccessApp")"
										data-type="button"
										data-fullwidth="true">
								</agov-button>
							</a>

							<div class="accessAppInstructions flex bg-indigo-light rounded-xl p-4 mb-2 items-center
							dark:bg-purple-black">
								<img alt="" src="${login.appDataPath}/static/images/access-app.svg" class="h-12 mr-4">
								<p id="labelQRCodeInstructions" class="font-header text-h5 text-space-blue dark:text-white">
                                    $text.get("mauth_usernameless.instructions")
								</p>
							</div>
						</div>

						<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
							  accept-charset="UTF-8" class="w-full sm:static mt-auto mb-20 sm:mb-0">

							<div id="mobileButtons" class="hidden w-full">
								<div class="flex flex-col">
									<a id="accessAppLink" href="">
										<agov-button
												class="block basis-full mb-4"
												data-name="accessApp"
												data-value="accessApp"
												data-id="accessApp"
												data-label="$text.get("general.goAccessApp")"
												data-type="button"
												data-fullwidth="true">
										</agov-button>
									</a>
									<agov-button
											id="showQR"
											class="block basis-full"
											data-style="frameless"
											data-name="EID"
											data-value="EID"
											data-id="EID"
											data-label="<i class='fa-regular fa-eye align-middle text-xl text-indigo dark:text-lilac mr-2'></i>$text.get(
                                                "mauth_usernameless.showQR")"
											data-type="button"
											data-fullwidth="true">
									</agov-button>

									<agov-button
											id="hideQR"
											class="hidden basis-full"
											data-style="frameless"
											data-name="EID"
											data-value="EID"
											data-id="EID"
											data-label="<i class='fa-regular fa-eye-slash align-middle text-xl text-indigo dark:text-lilac mr-2'></i>$text.get(
                                                "mauth_usernameless.hideQR")"
											data-type="button"
											data-fullwidth="true">
									</agov-button>
								</div>
							</div>
							<input class="hidden" name="authRequestId" type="hidden"
								   value="$gui.getGuiElem('authRequestId').value"/>
						</form>
					</div>
				</div>
				<div id="securityKeyModal" class="hidden sm:mt-16">

					<h2 class="font-header text-h5 text-space-blue dark:text-white mt-4 text-center">
                        $text.get("mauth_usernameless.useSecurityKey")
					</h2>

					<p class="font-body text-body-l text-space-blue dark:text-white text-center my-6">
                        $text.get("mauth_usernameless.useSecurityKeyInfo")
					</p>

					<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
						  accept-charset="UTF-8" class="mb-20 sm:mb-0">
						<agov-button
								class="mb-4 block"
								data-name="fallback"
								data-value="fallback"
								data-id="fallback"
								data-label="$text.get("general.loginSecurityKey")"
								data-type="submit"
								data-fullwidth="true"
								data-icon="left">
						</agov-button>
						<input class="hidden" name="authRequestId" type="hidden" value="$gui.getGuiElem('authRequestId').value"/>
					</form>
				</div>

				<div id="desktopMenu" class="mt-auto">
					<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">

						<button class="hidden" id="onReload" name="onReload"></button>

						<h2 class="font-header text-h5 text-space-blue dark:text-white mt-7 mb-4 text-center">
                            $text.get("mauth_usernameless.cannotLogin")
						</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>

			</div>
		</div>
	</div>
	<form id="$gui.name" name="$gui.name" method="POST" target="_self" action="$formTarget" autocomplete="off"
		  accept-charset="UTF-8" class="hidden sm:hidden 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 text-body-l whitespace-nowrap">
                        $text.get("general.otherOptions")
					</span>
				</div>

				<p class="font-body-semi 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 class="font-body-semi text-body-l text-space-blue dark:text-white">
                        $text.get("mauth_usernameless.cannotLogin")
					</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>
</div>

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

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