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

{% block content %}
<div class="page-header">
  <h1>Whitelist IP</h1>
  <p>IPs et plages CIDR autorisées à passer les protections.</p>
</div>

<div class="grid-2">
  <div class="card">
    <div class="card-header">
      <div class="card-title">Entrées autorisées</div>
      <span class="badge badge-neutral">{{ entries|length }}</span>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>IP / CIDR</th><th>Label</th><th>Portée</th><th>Statut</th><th style="width:40px;"></th></tr></thead>
        <tbody>
          {% for entry in entries %}
          <tr>
            <td><code>{{ entry.ip_or_cidr }}</code></td>
            <td style="color:var(--label-2);">{{ entry.label|default:"—" }}</td>
            <td>
              {% if entry.is_securitykit_access %}
                <span class="badge badge-info">SecurityKit</span>
              {% elif entry.route %}
                <span class="badge badge-neutral">{{ entry.route }}</span>
              {% else %}
                <span style="color:var(--label-3); font-size:12px;">Globale</span>
              {% endif %}
            </td>
            <td>{% if entry.enabled %}<span class="badge badge-ok">Actif</span>{% else %}<span class="badge badge-neutral">Inactif</span>{% endif %}</td>
            <td>
              <form method="post" action="{% url 'xeolux_securitykit:whitelist_delete' entry.pk %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-outline" style="color:var(--red); border-color:transparent;" onclick="return confirm('Supprimer cette entrée ?')">✕</button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="5">
            <div class="empty-state" style="padding:24px;">
              <p>Aucune entrée. Ajoutez une IP ci-contre.</p>
            </div>
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-title" style="margin-bottom:16px;">Ajouter une IP</div>
    <form method="post">
      {% csrf_token %}
      {% for field in form %}
        <div class="form-group">
          <label class="form-label">{{ field.label }}</label>
          {{ field }}
          {% if field.help_text %}<p class="help-text">{{ field.help_text }}</p>{% endif %}
          {% 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-primary" style="width:100%;">Ajouter</button>
    </form>
  </div>
</div>
{% endblock %}