{% extends "xeolux_securitykit/base.html" %}
{% block title %}Modules{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Modules</h1>
  <p>Activez ou désactivez les modules de protection individuellement.</p>
</div>

{% for group in grouped %}
<div class="card" style="margin-bottom:12px;">
  <div class="card-header">
    <div class="card-title">{{ group.category }}</div>
    <span class="badge badge-neutral">{{ group.modules|length }}</span>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Module</th>
          <th>Statut</th>
          <th style="width:90px;">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for module in group.modules %}
        <tr>
          <td style="font-weight:500;">{{ module.label }}</td>
          <td>
            <span class="badge {% if module.enabled %}badge-ok{% else %}badge-neutral{% endif %}">
              {% if module.enabled %}Actif{% else %}Inactif{% endif %}
            </span>
          </td>
          <td>
            <form method="post" action="{% url 'xeolux_securitykit:module_toggle' module.name %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm {% if module.enabled %}btn-outline{% else %}btn-primary{% endif %}">
                {% if module.enabled %}Désactiver{% else %}Activer{% endif %}
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% empty %}
<div class="empty-state">
  <div class="empty-icon">⊞</div>
  <p>Aucun module disponible.</p>
</div>
{% endfor %}
{% endblock %}