{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Utilisateurs{% endblock %}
{% block page_title %}Gestion des utilisateurs{% endblock %}
{% block styles %}{{ common_styles() }}
<style>
.role-pill {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
}
.role-SUPER-ADMIN  {background:#fde8e6;color:#b91c1c}
.role-DIRECTION    {background:#dce8ff;color:#1d4ed8}
.role-CHEF-DEPARTEMENT{background:#e0e7ff;color:#4338ca}
.role-STM,.role-CEM,.role-SIM{background:#d1fae5;color:#065f46}
.role-AQ           {background:#fef3c7;color:#92400e}
.role-PRODUCTION,.role-LABORATOIRE,.role-UTILITE{background:#f1f5f9;color:#475569}
.role-default      {background:#f1f5f9;color:#475569}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
      <div class="rounded-3 d-flex align-items-center justify-content-center"
           style="width:44px;height:44px;background:#fdf4ff;color:#7c3aed;font-size:1.1rem">
        <i class="fas fa-users-cog"></i>
      </div>
      <div>
        <h5 class="fw-bold mb-0">Utilisateurs</h5>
        <div class="text-muted small">{{ utilisateurs|length }} compte(s)</div>
      </div>
    </div>
    <a href="{{ url_for('ajouter_utilisateur') }}" class="btn btn-primary btn-sm px-3">
      <i class="fas fa-plus me-2"></i>Ajouter
    </a>
  </div>

  <!-- Filtres -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius:12px">
    <div class="card-body px-4 py-3">
      <form method="get" action="{{ url_for('liste_utilisateurs') }}" class="row g-2 align-items-end">
        <div class="col-md-3 col-sm-6">
          <label class="form-label">Nom d'utilisateur</label>
          <input type="text" class="form-control form-control-sm" name="username" value="{{ request.args.get('username','') }}" placeholder="Rechercher…">
        </div>
        <div class="col-md-3 col-sm-6">
          <label class="form-label">Rôle</label>
          <select class="form-select form-select-sm" name="type">
            <option value="">Tous les rôles</option>
            {% for r in ['SUPER ADMIN','DIRECTION','CHEF DEPARTEMENT','STM','SIM','CEM','AQ','PRODUCTION','LABORATOIRE','UTILITE'] %}
            <option value="{{ r }}" {% if request.args.get('type')==r %}selected{% endif %}>{{ r }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3 col-sm-6">
          <label class="form-label">Statut</label>
          <select class="form-select form-select-sm" name="connect">
            <option value="">Tous</option>
            <option value="oui" {% if request.args.get('connect')=='oui' %}selected{% endif %}>Actif</option>
            <option value="non" {% if request.args.get('connect')=='non' %}selected{% endif %}>Inactif</option>
          </select>
        </div>
        <div class="col-md-3 col-sm-6 d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm flex-fill"><i class="fas fa-search"></i></button>
          <a href="{{ url_for('liste_utilisateurs') }}" class="btn btn-outline-secondary btn-sm flex-fill"><i class="fas fa-undo"></i></a>
        </div>
      </form>
    </div>
  </div>

  <!-- Tableau -->
  <div class="card border-0 shadow-sm" style="border-radius:12px">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table gtable mb-0">
          <thead>
            <tr><th>#</th><th>Utilisateur</th><th>Rôle</th><th>Statut</th><th>Actions</th></tr>
          </thead>
          <tbody>
            {% for u in utilisateurs %}
            {% set role_cls = 'role-' + u.type.replace(' ','-') if u.type else 'role-default' %}
            <tr>
              <td class="text-muted">{{ u.id }}</td>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                       style="width:32px;height:32px;background:linear-gradient(135deg,#2563eb,#7c3aed);font-size:.85rem;flex-shrink:0">
                    {{ u.username[0]|upper }}
                  </div>
                  <span class="fw-semibold">{{ u.username }}</span>
                </div>
              </td>
              <td>
                <span class="role-pill {{ role_cls }}">{{ u.type or '—' }}</span>
              </td>
              <td>
                {% if u.connect == 'oui' %}
                  <span class="badge" style="background:#d1fae5;color:#065f46;font-size:.7rem">● Actif</span>
                {% else %}
                  <span class="badge" style="background:#fde8e6;color:#b91c1c;font-size:.7rem">● Inactif</span>
                {% endif %}
              </td>
              <td>
                <div class="d-flex gap-1">
                  <a href="{{ url_for('voir_utilisateur', id=u.id) }}"
                     style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Voir"><i class="fas fa-eye"></i></a>
                  <a href="{{ url_for('modifier_utilisateur', id=u.id) }}"
                     style="background:#f0fdf4;color:#16a34a;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Modifier"><i class="fas fa-edit"></i></a>
                  {% if u.id != session.user_id %}
                  <a href="{{ url_for('supprimer_utilisateur', id=u.id) }}"
                     style="background:#fde8e6;color:#b91c1c;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem" class="btn btn-xs" title="Supprimer"
                     onclick="return confirm('Supprimer cet utilisateur ?')"><i class="fas fa-trash"></i></a>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="text-center py-5 text-muted">
              <i class="fas fa-users fa-2x mb-2 d-block opacity-25"></i>Aucun utilisateur trouvé
            </td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}