{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Staff{% endblock %}
{% block heading %}Staff{% endblock %}
{% block subheading %}Administration des opérateurs du back-office{% endblock %}

{% block content %}
  {% if not canManage %}
    {# Filet de sécurité : la navigation masque déjà l'entrée aux non-admins,
       mais un accès direct à l'URL retombe sur ce message plutôt qu'une page vide. #}
    <article class="card glass" data-animate>
      <div class="alert alert--warning">
        L'administration du staff est réservée aux administrateurs.
      </div>
    </article>
  {% else %}
  <div data-staff
       data-list-url="{{ listUrl }}"
       data-self-id="{{ selfId }}">

    {# ── Barre d'outils : recherche, filtre de rôle, création ───────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-staff-search placeholder="Filtrer par identifiant, nom, e-mail…" autocomplete="off">
      </label>
      <div class="mfilter__status" role="group" aria-label="Filtrer par rôle">
        <button class="mm-period__btn is-active" type="button" data-staff-filter-role="">Tous</button>
        <button class="mm-period__btn" type="button" data-staff-filter-role="admin">Admins</button>
        <button class="mm-period__btn" type="button" data-staff-filter-role="moderator">Modérateurs</button>
        <button class="mm-period__btn" type="button" data-staff-filter-role="consultant">Consultants</button>
      </div>
      <button class="btn cpn-toolbar__new" type="button" data-staff-new>
        {{ icons.i('plus') }} Nouvel opérateur
      </button>
    </div>

    {# ── Alerte d'indisponibilité / accès refusé ───────────────────────── #}
    <div class="alert alert--danger" data-staff-error hidden>
      Le service Hydrogen est injoignable. Réessaie dans un instant.
    </div>

    {# ── Liste des opérateurs ──────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="cpn-list" data-staff-list>
        {% for i in 1..4 %}
          <div class="cpn-row cpn-row--skeleton">
            <span class="skeleton cpn-skel"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted cpn-empty" data-staff-empty hidden>Aucun opérateur ne correspond.</p>
      <div class="cpn-more">
        <button class="btn-ghost" type="button" data-staff-more hidden>Charger plus</button>
      </div>
    </article>

    {# ── Modale création / édition ─────────────────────────────────────── #}
    <div class="modal modal--form" data-staff-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="staff-modal-title">
        <button class="modal__close" type="button" data-staff-cancel aria-label="Fermer">
          <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">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>

        <div class="cpnmodal__head">
          <span class="cpnmodal__icon">{{ icons.i('badge') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="staff-modal-title" data-staff-modal-title>Nouvel opérateur</h2>
            <p class="cpnmodal__sub muted">Identifiants, rôle et état du compte.</p>
          </div>
        </div>

        <form class="cpnmodal__body" data-staff-form>
          <div class="cpnform__grid">
            <div class="field">
              <label for="sf-username">Identifiant</label>
              <input id="sf-username" type="text" data-sf-username maxlength="20" autocomplete="off"
                     placeholder="jdupont" pattern="[A-Za-z0-9._-]{3,20}">
              <p class="field__hint muted">3 à 20 caractères : lettres, chiffres, <code>. _ -</code>.</p>
            </div>

            <div class="field">
              <label for="sf-email">Adresse e-mail</label>
              <input id="sf-email" type="email" data-sf-email autocomplete="off" placeholder="jean.dupont@exemple.fr">
            </div>

            <div class="field">
              <label for="sf-firstname">Prénom <span class="muted">(facultatif)</span></label>
              <input id="sf-firstname" type="text" data-sf-firstname autocomplete="off" placeholder="Jean">
            </div>

            <div class="field">
              <label for="sf-name">Nom <span class="muted">(facultatif)</span></label>
              <input id="sf-name" type="text" data-sf-name autocomplete="off" placeholder="Dupont">
            </div>

            <div class="field">
              <label for="sf-role">Rôle</label>
              <select id="sf-role" data-sf-role>
                <option value="consultant">Consultant — lecture seule</option>
                <option value="moderator">Modérateur — modération</option>
                <option value="admin">Administrateur — gestion du staff</option>
              </select>
            </div>

            <div class="field">
              <label for="sf-password">Mot de passe</label>
              <input id="sf-password" type="password" data-sf-password autocomplete="new-password"
                     placeholder="••••••••••••">
              <p class="field__hint muted" data-sf-password-hint>12 caractères min. : majuscule, minuscule, chiffre et caractère spécial.</p>
              <label class="cpn-check">
                <input type="checkbox" data-sf-active checked> Compte actif
              </label>
            </div>
          </div>

          <p class="cpnform__error" data-staff-form-error hidden></p>
        </form>

        <div class="cpnmodal__foot">
          <button class="btn-ghost" type="button" data-staff-cancel>Annuler</button>
          <button class="btn" type="button" data-staff-save>Enregistrer</button>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
{% endblock %}