{#
  astrapi_admin/modules/policies/dialogs/import/modal.html
  Erster Schritt des Policy-Imports: JSON einfuegen/hochladen, wird auf
  Absenden nur GEPARST und in den (bestehenden) Edit-Dialog uebernommen --
  angelegt wird erst dort per normalem "Erstellen", nicht schon hier.
  Variablen: error (str|None), raw (str|None, Wiederherstellung nach Fehler)
#}
{% extends "dialog_form.html" %}

{% block dialog_width %}640{% endblock %}
{% block dialog_title %}Policy importieren{% endblock %}
{% block form_id %}policy-import-form{% endblock %}
{% block form_action %}/ui/policies/import-preview{% endblock %}
{% block form_style %}display:flex; flex-direction:column; gap:16px;{% endblock %}

{% block dialog_body %}
  {% if error %}
  <div style="padding:8px 12px;border-radius:6px;
              background:var(--error-dim,#3a0000);color:var(--error,#ff6b6b);font-size:13px;">{{ error }}</div>
  {% endif %}

  <p class="ds-modal-copy">
    JSON-Export einer Policy (z.B. vom Testserver) einfügen oder als Datei
    auswählen. Im nächsten Schritt lässt sich der Inhalt vor dem Anlegen
    noch prüfen und anpassen — Geheimnisse (z.B. Zertifikatsschlüssel)
    stecken nie im Export und müssen hier neu eingetragen werden.
  </p>

  <div class="form-group">
    <label class="form-label">Datei auswählen (optional)</label>
    <input type="file" accept="application/json,.json" class="form-input"
           onchange="policyImportFile(this)">
  </div>

  <div class="form-group">
    <label class="form-label">JSON <span class="required-mark">*</span></label>
    <textarea class="form-input policy-textarea" name="import_json" rows="14"
              style="font-family:monospace;" required
              placeholder='{"name": "caddy", "config_files": [...], ...}'>{{ raw or '' }}</textarea>
  </div>

  <script>
    function policyImportFile(input) {
      var file = input.files && input.files[0];
      if (!file) return;
      var reader = new FileReader();
      reader.onload = function () {
        var form = input.closest('form');
        form.querySelector('textarea[name="import_json"]').value = reader.result;
      };
      reader.readAsText(file);
    }
  </script>
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer ds-modal-footer--end">
  <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
  <button type="submit" class="btn btn-sm btn-primary">Weiter</button>
</div>
{% endblock %}