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

{% block content %}
<div class="page-header">
  <h1>Modules</h1>
  <p>Activez, désactivez et configurez 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:200px;">Actions</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>
            <div style="display:flex; gap:6px; align-items:center;">
              <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>
              {% if module.has_settings %}
                <a href="{% url 'xeolux_securitykit:module_settings' module.name %}" class="btn btn-sm btn-secondary">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-right:4px;">
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>
                  </svg>
                  Réglages
                </a>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% empty %}
<div class="empty-state">
  <p>Aucun module disponible.</p>
</div>
{% endfor %}
{% endblock %}