{#
  astrapi_admin/modules/policies/dialogs/edit/modal.html
  Strukturiertes Policy-Formular: benoetigte Pakete (nur Existenz-Check,
  siehe E-004), Config-Dateien (Tabelle) und Services (Tabelle) -- kein
  rohes JSON-Feld.
  Variablen: policy (dict|None), error (str|None)
#}
{% extends "dialog_form.html" %}
{% import 'partials/components/ui_macros.html' as ui %}

{% set is_new = policy is none or policy.get('id') is none %}

{% block dialog_width %}720{% endblock %}
{% block dialog_title %}{{ 'Policy bearbeiten' if not is_new else 'Neue Policy' }}{% endblock %}
{% block form_id %}policy-form{% endblock %}
{% block form_action %}{% if is_new %}/ui/policies/{% else %}/ui/policies/{{ policy.id }}/update{% endif %}{% 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 %}

  <div class="form-group">
    <label class="form-label">Name <span class="required-mark">*</span></label>
    <input class="form-input" type="text" name="name"
           value="{{ policy.name if policy else '' }}"
           placeholder="z.B. base-server" required autocomplete="off">
  </div>

  <div class="form-group">
    <label class="form-label">Beschreibung</label>
    <input class="form-input" type="text" name="description"
           value="{{ policy.description if policy else '' }}"
           placeholder="z.B. Baseline für alle simpsons.lan-Server" autocomplete="off">
  </div>

  <div class="form-group">
    {{ ui.toggle_field('group_only', checked=(policy.group_only if policy else False), label='Gruppen-Policy') }}
    <div class="policy-subhead" style="margin-top:4px;">
      Aus: nur direkt an einem Host zuweisbar, taucht in der
      Gruppen-Auswahl nicht auf. Ein: nur an einer Host-Gruppe
      zuweisbar, taucht in der Direkt-Zuweisung am Host nicht auf --
      beides schließt sich gegenseitig aus.
    </div>
  </div>

  <!-- Pakete -->
  <div class="form-group">
    <label class="form-label" style="margin-bottom:8px;">Benötigte Pakete</label>
    <div class="policy-pkg-grid">
      <div>
        <div class="policy-subhead">Arch – muss bereits installiert sein</div>
        <textarea class="form-input policy-textarea" name="packages_arch"
                  placeholder="ein Paket pro Zeile&#10;z.B. caddy">{{ (policy.packages_arch | join('\n')) if policy and policy.packages_arch else '' }}</textarea>
      </div>
      <div>
        <div class="policy-subhead">Debian – muss bereits installiert sein</div>
        <textarea class="form-input policy-textarea" name="packages_debian"
                  placeholder="ein Paket pro Zeile&#10;z.B. caddy">{{ (policy.packages_debian | join('\n')) if policy and policy.packages_debian else '' }}</textarea>
      </div>
    </div>
    <div class="policy-subhead" style="margin-top:6px;">
      Wird nur geprüft, nicht installiert -- fehlt ein Paket, meldet der Agent einen Fehler.
    </div>
  </div>

  <!-- Config-Dateien -->
  <div class="form-group">
    <label class="form-label" style="margin-bottom:8px;">Config-Dateien</label>
    <div id="policy-cf-rows" class="policy-rows"></div>
    <button type="button" class="btn btn-ghost" style="font-size:12px;" onclick="policyAddConfigFile()">+ Config-Datei</button>
  </div>

  <!-- Services -->
  <div class="form-group">
    <label class="form-label" style="margin-bottom:8px;">Services</label>
    <div id="policy-svc-rows" class="policy-rows"></div>
    <button type="button" class="btn btn-ghost" style="font-size:12px;" onclick="policyAddService()">+ Service</button>
  </div>

  <style>
    .policy-pkg-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .policy-subhead { font-size:11px; color:var(--text-3); margin-bottom:4px; }
    .policy-textarea { width:100%; min-height:70px; font-family:monospace; font-size:12px; resize:vertical; }
    .policy-rows { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
    .policy-row {
      display:flex; gap:6px; align-items:flex-start; padding:8px;
      border:1px solid var(--border-s); border-radius:var(--rad-lg); background:var(--card);
    }
    .policy-row input, .policy-row select, .policy-row textarea { font-size:12px; }
    .policy-row .policy-row-remove {
      background:none; border:none; color:var(--text-3); cursor:pointer;
      font-size:16px; line-height:1; padding:4px;
    }
    .policy-cf-card {
      display:flex; flex-direction:column; gap:8px; padding:8px;
      border:1px solid var(--border-s); border-radius:var(--rad-lg); background:var(--card);
    }
    .policy-cf-card input, .policy-cf-card select, .policy-cf-card textarea { font-size:12px; }
    .policy-cf-topline { display:flex; gap:6px; align-items:center; }
    .policy-cf-path { flex:1; min-width:0; font-family:monospace; }
    .policy-cf-metaline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .policy-cf-action { flex:1; min-width:110px; }
    .policy-cf-mode { width:65px; flex-shrink:0; }
    .policy-cf-owner, .policy-cf-group { width:100px; flex-shrink:0; }
    .policy-cf-force { width:125px; flex-shrink:0; }
    .policy-cf-secret { width:120px; flex-shrink:0; }
    .policy-cf-content-btn, .policy-cf-topline .btn-icon { flex-shrink:0; }
    /* Wird bei geoeffnetem Inhalt-Modal per JS dorthin verschoben (echtes
       Element, kein Duplikat -- form="policy-form" haelt die Zuordnung
       zum aeusseren Formular unabhaengig vom aktuellen DOM-Standort) und
       beim Schliessen wieder hierher zurueckgestellt. */
    .policy-cf-content { display:none; }
    .policy-cf-content.policy-cf-content--open {
      display:block; width:100%; min-height:60vh; font-family:monospace; resize:vertical;
    }
    .policy-svc-name { flex:2; min-width:0; }
    .policy-svc-state { flex:1; min-width:140px; }
  </style>
{% endblock %}

{% block dialog_footer %}
{{ ui.modal_footer(
  enabled=(policy.enabled if policy else True),
  enabled_id='policy-enabled',
  save_label=('Speichern' if not is_new else 'Erstellen'),
) }}
{% endblock %}

{% block dialog_scripts %}
<script>
(function () {
  var cfRows  = document.getElementById('policy-cf-rows');
  var svcRows = document.getElementById('policy-svc-rows');

  var CF_ACTIONS  = [['enforce', 'Durchsetzen'], ['absent', 'Entfernen']];
  var CF_FORCE    = [['0', 'Geschützt'], ['1', 'Erzwingen']];
  var CF_SECRET   = [['0', 'Normal'], ['1', 'Geheimnis']];
  var SVC_STATES  = [
    ['enabled_started',  'Aktiviert + Gestartet'],
    ['enabled',          'Nur Aktiviert'],
    ['started',          'Nur Gestartet'],
    ['disabled_stopped', 'Deaktiviert + Gestoppt'],
    ['disabled',         'Nur Deaktiviert'],
    ['stopped',          'Nur Gestoppt'],
  ];

  function opt(value, label, selected) {
    return '<option value="' + value + '"' + (selected ? ' selected' : '') + '>' + label + '</option>';
  }

  window.policyAddConfigFile = function (cf) {
    cf = cf || {};
    var card = document.createElement('div');
    card.className = 'policy-cf-card';
    var action = cf.action || 'enforce';
    var force = cf.force ? '1' : '0';
    var isSecret = cf.secret ? '1' : '0';
    // secret=true: Inhalt kommt NIE vom Server in die Textarea (siehe
    // policies/ui/__init__.py::_with_secret_status()) -- Placeholder
    // unterscheidet nur, ob bereits ein Wert im Secrets-Store liegt.
    var contentValue = cf.secret ? '' : (cf.content || '');
    var contentPlaceholder = cf.secret
      ? (cf.secret_is_set ? 'Geheimnis gesetzt -- leer lassen, um es zu behalten' : 'Neues Geheimnis eintragen')
      : 'Dateiinhalt';
    card.innerHTML =
      '<div class="policy-cf-topline">' +
        '<input class="form-input policy-cf-path" name="cf_path" type="text" placeholder="/etc/pfad/datei.conf" value="' +
          (cf.path || '').replace(/"/g, '&quot;') + '">' +
        '<button type="button" class="btn-icon policy-cf-content-btn" title="Inhalt bearbeiten" ' +
          'onclick="policyOpenContentModal(this)"' + (action === 'absent' ? ' style="display:none;"' : '') + '>' +
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-file-text"></use></svg>' +
        '</button>' +
        '<button type="button" class="btn-icon btn-icon-danger" title="Entfernen" onclick="this.closest(\'.policy-cf-card\').remove()">' +
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-minus"></use></svg>' +
        '</button>' +
      '</div>' +
      '<div class="policy-cf-metaline">' +
        '<select class="form-input policy-cf-action" name="cf_action" onchange="policyToggleCfContent(this)">' +
          CF_ACTIONS.map(function (a) { return opt(a[0], a[1], a[0] === action); }).join('') +
        '</select>' +
        '<input class="form-input policy-cf-mode" name="cf_mode" type="text" placeholder="0644" value="' + (cf.mode || '0644') + '">' +
        '<input class="form-input policy-cf-owner" name="cf_owner" type="text" placeholder="root" value="' + (cf.owner || 'root') + '">' +
        '<input class="form-input policy-cf-group" name="cf_group" type="text" placeholder="root" value="' + (cf.group || 'root') + '">' +
        '<select class="form-input policy-cf-force" name="cf_force" title="Erzwingen überschreibt auch Dateien, die einem Paket gehören (z.B. eine vom OS-Paket mitgelieferte Standard-Config)">' +
          CF_FORCE.map(function (f) { return opt(f[0], f[1], f[0] === force); }).join('') +
        '</select>' +
        '<select class="form-input policy-cf-secret" name="cf_secret" title="Geheimnis: Inhalt wird verschlüsselt separat gespeichert, nie im Klartext in der Policy">' +
          CF_SECRET.map(function (s) { return opt(s[0], s[1], s[0] === isSecret); }).join('') +
        '</select>' +
      '</div>' +
      '<textarea class="form-input policy-cf-content" form="policy-form" name="cf_content" placeholder="' + contentPlaceholder + '">' +
        contentValue + '</textarea>';
    cfRows.appendChild(card);
  };

  window.policyToggleCfContent = function (select) {
    var card = select.closest('.policy-cf-card');
    var btn = card.querySelector('.policy-cf-content-btn');
    btn.style.display = select.value === 'absent' ? 'none' : '';
  };

  // Verschiebt die echte cf_content-Textarea (kein Duplikat) in ein
  // Modal, das die App-weite .ds-modal-Optik nachbildet. Das Feld hat
  // form="policy-form" -- die Formularzugehoerigkeit bleibt also
  // unabhaengig davon erhalten, wo es gerade im DOM haengt. Beim
  // Schliessen wandert es zurueck an seinen Platz in der Karte.
  window.policyOpenContentModal = function (btn) {
    var card = btn.closest('.policy-cf-card');
    var textarea = card.querySelector('.policy-cf-content');
    var pathInput = card.querySelector('.policy-cf-path');
    var path = pathInput.value.trim() || '(kein Pfad angegeben)';

    var backdrop = document.createElement('div');
    backdrop.className = 'ds-modal-backdrop';
    backdrop.innerHTML =
      '<div class="ds-modal" style="max-width:820px;">' +
        '<div class="ds-modal-header">' +
          '<span id="modal-title"></span>' +
          '<button type="button" class="ds-modal-close" title="Schließen">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-close"></use></svg>' +
          '</button>' +
        '</div>' +
        '<div class="policy-cf-modal-body" style="padding:16px 20px;"></div>' +
        '<div style="display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border-s);">' +
          '<button type="button" class="btn btn-primary policy-cf-content-done">Fertig</button>' +
        '</div>' +
      '</div>';
    backdrop.querySelector('#modal-title').textContent = 'Inhalt – ' + path;

    function closeIt() {
      textarea.classList.remove('policy-cf-content--open');
      card.appendChild(textarea);
      backdrop.remove();
    }

    textarea.classList.add('policy-cf-content--open');
    backdrop.querySelector('.policy-cf-modal-body').appendChild(textarea);
    backdrop.querySelector('.ds-modal-close').addEventListener('click', closeIt);
    backdrop.querySelector('.policy-cf-content-done').addEventListener('click', closeIt);
    backdrop.addEventListener('click', function (e) { if (e.target === backdrop) closeIt(); });
    backdrop.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeIt(); });

    document.body.appendChild(backdrop);
    textarea.focus();
  };

  window.policyAddService = function (svc) {
    svc = svc || {};
    var row = document.createElement('div');
    row.className = 'policy-row';
    var state = svc.state || 'enabled_started';
    row.innerHTML =
      '<input class="form-input policy-svc-name" name="svc_name" type="text" placeholder="z.B. sshd" value="' +
        (svc.name || '').replace(/"/g, '&quot;') + '">' +
      '<select class="form-input policy-svc-state" name="svc_state">' +
        SVC_STATES.map(function (s) { return opt(s[0], s[1], s[0] === state); }).join('') +
      '</select>' +
      '<button type="button" class="policy-row-remove" onclick="this.closest(\'.policy-row\').remove()">×</button>';
    svcRows.appendChild(row);
  };

  {% if policy and policy.config_files %}
  var initialCf = {{ policy.config_files | tojson }};
  initialCf.forEach(function (cf) { policyAddConfigFile(cf); });
  {% endif %}

  {% if policy and policy.services %}
  var initialSvc = {{ policy.services | tojson }};
  initialSvc.forEach(function (svc) { policyAddService(svc); });
  {% endif %}
})();
</script>
{% endblock %}