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

{% block content %}
<div class="page-header">
  <h1>Blacklist IP</h1>
  <p>IPs et plages CIDR bloquées.</p>
</div>

<div style="display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start;">
  <div class="card">
    <table>
      <thead><tr><th>IP / CIDR</th><th>Label</th><th>Raison</th><th>Expiration</th><th>Statut</th><th></th></tr></thead>
      <tbody>
        {% for entry in entries %}
        <tr>
          <td><code>{{ entry.ip_or_cidr }}</code></td>
          <td>{{ entry.label|default:"—" }}</td>
          <td>{{ entry.reason|default:"—" }}</td>
          <td>{{ entry.expires_at|date:"d/m/Y H:i"|default:"Permanent" }}</td>
          <td>{% if entry.enabled %}<span class="badge badge-danger">Actif</span>{% else %}<span class="badge badge-warn">Inactif</span>{% endif %}</td>
          <td>
            <form method="post" action="{% url 'xeolux_securitykit:blacklist_delete' entry.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-outline btn-sm" onclick="return confirm('Retirer ?')">✕</button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="6" style="color: var(--text-muted);">Aucune entrée.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <div class="card-title">Bloquer une IP</div>
    <form method="post">
      {% csrf_token %}
      {% for field in form %}
        <div class="form-group">
          <label>{{ field.label }}</label>
          {{ field }}
          {% if field.errors %}<ul class="errorlist">{% for e in field.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
        </div>
      {% endfor %}
      <button type="submit" class="btn btn-danger" style="width: 100%;">Bloquer</button>
    </form>
  </div>
</div>
{% endblock %}