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

{% block content %}
<div class="page-header">
  <h1>{{ title }}</h1>
</div>

<div style="max-width:640px;">
  <div class="card">
    <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 error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
        </div>
      {% endfor %}
      {% if form.non_field_errors %}
        <div class="alert alert-error">{{ form.non_field_errors }}</div>
      {% endif %}
      <div style="display:flex; gap:10px; margin-top:8px;">
        <button type="submit" class="btn btn-primary">Enregistrer</button>
        <a href="javascript:history.back()" class="btn btn-ghost">Annuler</a>
      </div>
    </form>
  </div>
</div>

{% if dry_run_result %}
<div style="max-width:640px; margin-top:20px;">
  <div class="card">
    <div class="card-title" style="margin-bottom:14px;">Résultat de la simulation</div>
    <div style="display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px;">
      <div><span style="font-size:11px; color:var(--label-3);">CHEMIN</span><br><code style="color:#0A84FF;">{{ dry_run_result.path }}</code></div>
      <div><span style="font-size:11px; color:var(--label-3);">IP SIMULÉE</span><br><code>{{ dry_run_result.simulated_ip }}</code></div>
      <div>
        <span style="font-size:11px; color:var(--label-3);">VERDICT</span><br>
        <span class="badge {% if dry_run_result.final_verdict == 'AUTORISÉ' %}badge-ok{% else %}badge-danger{% endif %}">{{ dry_run_result.final_verdict }}</span>
      </div>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Vérification</th><th>Résultat</th></tr></thead>
        <tbody>
          {% for check in dry_run_result.checks %}
          <tr>
            <td>{{ check.check }}</td>
            <td><span class="badge {% if check.result == 'OK' %}badge-ok{% elif 'BLOQUÉ' in check.result %}badge-danger{% else %}badge-warn{% endif %}">{{ check.result }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}

{% if profiles %}
<div style="max-width:640px; margin-top:20px;">
  <div class="card">
    <div class="card-title" style="margin-bottom:14px;">Profils disponibles</div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Profil</th><th>Description</th><th style="width:100px;"></th></tr></thead>
        <tbody>
          {% for profile in profiles %}
          <tr>
            <td style="font-weight:500;">{{ profile.label }}</td>
            <td style="color:var(--label-3); font-size:12px;">{{ profile.description }}</td>
            <td>
              <form method="post" action="{% url 'xeolux_securitykit:profile_apply' profile.name %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-outline">Appliquer</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}