{{define "title"}}Login{{end}}
{{define "content"}}
<main class="flex min-h-dvh items-center justify-center bg-[url(/static/images/background.png)] bg-cover bg-center px-3 py-4 sm:px-4 sm:py-8">
  <div class="mx-auto w-full max-w-[31.25rem] bg-background-surface px-5 pb-6 pt-7 shadow-sm sm:px-8 sm:pb-8 sm:pt-11 lg:px-12">
    <h1 class="mb-6 text-2xl font-normal leading-tight tracking-[-0.02em] text-foreground sm:mb-8 sm:text-3xl sm:leading-none">
      Sign in to your account
    </h1>

    <form method="POST" action="/login" class="space-y-5 sm:space-y-7">
      <div class="space-y-3">
        <label for="username" class="block font-normal text-foreground">
          Email address
        </label>
        <input
          id="username"
          name="username"
          type="text"
          autocomplete="username"
          spellcheck="false"
          placeholder="you@example.com"
          required
          value="{{.Username}}"
          class="h-10 w-full bg-background-surface px-3 text-foreground outline-none transition focus:ring-1 focus:ring-accent rounded-none!"
        />
      </div>

      <div class="space-y-3">
        <label for="password" class="block font-normal text-foreground">
          Password
        </label>
        <div class="flex h-10 w-full bg-background-surface transition focus-within:ring-1 focus-within:ring-accent rounded-none!">
          <input
            id="password"
            name="password"
            type="password"
            autocomplete="current-password"
            placeholder="Enter your password"
            required
            class="min-w-0 flex-1 bg-transparent px-3 text-foreground outline-none rounded-none!"
          />
          <button
            type="button"
            class="flex w-12 items-center justify-center text-foreground sm:w-12.5"
            aria-label="Show password"
            data-toggle-password
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="h-5 w-5"
              aria-hidden="true"
              data-eye-open
            >
              <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
              <circle cx="12" cy="12" r="3" />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="hidden h-5 w-5"
              aria-hidden="true"
              data-eye-closed
            >
              <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
              <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
              <path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
              <line x1="2" x2="22" y1="2" y2="22" />
            </svg>
          </button>
        </div>
      </div>

      {{if .Error}}
        <p class="text-sm font-normal text-red-700" role="alert">
          {{.Error}}
        </p>
      {{end}}

      <button
        type="submit"
        class="mt-1 h-10 w-full rounded-[2px] bg-[#cccccc] font-normal text-black transition hover:bg-[#bfbfbf] active:bg-[#b3b3b3] sm:h-9"
      >
        Sign In
      </button>
    </form>
  </div>
</main>

<script>
  (() => {
    const button = document.querySelector('[data-toggle-password]');
    const input = document.getElementById('password');
    const openEye = document.querySelector('[data-eye-open]');
    const closedEye = document.querySelector('[data-eye-closed]');
    if (!(button instanceof HTMLButtonElement)) return;
    if (!(input instanceof HTMLInputElement)) return;
    if (!(openEye instanceof SVGElement)) return;
    if (!(closedEye instanceof SVGElement)) return;

    let showPassword = false;
    const render = () => {
      input.type = showPassword ? 'text' : 'password';
      button.setAttribute('aria-label', showPassword ? 'Hide password' : 'Show password');
      openEye.classList.toggle('hidden', showPassword);
      closedEye.classList.toggle('hidden', !showPassword);
    };

    button.addEventListener('click', () => {
      showPassword = !showPassword;
      render();
    });
    render();
  })();
</script>
{{end}}