{% extends "app.html" %}
{% block content %}
<p class="step-hint">{{ shell.tr.security_hint }}</p>

{% if webauthn || !keys.is_empty() %}
<h2 class="section-title" style="margin-top:0">{{ shell.tr.passkeys_title }}</h2>
<p class="hint">{{ shell.tr.passkeys_hint }}</p>
{% if !webauthn %}
<p class="form-error" style="margin:0 0 var(--space-3)">{{ shell.tr.passkey_disabled_note }}</p>
{% endif %}

{% for k in keys %}
<div class="category-row">
  <form method="post" action="{{ k.rename_action }}" class="rename">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <input class="input" name="nom" value="{{ k.name }}" required aria-label="{{ shell.tr.passkey_rename_aria }}">
    {# tabindex=-1 : la soumission clavier passe par Entrée dans l'input (cf. categories.html). #}
    <button type="submit" class="visually-hidden" tabindex="-1">{{ shell.tr.rename }}</button>
  </form>
  <span class="text-muted" style="font-size:0.75rem;white-space:nowrap">{{ k.created }}</span>
</div>
<details style="margin:0 0 var(--space-3)">
  <summary class="btn btn-ghost" style="font-size:0.75rem">{{ shell.tr.passkey_delete }}</summary>
  <form method="post" action="{{ k.delete_action }}" style="display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-2)">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <input class="input" name="mdp" type="password" autocomplete="current-password" required
           aria-label="{{ shell.tr.current_password }}" placeholder="{{ shell.tr.current_password }}"
           style="flex:1;min-height:44px">
    <button type="submit" class="btn btn-secondary" style="min-height:44px">{{ shell.tr.passkey_delete_confirm }}</button>
  </form>
  <p class="field-hint" style="margin-top:var(--space-1)">{{ shell.tr.passkey_delete_why }}</p>
</details>
{% endfor %}
{% if keys.is_empty() && webauthn %}
<p class="text-muted" style="font-size:0.8125rem;margin:0 0 var(--space-3)">{{ shell.tr.passkey_none }}</p>
{% endif %}

{% if webauthn %}
<form method="post" action="/parametres/securite/cles" data-webauthn-add style="margin-top:var(--space-3)">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <div class="field" style="margin-bottom:var(--space-3)">
    <label for="cle-nom">{{ shell.tr.passkey_name_label }}</label>
    <input class="input" id="cle-nom" name="nom" placeholder="{{ shell.tr.passkey_name_ph }}" required style="min-height:44px">
  </div>
  <div class="field" style="margin-bottom:var(--space-3)">
    <label for="cle-mdp">{{ shell.tr.current_password }}</label>
    <input class="input" id="cle-mdp" name="mdp" type="password" autocomplete="current-password" required
           aria-describedby="cle-mdp-aide" style="min-height:44px">
    <p class="field-hint" id="cle-mdp-aide">{{ shell.tr.passkey_password_why }}</p>
  </div>
  {% if let Some(e) = key_error %}<p class="form-error">{{ e }}</p>{% endif %}
  <noscript><p class="form-error">{{ shell.tr.passkey_js_required }}</p></noscript>
  <button type="submit" class="btn btn-primary btn-block" style="min-height:46px">{{ shell.tr.passkey_add }}</button>
</form>
<script>
  // Enregistrement d'une clé d'accès. Sans JS (ou navigateur sans l'API
  // JSON WebAuthn), le form POST retombe sur /parametres/securite/cles qui
  // explique (?err=cle-js). Toute erreur recharge avec ?err=<code> : c'est
  // le serveur qui traduit, le client ne porte aucun texte.
  (function () {
    var form = document.querySelector('form[data-webauthn-add]');
    if (!form || !window.PublicKeyCredential || !PublicKeyCredential.parseCreationOptionsFromJSON) return;
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      var csrf = form.querySelector('input[name="csrf"]').value;
      var body = {
        csrf: csrf,
        nom: form.querySelector('input[name="nom"]').value,
        mdp: form.querySelector('input[name="mdp"]').value
      };
      var fail = function (code) {
        location = '/parametres/securite?err=' + (typeof code === 'string' ? code : 'cle');
      };
      fetch('/webauthn/enregistrement/debut', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      }).then(function (r) {
        return r.json().then(function (j) {
          if (!r.ok) throw j.error;
          // webauthn-rs enveloppe les options dans {publicKey: …}.
          return navigator.credentials.create({
            publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(j.publicKey)
          });
        });
      }).then(function (cred) {
        return fetch('/webauthn/enregistrement/fin', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ csrf: csrf, credential: cred.toJSON() })
        });
      }).then(function (r) {
        return r.json().then(function (j) {
          if (!r.ok) throw j.error;
          location = j.redirect;
        });
      }).catch(fail);
    });
  })();
</script>
{% endif %}
{% endif %}

<h2 class="section-title" style="margin-bottom:var(--space-3)">{{ shell.tr.session }}</h2>
<form method="post" action="/parametres/mot-de-passe">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <div class="field" style="margin-bottom:var(--space-3)">
    <label for="ancien">{{ shell.tr.current_password }}</label>
    <input class="input" id="ancien" name="ancien" type="password" autocomplete="current-password" required style="min-height:44px">
  </div>
  <div class="field" style="margin-bottom:var(--space-3)">
    <label for="nouveau">{{ shell.tr.new_password }}</label>
    <input class="input" id="nouveau" name="nouveau" type="password" autocomplete="new-password" required minlength="8" style="min-height:44px">
  </div>
  <div class="field" style="margin-bottom:var(--space-4)">
    <label for="confirmation">{{ shell.tr.confirmation }}</label>
    <input class="input" id="confirmation" name="confirmation" type="password" autocomplete="new-password" required minlength="8" style="min-height:44px">
  </div>
  {% if let Some(e) = error %}<p class="form-error">{{ e }}</p>{% endif %}
  <button type="submit" class="btn btn-primary btn-block" style="min-height:46px">{{ shell.tr.change_password }}</button>
</form>

<a class="btn btn-ghost" style="margin-top:var(--space-6)" href="/parametres">{{ shell.tr.back_settings }}</a>
{% endblock %}