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

{% block content %}
<div class="page-header">
  <h1>Bans temporaires</h1>
  <p>Bannissements actifs et historique. Les bans expirés sont conservés pour l'historique et le comptage des récidives.</p>
</div>

{% if bans %}
<div class="card" style="padding:0; overflow:hidden;">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>IP</th>
          <th>Raison</th>
          <th>Détails</th>
          <th>Créé le</th>
          <th>Expire le</th>
          <th>Statut</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for ban in bans %}
        <tr>
          <td><code>{{ ban.ip_address }}</code></td>
          <td>{{ ban.get_reason_display }}</td>
          <td style="font-size:12px; color:var(--label-2); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{ ban.details }}">{{ ban.details|default:"—" }}</td>
          <td style="font-size:12px; color:var(--label-2);">{{ ban.created_at|date:"d/m/Y H:i" }}</td>
          <td style="font-size:12px;">{{ ban.expires_at|date:"d/m/Y H:i" }}</td>
          <td>
            {% if ban.lifted %}
              <span class="badge badge-neutral">Levé</span>
            {% elif ban.expires_at < now %}
              <span class="badge badge-neutral">Expiré</span>
            {% else %}
              <span class="badge badge-danger">Actif</span>
            {% endif %}
          </td>
          <td>
            {% if not ban.lifted and ban.expires_at >= now %}
            <form method="post" action="{% url 'xeolux_securitykit:temporary_ban_lift' ban.pk %}" style="display:inline;">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-outline"
                onclick="return confirm('Lever ce ban pour {{ ban.ip_address }} ?')">
                Lever
              </button>
            </form>
            {% else %}—{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="empty-state">
  <div class="empty-icon">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5"/>
      <path d="M20 12v9M20 26v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <p>Aucun ban temporaire enregistré.</p>
</div>
{% endif %}
{% endblock %}