{% extends "xeolux_securitykit/base.html" %}
{% block title %}Paramètres{% 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>Paramètres</h1>
      <p>Configuration stockée en base de données. Seul <code>ENABLED: True</code> est requis dans <code>settings.py</code>.</p>
    </div>
  </div>
</div>

<div class="alert alert-info" style="margin-bottom:20px;">
  <div>
    <strong>Base de données = source de vérité.</strong><br>
    Les valeurs modifiées ici sont stockées en DB et prennent le dessus sur <code>settings.py</code>.
    Pour revenir au défaut, videz le champ.
    <br>
    <span style="font-size:11px; margin-top:4px; display:block; opacity:0.8;">
      <span style="color:var(--green);">■</span> DB &nbsp;
      <span style="color:var(--orange);">■</span> settings.py &nbsp;
      <span style="color:var(--label-3);">■</span> défaut interne
    </span>
  </div>
</div>

<form method="post">
  {% csrf_token %}

  {% for group in grouped %}
  <div class="card" style="margin-bottom:12px;">
    <div class="card-title" style="margin-bottom:16px;">{{ group.category }}</div>

    {% for key, param in group.items %}
    <div class="form-group" style="display:flex; align-items:flex-start; gap:16px; padding:10px 0; border-bottom:1px solid var(--border);">
      <div style="flex:1; min-width:0;">
        <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;">
          <code style="font-size:12px; color:var(--label-2); background:none; padding:0;">{{ key }}</code>
          {% if param.source == "db" %}
            <span class="badge" style="background:rgba(48,209,88,0.12); color:var(--green); font-size:10px;">DB</span>
          {% elif param.source == "settings" %}
            <span class="badge" style="background:rgba(255,159,10,0.12); color:var(--orange); font-size:10px;">settings.py</span>
          {% else %}
            <span class="badge badge-neutral" style="font-size:10px;">défaut</span>
          {% endif %}
          <span style="font-size:11px; color:var(--label-3);">{{ param.type }}</span>
        </div>

        {% if param.type == "bool" %}
          {# Toggle switch pour les booléens #}
          <label style="display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;">
            <div class="toggle-form">
              <button type="button" class="toggle-btn {% if param.value %}toggle-on{% endif %}"
                      onclick="toggleBool(this)"
                      data-key="{{ key }}">
                <div class="toggle-track">
                  <div class="toggle-thumb"></div>
                </div>
              </button>
            </div>
            <input type="hidden" name="{{ key }}" id="hidden_{{ key }}"
                   value="{% if param.value %}on{% else %}off{% endif %}">
            <span style="font-size:13px; color:var(--label-2);">{% if param.value %}Activé{% else %}Désactivé{% endif %}</span>
          </label>
        {% elif param.type == "list" %}
          <textarea name="{{ key }}" rows="2" class="form-control" style="font-family:monospace; font-size:12px;"
                    placeholder='Ex: ["/static/", "/media/"]'>{{ param.value_json|default:"" }}</textarea>
          <p class="help-text">Format JSON. Laissez vide pour le défaut : <code>{{ param.default }}</code></p>
        {% elif param.type == "NoneType" %}
          <input type="text" name="{{ key }}" value="{{ param.value|default:"" }}"
                 class="form-control" placeholder="None (désactivé)">
          <p class="help-text">Laissez vide pour désactiver. Défaut : <code>{{ param.default }}</code></p>
        {% elif param.type == "int" %}
          <input type="number" name="{{ key }}" value="{{ param.value }}"
                 class="form-control" min="0">
          <p class="help-text">Défaut : <code>{{ param.default }}</code></p>
        {% else %}
          <input type="text" name="{{ key }}" value="{{ param.value|default:"" }}"
                 class="form-control" placeholder="{{ param.default|default:"" }}">
          <p class="help-text">Défaut : <code>{{ param.default }}</code></p>
        {% endif %}
      </div>
    </div>
    {% endfor %}

  </div>
  {% endfor %}

  <div style="display:flex; gap:12px; align-items:center; margin-top:8px; padding-bottom:40px;">
    <button type="submit" class="btn btn-primary">Sauvegarder en base de données</button>
    <a href="{% url 'xeolux_securitykit:dashboard' %}" class="btn btn-ghost">Annuler</a>
  </div>
</form>

<script>
function toggleBool(btn) {
  const isOn = btn.classList.toggle('toggle-on');
  const hidden = document.getElementById('hidden_' + btn.dataset.key);
  const label = btn.parentElement.parentElement.querySelector('span');
  hidden.value = isOn ? 'on' : 'off';
  label.textContent = isOn ? 'Activé' : 'Désactivé';
}
</script>
{% endblock %}