{#
  core/ui/templates/partials/log_modal.html
  Log-Modal mit Live-Streaming (SSE) und statischem Datum-Wähler.

  Standard-URL-Konventionen:
    Statisch:  GET /api/{module}/{item_id}/logs
    Nach Datum: GET /api/{module}/{item_id}/logs/{date}
    SSE-Stream: GET /api/{module}/{item_id}/logs/stream

  Variablen:
    module      – Modulname
    item_id     – Item-ID
    description – Anzeigename (für Titel)
    live        – bool: SSE-Live-Modus
    lines       – list[str]: Log-Zeilen (statischer Modus)
    dates       – list[str]: verfügbare Datum-Dateien
    selected    – str: aktuell gewähltes Datum
#}
{% extends "dialog_core.html" %}
{% from "partials/components/ui_macros.html" import form_select %}

{% block dialog_id %}log-modal{% endblock %}
{% block dialog_width %}1000{% endblock %}
{% block dialog_title %}Log – {{ description }}{% endblock %}

{% block dialog_header_extra %}
{% if dates %}
  {% call form_select('', attrs='style="width:auto;min-width:180px;" id="log-date-select"') %}
    {% for run in dates %}
      {% set val = run.id if run is mapping else run %}
      {% set lbl = run.label if run is mapping else run %}
      <option value="{{ val }}" {{ 'selected' if val == selected else '' }}>
        {{ lbl }}{% if loop.first %} (aktuell){% endif %}
      </option>
    {% endfor %}
  {% endcall %}
{% endif %}
{% endblock %}

{% block dialog_body %}
  {% if live %}
  <!-- ── LIVE-MODUS ─────────────────────────────────────── -->
  <div class="inline-cluster" style="margin-bottom:10px;">
    <span id="log-live-badge" class="badge-pill badge-live">
      <span style="animation:pulse 1.2s infinite;">●</span> Live
    </span>
    <span style="font-size:12px; color:var(--text-3);">Wird aktualisiert…</span>
  </div>

  <div style="position:relative;" x-data="{copied:false}">
    <button type="button"
            style="position:absolute;top:8px;right:8px;z-index:1;background:none;border:none;
                   cursor:pointer;padding:4px;border-radius:4px;opacity:.6;color:var(--text-2);
                   transition:opacity .15s;"
            title="Kopieren"
            x-on:mouseenter="$el.style.opacity=1"
            x-on:mouseleave="$el.style.opacity=copied?1:.6"
            x-on:click="navigator.clipboard.writeText(document.getElementById('log-content').innerText.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 id="log-content" class="surface-code log-panel">
      {% include "partials/dialogs/log_content.html" %}
    </div>
  </div>

  {% else %}
  <!-- ── STATISCHER MODUS ───────────────────────────────── -->
  <div style="position:relative;" x-data="{copied:false}">
    <button type="button"
            style="position:absolute;top:8px;right:8px;z-index:1;background:none;border:none;
                   cursor:pointer;padding:4px;border-radius:4px;opacity:.6;color:var(--text-2);
                   transition:opacity .15s;"
            title="Kopieren"
            x-on:mouseenter="$el.style.opacity=1"
            x-on:mouseleave="$el.style.opacity=copied?1:.6"
            x-on:click="navigator.clipboard.writeText(document.getElementById('log-content').innerText.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 id="log-content" class="surface-code log-panel">
      {% include "partials/dialogs/log_content.html" %}
    </div>
  </div>

  {% if not dates and not lines %}
    <div class="text-center" style="color:var(--text-3); font-size:13px; padding:20px 0;">
      Noch keine Logs vorhanden – erscheinen nach dem ersten Ausführen.
    </div>
  {% endif %}
  {% endif %}
{% endblock %}

{% block dialog_scripts %}
{% if live %}
<script>
(function() {
  const container = document.getElementById('log-content');
  const badge     = document.getElementById('log-live-badge');
  const es        = new EventSource('/api/{{ module }}/{{ item_id }}/logs/stream');
  let autoScroll  = true;

  container.addEventListener('scroll', function() {
    autoScroll = (container.scrollHeight - container.scrollTop - container.clientHeight) < 40;
  });

  es.onmessage = function(e) {
    container.insertAdjacentHTML('beforeend', e.data);
    if (autoScroll) container.scrollTop = container.scrollHeight;
  };

  es.addEventListener('done', function() {
    es.close();
    badge.innerHTML = '<span style="color:#4ade80">✔</span> Abgeschlossen';
    badge.style.background = 'rgba(74,222,128,0.12)';
    badge.style.color = '#4ade80';
    document.getElementById('log-modal').dispatchEvent(new Event('runDone'));
  });

  es.onerror = function() {
    es.close();
    badge.innerHTML = '— Verbindung getrennt';
    badge.style.color = 'var(--text-3)';
  };

  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      m.removedNodes.forEach(function(n) {
        if (n.id === 'log-modal') { es.close(); observer.disconnect(); }
      });
    });
  });
  observer.observe(document.body, { childList: true });
})();
</script>
{% elif dates %}
<script>
(function() {
  document.getElementById('log-date-select').addEventListener('change', function() {
    htmx.ajax('GET',
      '/api/{{ module }}/{{ item_id }}/logs/' + this.value,
      { target: '#log-content', swap: 'innerHTML' }
    );
  });
})();
</script>
{% endif %}
{% endblock %}