{#
  folders/dialogs/history/modal.html
  Datei-genauer Sync-Verlauf für einen Ordner (T-338-SYNC).

  Variablen: item_id, description, entries (list[{path, action, action_label,
             device_label, synced_at}]), truncated
#}
{% extends "dialog_core.html" %}

{% block dialog_id %}folder-history-modal{% endblock %}
{% block dialog_width %}760{% endblock %}
{% block dialog_padding %}28px 32px{% endblock %}
{% block dialog_title %}Verlauf – {{ description }}{% endblock %}

{% block dialog_body %}
  {% if not entries %}
  <div style="padding:24px; text-align:center; color:var(--text-3); font-size:13px;">
    Noch keine Synchronisation aufgezeichnet.
  </div>
  {% else %}
  <div class="content-item on" style="overflow:hidden;">
    <div style="display:grid; grid-template-columns:140px 1fr 130px 120px;
                padding:6px 14px; border-bottom:1px solid var(--border-s);
                font-size:11px; font-weight:600; color:var(--text-3);
                text-transform:uppercase; letter-spacing:.06em;">
      <span>Zeit</span>
      <span>Datei</span>
      <span>Aktion</span>
      <span>Gerät</span>
    </div>
    <div style="max-height:420px; overflow-y:auto;">
      {% for e in entries %}
      <div style="display:grid; grid-template-columns:140px 1fr 130px 120px; align-items:center;
                  padding:8px 14px; border-bottom:1px solid var(--border-s); font-size:12px;">
        <span style="color:var(--text-3); font-family:var(--mono);">{{ e.synced_at }}</span>
        <span style="font-family:var(--mono); overflow:hidden; text-overflow:ellipsis;
                     white-space:nowrap; padding-right:8px;" title="{{ e.path }}">{{ e.path }}</span>
        <span>{{ e.action_label }}</span>
        <span style="color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ e.device_label }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% if truncated %}
  <div style="padding:8px 4px 0; text-align:center; color:var(--text-3); font-size:11px;">
    Zeigt die letzten {{ entries | length }} Einträge.
  </div>
  {% endif %}
  {% endif %}
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer">
  <span></span>
  <button type="button" class="btn btn-ghost btn-sm" onclick="closeModal(this)">Schließen</button>
</div>
{% endblock %}