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

{% block content %}
<div class="page-header">
  <div>
    <h1>Importer une configuration</h1>
    <p style="color:var(--label-2); margin-top:4px;">Restaurez une configuration exportée depuis une autre instance SecurityKit.</p>
  </div>
</div>

<div style="max-width:560px;">
  <div class="alert alert-warn" style="margin-bottom:20px;">
    <strong>Attention :</strong> L'import écrasera les routes, règles, whitelist et blacklist existantes.
  </div>

  <div class="card">
    <form method="post" enctype="multipart/form-data">
      {% 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 e in field.errors %}<li>{{ e }}</li>{% endfor %}</ul>
          {% endif %}
        </div>
      {% endfor %}
      <div style="display:flex; gap:10px; margin-top:8px;">
        <button type="submit" class="btn btn-primary"
          onclick="return confirm('Importer cette configuration ? Les données existantes seront remplacées.')">
          Importer
        </button>
        <a href="{% url 'xeolux_securitykit:dashboard' %}" class="btn btn-secondary">Annuler</a>
      </div>
    </form>
  </div>

  <div class="card" style="margin-top:12px; background:var(--fill-2);">
    <div class="card-title" style="margin-bottom:8px;">Format attendu</div>
    <p style="color:var(--label-2); font-size:13px; line-height:1.6;">
      Fichier <code>.json</code> généré par la fonction <strong>Exporter</strong> de SecurityKit.
      Inclut les routes protégées, règles, whitelist IP, blacklist IP et clés API.
    </p>
  </div>
</div>
{% endblock %}