{% extends "base.html" %}
{% block title %}{{ tr.login_title }} · Ex Ego{% endblock %}
{% block lang %}{{ lang_code }}{% endblock %}
{% block body %}
<main class="login">
  {# Logo « cadran ex aequo » — disque surface (fond crème du login). #}
  <svg class="login-logo" width="128" height="128" viewBox="0 0 96 96" aria-hidden="true">
    <circle cx="48" cy="48" r="44" fill="#ebddc5"/>
    <circle cx="48" cy="48" r="40" fill="none" stroke="#201e1d" stroke-width="2.4" opacity=".38"/>
    <circle cx="48" cy="14" r="3.3" fill="#201e1d" opacity=".7"/>
    <circle cx="48" cy="82" r="3.3" fill="#201e1d" opacity=".5"/>
    <circle cx="14" cy="48" r="3.3" fill="#201e1d" opacity=".5"/>
    <circle cx="82" cy="48" r="3.3" fill="#201e1d" opacity=".5"/>
    <rect x="27" y="35.5" width="42" height="10.5" rx="5.25" fill="#c67139"/>
    <path d="M53.5 35.5 h10.25 a5.25 5.25 0 0 1 0 10.5 h-10.25 z" fill="#7a8a5e"/>
    <rect x="27" y="50" width="42" height="10.5" rx="5.25" fill="#7a8a5e"/>
    <path d="M43.5 50 h20.25 a5.25 5.25 0 0 1 0 10.5 h-20.25 z" fill="#c67139"/>
  </svg>
  <h1>Ex Ego</h1>
  <p class="tagline">{{ tr.tagline }}</p>
  <form method="post" action="/login">
    <div class="field field-lg" style="margin-bottom:var(--space-3)">
      <label for="username">{{ tr.username_label }}</label>
      {# « webauthn » dans autocomplete : le navigateur/1Password propose la
         passkey directement dans le champ (conditional UI). #}
      <input class="input" id="username" name="username" autocomplete="username webauthn"
             autocapitalize="none" autocorrect="off" required autofocus>
    </div>
    <div class="field field-lg" style="margin-bottom:var(--space-4)">
      <label for="password">{{ tr.password_label }}</label>
      <input class="input" id="password" name="password" type="password" autocomplete="current-password" required>
    </div>
    {% if let Some(e) = error %}<p class="form-error">{{ e }}</p>{% endif %}
    <button type="submit" class="btn btn-primary btn-block btn-xl">{{ tr.sign_in }}</button>
  </form>
  {% if webauthn %}
  <button type="button" class="btn btn-secondary btn-block" id="passkey-login" hidden
          style="margin-top:var(--space-3);min-height:48px">{{ tr.passkey_sign_in }}</button>
  {% endif %}
  {% if signup %}
  <a class="btn btn-ghost" style="margin-top:var(--space-4)" href="/inscription">{{ tr.signup_link }}</a>
  {% endif %}
</main>
{% if webauthn %}
<script>
  // Connexion par clé d'accès (usernameless). Deux chemins qui partagent le
  // même flux : l'autofill du champ identifiant (mediation conditional) et le
  // bouton (modal). Un seul AbortController : le clic sur le bouton annule
  // l'autofill en attente, une annulation du modal le réarme. Sans JS ni
  // WebAuthn, le bouton reste hidden — le mot de passe suffit toujours.
  (function () {
    var btn = document.getElementById('passkey-login');
    if (!btn || !window.PublicKeyCredential || !PublicKeyCredential.parseRequestOptionsFromJSON) return;
    btn.hidden = false;
    var ctrl = null;
    function login(mediation, signal) {
      return fetch('/webauthn/connexion/debut', { method: 'POST' })
        .then(function (r) {
          return r.json().then(function (j) {
            if (!r.ok) throw j;
            // webauthn-rs enveloppe les options dans {publicKey: …}.
            return navigator.credentials.get({
              publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(j.publicKey),
              mediation: mediation,
              signal: signal
            });
          });
        })
        .then(function (cred) {
          return fetch('/webauthn/connexion/fin', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(cred.toJSON())
          });
        })
        .then(function (r) {
          return r.json().then(function (j) {
            if (!r.ok) throw j;
            location = j.redirect;
          });
        });
    }
    function armConditional() {
      if (!PublicKeyCredential.isConditionalMediationAvailable) return;
      PublicKeyCredential.isConditionalMediationAvailable().then(function (ok) {
        if (!ok) return;
        ctrl = new AbortController();
        login('conditional', ctrl.signal).catch(function (e) {
          if (e && e.name === 'AbortError') return; // remplacé par le flux bouton
          // Autre DOMException/TypeError : l'autofill est opportuniste, un
          // échec côté authenticator ou réseau s'éteint en silence (rediriger
          // ici bouclerait : la page rechargée réarmerait le même flux).
          if (e && e.name) return;
          // Seul un refus du serveur (JSON {error}) mérite le message.
          location = '/login?err=cle';
        });
      });
    }
    btn.addEventListener('click', function () {
      if (ctrl) ctrl.abort();
      login(undefined, undefined).catch(function (e) {
        // Annulation du modal : pas une erreur, on réarme juste l'autofill.
        if (e && e.name === 'NotAllowedError') { armConditional(); return; }
        location = '/login?err=cle';
      });
    });
    armConditional();
  })();
</script>
{% endif %}
{% endblock %}