{{ define "login.gohtml" }}{{ template "base" . }}{{ end }}

{{ define "login_content" }}
<section class="auth-shell">
  <input type="hidden" data-auth-next value="{{ .Next }}" />
  <div class="auth-panel">
    <div class="auth-panel__header">
      <p class="eyebrow">Cairnquire</p>
      <h1>Sign in</h1>
    </div>

    <div class="auth-grid">
      <form class="auth-form" data-auth-login>
        <h2>Password</h2>
        <label>
          Email
          <input type="email" name="email" autocomplete="email" required />
        </label>
        <label>
          Password
          <input type="password" name="password" autocomplete="current-password" required />
        </label>
        <button type="submit">Sign in</button>
        <p class="form-status" data-login-status></p>
      </form>

      <form class="auth-form" data-passkey-login>
        <h2>Passkey</h2>
        <label>
          Email
          <input type="email" name="email" autocomplete="username webauthn" required />
        </label>
        <button type="submit">Use passkey</button>
        <p class="form-status" data-passkey-login-status></p>
      </form>
    </div>

    <details class="auth-details">
      <summary>Create an account</summary>
      <div class="auth-grid">
        <form class="auth-form" data-auth-register>
          <h2>Password account</h2>
          <label>
            Email
            <input type="email" name="email" autocomplete="email" required />
          </label>
          <label>
            Display name
            <input type="text" name="displayName" autocomplete="name" />
          </label>
          <label>
            Password
            <input type="password" name="password" autocomplete="new-password" minlength="12" required />
          </label>
          <button type="submit">Register</button>
          <p class="form-status" data-register-status></p>
        </form>

        <form class="auth-form" data-passkey-register>
          <h2>Passkey account</h2>
          <label>
            Email
            <input type="email" name="email" autocomplete="email" required />
          </label>
          <label>
            Display name
            <input type="text" name="displayName" autocomplete="name" />
          </label>
          <button type="submit">Create passkey</button>
          <p class="form-status" data-passkey-register-status></p>
        </form>
      </div>
    </details>
  </div>
</section>
{{ end }}