{# system/partials/update_log.html – Wird in update_modal eingebettet und per HTMX gepollt #}
<div id="update-log"
     {% if status == 'running' %}
     data-running="1"
     hx-get="/ui/system/update-log"
     hx-trigger="every 2s"
     hx-swap="outerHTML"
     {% endif %}>

  {# Status-Zeile #}
  <div style="display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:13px;">
    {% if status == 'running' %}
    <span style="color:var(--b);">Update läuft…</span>
    {% elif status == 'done' %}
    <span style="color:var(--g); font-weight:600;">✓ Update abgeschlossen · Neustart in Kürze</span>
    {% elif status == 'error' %}
    <span style="color:var(--err);">✗ {{ error }}</span>
    {% elif status == 'checking' %}
    <span style="color:var(--text-3);">Prüfe auf Updates…</span>
    {% else %}
    <span style="color:var(--text-3);">Warte auf Start…</span>
    {% endif %}
  </div>

  {# pip-Ausgabe #}
  <div class="ds-card on" style="overflow:hidden;" data-debug-label="ds-card">
    <div style="padding:8px 14px; border-bottom:1px solid var(--border-s);
                font-size:11px; text-transform:uppercase; letter-spacing:0.07em;
                color:var(--text-3); font-weight:600;">
      pip-Ausgabe
    </div>
    <pre id="update-log-output"
         style="margin:0; padding:12px 14px; font-family:var(--mono); font-size:11.5px;
                color:var(--text-2); overflow-x:auto; white-space:pre-wrap;
                max-height:380px; overflow-y:auto;">{% for line in output %}{{ line }}
{% endfor %}{% if not output %}<span style="color:var(--text-3);">Warte auf Ausgabe…</span>{% endif %}</pre>
  </div>

</div>

<style>
@keyframes system-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
</style>
<script>
(function() {
  var pre = document.getElementById('update-log-output');
  if (pre) pre.scrollTop = pre.scrollHeight;
})();
</script>