{#
  core/ui/templates/partials/preview_modal.html
  Zeigt die Befehle an, die bei "Ausführen" ausgeführt würden.

  Variablen:
    description – Anzeigename des Jobs
    commands    – list[dict(label, cmd)]  – Befehle mit Abschnitts-Label
#}
{% extends "dialog_core.html" %}

{% block dialog_id %}preview-modal{% endblock %}
{% block dialog_width %}800{% endblock %}
{% block dialog_title %}Befehlsvorschau – {{ description }}{% endblock %}

{% block dialog_body %}
  {% if commands %}
    {% for entry in commands %}
    <div style="margin-bottom:14px;" x-data="{copied: false}">
      <div style="font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
                  color:var(--text-3); margin-bottom:5px;">{{ entry.label }}</div>
      <div style="position:relative;">
        <pre x-ref="cmd"
             style="background:#0d0d0d; color:#e8e8e8; border:1px solid var(--border-s); border-radius:var(--rad-lg);
                    font-family:var(--mono); font-size:12px; line-height:1.7;
                    padding:12px 40px 12px 16px; white-space:pre-wrap; word-break:break-all; margin:0;">{{ entry.cmd }}</pre>
        <button type="button"
                style="position:absolute; top:6px; right:8px; background:none; border:none;
                       cursor:pointer; padding:4px; border-radius:4px; opacity:.75;
                       color:#e8e8e8; transition:opacity .15s;"
                title="Kopieren"
                x-on:mouseenter="$el.style.opacity=1"
                x-on:mouseleave="$el.style.opacity=copied?1:.75"
                x-on:click="navigator.clipboard.writeText($refs.cmd.textContent.trim()); copied=true; setTimeout(()=>copied=false,1500)">
          <template x-if="!copied">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-copy"></use></svg>
          </template>
          <template x-if="copied">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-check"></use></svg>
          </template>
        </button>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div style="text-align:center; color:var(--text-3); font-size:13px; padding:20px 0;">
      Keine Befehle ermittelbar.
    </div>
  {% endif %}
{% endblock %}