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

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

<div style="max-width:680px;">
  <div class="card">
    <form method="post">
      {% csrf_token %}
      {% for field in form %}
        {% if field.name in "cond_authenticated,cond_staff,cond_whitelist_ip,cond_blacklist_deny,cond_api_key" %}
          {# Ces champs sont groupés dans le bloc "conditions" ci-dessous #}
        {% elif field.name == "cond_methods" or field.name == "cond_user_agent_block" %}
          {# Idem — affichés dans le groupe conditions #}
        {% else %}
          <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>
        {% endif %}
      {% endfor %}

      <!-- ── Conditions d'accès ── -->
      <div style="border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-bottom:18px;">
        <div class="card-title" style="margin-bottom:14px;">Conditions d'accès</div>
        <p style="font-size:12px; color:var(--label-3); margin-bottom:14px; line-height:1.5;">
          Définissez qui peut accéder à cette route. Si aucune condition n'est cochée, la règle s'applique à tout le monde.
        </p>

        <!-- Checkboxes simples -->
        <div style="display:grid; gap:10px; margin-bottom:16px;">
          <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);">
            {{ form.cond_authenticated }}
            <div>
              <div style="font-size:13px; font-weight:500; color:var(--label);">{{ form.cond_authenticated.label }}</div>
              <div style="font-size:11px; color:var(--label-3); margin-top:1px;">{{ form.cond_authenticated.help_text }}</div>
            </div>
          </label>
          <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);">
            {{ form.cond_staff }}
            <div>
              <div style="font-size:13px; font-weight:500; color:var(--label);">{{ form.cond_staff.label }}</div>
              <div style="font-size:11px; color:var(--label-3); margin-top:1px;">{{ form.cond_staff.help_text }}</div>
            </div>
          </label>
          <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);">
            {{ form.cond_whitelist_ip }}
            <div>
              <div style="font-size:13px; font-weight:500; color:var(--label);">{{ form.cond_whitelist_ip.label }}</div>
              <div style="font-size:11px; color:var(--label-3); margin-top:1px;">{{ form.cond_whitelist_ip.help_text }}</div>
            </div>
          </label>
          <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);">
            {{ form.cond_blacklist_deny }}
            <div>
              <div style="font-size:13px; font-weight:500; color:var(--label);">{{ form.cond_blacklist_deny.label }}</div>
              <div style="font-size:11px; color:var(--label-3); margin-top:1px;">{{ form.cond_blacklist_deny.help_text }}</div>
            </div>
          </label>
          <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);">
            {{ form.cond_api_key }}
            <div>
              <div style="font-size:13px; font-weight:500; color:var(--label);">{{ form.cond_api_key.label }}</div>
              <div style="font-size:11px; color:var(--label-3); margin-top:1px;">{{ form.cond_api_key.help_text }}</div>
            </div>
          </label>
        </div>

        <!-- Méthodes HTTP -->
        <div class="form-group" style="margin-bottom:14px;">
          <label class="form-label">{{ form.cond_methods.label }}</label>
          <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;">
            {% for choice_val, choice_label in form.cond_methods.field.choices %}
            <label style="display:flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:12px; color:var(--label-2);">
              <input type="checkbox" name="{{ form.cond_methods.html_name }}" value="{{ choice_val }}"
                {% if choice_val in form.cond_methods.value %}checked{% endif %}
                style="width:auto;">
              {{ choice_val }}
            </label>
            {% endfor %}
          </div>
          <p class="help-text">{{ form.cond_methods.help_text }}</p>
        </div>

        <!-- Blocage User-Agent -->
        <div class="form-group" style="margin-bottom:0;">
          <label class="form-label">{{ form.cond_user_agent_block.label }}</label>
          {{ form.cond_user_agent_block }}
          <p class="help-text">{{ form.cond_user_agent_block.help_text }}</p>
        </div>
      </div>

      {% 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>

<style>
  input[type="checkbox"] { accent-color: var(--blue); width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; }
</style>

{% 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 %}