{% extends "xeolux_securitykit/base.html" %}
{% block title %}Routes protégées{% endblock %}

{% block content %}
<div class="page-header">
  <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px;">
    <div>
      <h1>Routes protégées</h1>
      <p>Règles de sécurité appliquées par chemin URL.</p>
    </div>
    <a href="{% url 'xeolux_securitykit:route_add' %}" class="btn btn-primary">+ Ajouter une route</a>
  </div>
</div>

{% for route in routes %}
<div class="card" style="border-left:3px solid {% if not route.enabled %}rgba(84,84,88,0.4){% else %}rgba(10,132,255,0.5){% endif %};">
  <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:14px;">
    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
      <code style="font-size:14px; color:#0A84FF; font-weight:600;">{{ route.path }}</code>
      <span class="badge badge-neutral" style="font-size:10px;">{{ route.match_type }}</span>
      {% if not route.enabled %}<span class="badge badge-neutral">Inactif</span>{% endif %}
      {% if route.description %}<span style="font-size:12px; color:var(--label-3);">{{ route.description }}</span>{% endif %}
    </div>
    <div style="display:flex; gap:8px; flex-shrink:0;">
      <a href="{% url 'xeolux_securitykit:rule_add' route.pk %}" class="btn btn-sm btn-outline">+ Règle</a>
      <a href="{% url 'xeolux_securitykit:route_edit' route.pk %}" class="btn btn-sm btn-ghost">Modifier</a>
      <form method="post" action="{% url 'xeolux_securitykit:route_delete' route.pk %}" style="display:inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-sm btn-outline" style="color:var(--red);" onclick="return confirm('Supprimer cette route et toutes ses règles ?')">Supprimer</button>
      </form>
    </div>
  </div>

  {% if route.rules.all %}
  <div class="table-wrap">
    <table>
      <thead><tr><th>Action</th><th>Conditions</th><th>Priorité</th><th>Statut</th><th style="width:90px;"></th></tr></thead>
      <tbody>
        {% for rule in route.rules.all %}
        <tr>
          <td>
            <span class="badge {% if rule.action == 'fake_404' or rule.action == 'block' %}badge-danger{% elif rule.action == 'allow' %}badge-ok{% else %}badge-warn{% endif %}">{{ rule.action }}</span>
          </td>
          <td><code style="font-size:11px; color:var(--label-2);">{{ rule.conditions|default:"—" }}</code></td>
          <td style="color:var(--label-3);">{{ rule.priority }}</td>
          <td>{% if rule.enabled %}<span class="badge badge-ok">Actif</span>{% else %}<span class="badge badge-neutral">Inactif</span>{% endif %}</td>
          <td>
            <a href="{% url 'xeolux_securitykit:rule_edit' rule.pk %}" class="btn btn-sm btn-ghost" style="font-size:11px;">Modifier</a>
            <form method="post" action="{% url 'xeolux_securitykit:rule_delete' rule.pk %}" style="display:inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-outline" style="color:var(--red); border-color:transparent;" onclick="return confirm('Supprimer cette règle ?')">✕</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p style="font-size:12px; color:var(--label-3);">Aucune règle — <a href="{% url 'xeolux_securitykit:rule_add' route.pk %}" style="color:#0A84FF;">Ajouter une règle</a></p>
  {% endif %}
</div>
{% empty %}
<div class="card">
  <div class="empty-state">
    <div class="empty-icon">⟋</div>
    <p>Aucune route protégée.</p>
    <a href="{% url 'xeolux_securitykit:route_add' %}" class="btn btn-primary" style="margin-top:14px;">Ajouter la première route</a>
  </div>
</div>
{% endfor %}
{% endblock %}