<div id="accessAppModal"
	 class="h-full hidden sm:min-h-[297px]">
	<agov-banner class="hidden mb-4"
				 id="desktopBanner"
				 aria-live="assertive"
				 data-info-description="$text.get("mauth_usernameless.banner.info")"
				 data-success-description="$text.get("mauth_usernameless.banner.success")"
				 data-error-description="$text.get("mauth_usernameless.banner.error")">
	</agov-banner>
	<div class="relative flex flex-col gap-4 h-full">
		<div id="blurBackdrop"
			 class="hidden absolute backdrop-blur-sm -top-1 -bottom-8 -left-4 -right-4 z-10">
		</div>
		<agov-banner class="hidden z-20 mb-4 relative"
					 id="accessAppMobileBanner"
					 aria-live="assertive"
					 data-info-description="$text.get("mauth_usernameless.banner.info")"
					 data-success-description="$text.get("mauth_usernameless.banner.success")"
					 data-error-description="$text.get("mauth_usernameless.banner.error")">
		</agov-banner>
		<div id="agovLoginImageMobile"
			 class="sm:hidden block max-w-[200px] sm:max-w-full sm:w-full basis-1/2 mx-auto mb-6">
			<img alt=""
				 src="${login.appDataPath}/static/images/accessApp.svg"
				 class="block dark:hidden w-[96px] h-[96px]">

			<img alt=""
				 src="${login.appDataPath}/static/images/accessApp_dark.svg"
				 class="hidden dark:block w-[96px] h-[96px]">
		</div>
		<div id="QRCodeHolder" class="hidden sm:block">
			<div class="relative">
				<canvas
						role="img"
						aria-describedby="labelQRCodeInstructions"
						id="mauth_qrcode"
						class="mb-6 mx-auto">
				</canvas>
				<button id="showModalButton"
						aria-label="$text.get("qrCode.label")"
						class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
					 w-[166px] h-[166px]
					 hover:bg-indigo/5 hover:rounded-[8px]
					 active:bg-indigo/10
					 focus-visible:bg-indigo/10 focus:rounded-[8px] focus-visible:outline-offset-2
					 focus-visible:before:border focus-visible:before:border-indigo
					 focus-visible:before:absolute
					 focus-visible:before:-inset-3px focus-visible:before:rounded-[8px]
					 dark:focus-visible:before:border-lilac dark:focus-visible:outline-offset-2
					 focus:outline-none">
				</button>
				<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.goToAccessApp")"
						data-type="button"
						data-fullwidth="true">
				</agov-button>
			</a>
			<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 sm:text-h5 text-body-m text-space-blue dark:text-white">
					$text.get("mauth_usernameless.instructions")
				</p>
			</div>
		</div>
		<form class="w-full sm:static mt-auto"
			  id="$gui.name"
			  name="$gui.name"
			  method="POST"
			  target="_self"
			  action="$formTarget"
			  autocomplete="off"
			  accept-charset="UTF-8">
			<div id="mobileButtons" class="sm: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.goToAccessApp")"
								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>