{% extends "xeolux_securitykit/base.html" %}
{% block title %}Testeur de règles{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Testeur de règles</h1>
    <p style="color:var(--label-2); margin-top:4px;">Simulez une requête et voyez quelles protections s'appliquent (dry run — aucune action réelle).</p>
  </div>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;">

  <!-- Formulaire de simulation -->
  <div class="card">
    <div class="card-title" style="margin-bottom:16px;">Paramètres de simulation</div>
    <form method="post">
      {% csrf_token %}
      {% for field in form %}
        <div class="form-group">
          <label class="form-label">{{ field.label }}</label>
          {% if field.field.widget.input_type == "checkbox" %}
            <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
              {{ field }}
              <span style="font-size:13px; color:var(--label-2);">{{ field.label }}</span>
            </label>
          {% else %}
            {{ field }}
          {% endif %}
          {% 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 %}
      <div style="margin-top:8px;">
        <button type="submit" class="btn btn-primary">Simuler</button>
      </div>
    </form>
  </div>

  <!-- Résultats -->
  <div>
    {% if dry_run_result %}
    <div class="card" style="margin-bottom:12px;">
      <div class="card-title" style="margin-bottom:12px;">Résultat</div>
      <div style="display:flex; gap:8px; align-items:center; margin-bottom:12px;">
        {% if dry_run_result.final_verdict == "AUTORISÉ" %}
          <span class="badge" style="background:rgba(52,199,89,0.12); color:var(--green); font-size:13px; padding:6px 14px;">AUTORISÉ</span>
        {% else %}
          <span class="badge" style="background:rgba(255,59,48,0.12); color:var(--red); font-size:13px; padding:6px 14px;">BLOQUÉ</span>
        {% endif %}
        <span style="font-size:12px; color:var(--label-2);">
          <code>{{ dry_run_result.path }}</code> depuis <code>{{ dry_run_result.simulated_ip }}</code>
        </span>
      </div>
    </div>

    <div class="card">
      <div class="card-title" style="margin-bottom:12px;">Détail des vérifications</div>
      <table style="width:100%; border-collapse:collapse; font-size:13px;">
        <thead>
          <tr style="border-bottom:1px solid var(--border);">
            <th style="text-align:left; padding:6px 8px; color:var(--label-2); font-weight:500;">Module</th>
            <th style="text-align:left; padding:6px 8px; color:var(--label-2); font-weight:500;">Résultat</th>
          </tr>
        </thead>
        <tbody>
          {% for check in dry_run_result.checks %}
          <tr style="border-bottom:1px solid var(--border);">
            <td style="padding:8px; font-family:'SF Mono','Fira Code',monospace; font-size:12px; color:var(--label-2);">{{ check.check }}</td>
            <td style="padding:8px;">
              {% if "BLOQUÉ" in check.result or "RÈGLE" in check.result %}
                <span style="color:var(--red); font-weight:500;">{{ check.result }}</span>
                {% if check.action %}<span style="color:var(--label-3); font-size:11px; margin-left:6px;">→ {{ check.action }}</span>{% endif %}
              {% else %}
                <span style="color:var(--green);">{{ check.result }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="card" style="text-align:center; padding:40px; color:var(--label-2);">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin:0 auto 12px; display:block; opacity:0.4;">
        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <p>Remplissez le formulaire et cliquez sur <strong>Simuler</strong> pour voir le résultat.</p>
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}