{{ $model := . }}


<script src="/assets/js/qrcode.min.js"></script>

<script type="module">
  const qrElement = document.getElementById('qr');
  const tokenElement = document.getElementById('token');
  const accessUrl = "{{ $model.access_url }}";

  /**
   * @param {number} timeout - Maximum time to wait in milliseconds.
   * @param {number} interval - How often to check in milliseconds.
   * @returns {Promise<Function>} Resolves with the QRCode constructor when available.
   */
  function getQRCodeWhenAvailable(timeout = 5000, interval = 100) {
    return new Promise((resolve, reject) => {
      let elapsedTime = 0;
      const checkInterval = setInterval(() => {
        if (typeof window.QRCode === 'function') {
          clearInterval(checkInterval);
          resolve(window.QRCode); // Resolve with the QRCode object/function
        } else {
          elapsedTime += interval;
          if (elapsedTime >= timeout) {
            clearInterval(checkInterval);
            console.error('Timed out waiting for QRCode to become available.');
            reject(new Error('QRCode not available after ' + timeout + 'ms. Check if qrcode.min.js is loaded correctly and sets window.QRCode.'));
          }
        }
      }, interval);
    });
  }

	// INFO: We have to wait for the QRCode object to be available. It's messy.
  async function genQRCode() {
		const QRCode = await getQRCodeWhenAvailable();
		if (qrElement && accessUrl && qrElement.innerHTML.trim() === '') {
			new QRCode(qrElement, {
				text: accessUrl,
				width: 1280,
				height: 1280,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H
			});
			setTimeout(() => {
				qrElement.classList.remove('hidden');
			}, 20);
		}
  }

  genQRCode();
	if (tokenElement) {
		tokenElement.addEventListener('focus', () => tokenElement.select());
  }
</script>

<div class="flex max-w-md mx-auto !pt-44 user-invites">
	<div class="flex-col w-full">
		{{- if not $model.redirect_url -}}
			<a href="/" class="text-gray-700 hover:text-slate-950 mb-9 block">
				<i class="ri-arrow-left-s-line"></i> Startseite
			</a>
		{{- else -}}
			<a href="{{ $model.redirect_url }}" class="text-gray-700 hover:text-slate-950 mb-9 block">
				<i class="ri-arrow-left-s-line"></i> Zurück
			</a>
		{{- end -}}
		<!--
		<div class="mb-6">
			<h1 class="text-2xl font-bold text-slate-900 text-center">Benutzer einladen</h1>
		</div>
		-->
		<div
			class="col-span-9 grid grid-cols-3 justify-between mb-4 py-1 px-1 border rounded-md gap-x-2
		bg-slate-200 user-chooser">
			<a
				href="/user/management/access/User?redirectTo={{ $model.redirect_url }}"
				class="text-center px-4 text-gray-700 hover:text-slate-950 block"
				{{ if eq $model.role "User" }}aria-current="page"{{ end }}>
				Benutzer
			</a>
			<a
				href="/user/management/access/Editor?redirectTo={{ $model.redirect_url }}"
				class="text-gray-700 hover:text-slate-950 block px-4 text-center"
				{{ if eq $model.role "Editor" }}aria-current="page"{{ end }}>
				Redakteur
			</a>
			<a
				href="/user/management/access/Admin?redirectTo={{ $model.redirect_url }}"
				class="text-gray-700 hover:text-slate-950 text-center px-4 block"
				{{ if eq $model.role "Admin" }}aria-current="page"{{ end }}>
				Admin
			</a>
		</div>
		<!--
		<div class="flex justify-center mt-8 items-baseline">
			<div>
				<img class="h-20 w-20 border" src="/assets/favicon.png" />
			</div>
		</div>
		-->
		<div class="col-span-7 col-start-2 mb-4 p-4 border rounded-lg shadow hidden" id="qr"></div>
		<div class="col-span-9 mb-6 flex flex-col">
			<div class="flex flex-row">
				<input
					type="text"
					name="token"
					id="token"
					class="w-full text-center border border-slate-300 rounded-md shadow-sm
					focus:border-slate-500 focus:ring-slate-500 p-1 px-2 overflow-ellipsis"
					value="{{ $model.access_url }}"
					deactive
					readonly />
				<button
					type="button"
					class="ml-2 inline-flex justify-center py-2 px-3 border border-transparent rounded-md
					shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
					focus:outline-none no-underline
					focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
					onclick="navigator.clipboard.writeText('{{ $model.access_url }}')">
					<i class="ri-file-copy-line"></i>
				</button>
				<a
					href="{{ $model.relative_url }}"
					target="_blank"
					class="ml-2 inline-flex justify-center py-2 px-3 border border-transparent rounded-md
					shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
					focus:outline-none no-underline
					focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
					<i class="ri-external-link-line"></i>
				</a>
			</div>
			<div class="col-span-9 text-center text-slate-400 mb-1 mt-3">
				Gültig bis zum
				{{ $model.validUntil }}
			</div>
			<div class="mt-2 text-sm text-slate-600 flex flex-row gap-x-2">
				<div>
					<i class="ri-information-line"></i>
				</div>
				<div>
					Unter diesem Link können neue Accounts registriert werden. Geben Sie diesen Link an neue
					Nutzer der Datenbank weiter.
				</div>
			</div>
			{{ if eq $model.role "User" }}
				<div class="mt-1 text-sm text-blue-600 flex flex-row gap-x-2">
					<div>
						<i class="ri-information-line"></i>
					</div>
					<div>Benutzer können private Felder und Daten einsehen, aber nicht bearbeiten.</div>
				</div>
			{{ else if eq $model.role "Admin" }}
				<div class="mt-1 text-sm text-red-600 flex flex-row gap-x-2">
					<div>
						<i class="ri-information-line"></i>
					</div>
					<div>
						Administratoren können alle Felder und Daten einsehen und bearbeiten. Administratoren
						können Nutzer einladen und löschen.
					</div>
				</div>
			{{ else if eq $model.role "Editor" }}
				<div class="mt-1 text-sm text-orange-600 flex flex-row gap-x-2">
					<div>
						<i class="ri-information-line"></i>
					</div>
					<div>Redakteure können alle Felder und Daten der Datenbank einsehen und bearbeiten.</div>
				</div>
			{{- end -}}
		</div>
		<form class="w-full grid grid-cols-9 gap-4" method="POST">
			<input
				type="hidden"
				name="csrf_nonce"
				id="csrf_nonce"
				required
				value="{{ $model.csrf_nonce }}" />
			<input
				type="hidden"
				name="csrf_token"
				id="csrf_token"
				required
				value="{{ $model.csrf_token }}" />

			<div class="col-span-9 flex flex-row items-center justify-center">
				<button
					type="submit"
					class="inline-flex justify-center py-2 px-3 border border-transparent rounded-full
					shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer
					focus:outline-none no-underline
					focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
					<i class="ri-loop-left-line"></i>
				</button>
			</div>
			<!--
			<div class="col-span-3">
				<a href="/forgot-password" class="text-sm text-slate-600 hover:text-slate-900">
					Passwort vergessen?
				</a>
			</div>
			-->
		</form>
	</div>
</div>