{#
  borg/templates/partials/archives_list.html
  Archivlisten-Content – wird in #borg-archive-content eingebettet.
  Sowohl beim initialen Öffnen (via {% include %} in archives_modal.html)
  als auch beim Zurück-Navigieren (GET /archives/list → hx-swap innerHTML).

  Variablen:
    item_id  – Job-ID
    archives – list[dict] aus borg list --json (neueste zuerst)
    error    – str | None
#}
{% if error %}
<div style="padding:14px 18px; background:rgba(239,68,68,.1);
            border:1px solid rgba(239,68,68,.3); border-radius:var(--rad-lg);
            color:#f87171; font-size:13px;">
  {{ error }}
</div>

{% elif not archives %}
<div style="text-align:center; color:var(--text-3); font-size:13px; padding:28px 0;">
  Keine Archive gefunden.
</div>

{% else %}
<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);">
    <span style="font-size:11px; font-weight:600; color:var(--text-3);
                 text-transform:uppercase; letter-spacing:.06em;">
      {{ archives|length }} Archive
    </span>
  </div>
  <div style="max-height:500px; overflow-y:auto;">
    {% for a in archives %}
    <button
      style="display:flex; align-items:center; justify-content:space-between; width:100%;
             padding:10px 14px; border:none; border-bottom:1px solid var(--border-s);
             background:transparent; cursor:pointer; text-align:left; color:var(--text);
             transition:background 100ms;"
      onmouseover="this.style.background='rgba(128,128,128,0.07)'"
      onmouseout="this.style.background='transparent'"
      hx-get="/api/borg/{{ item_id }}/archives/{{ a.name }}/browse"
      hx-target="#borg-archive-content"
      hx-swap="innerHTML"
      hx-indicator="#borg-archive-loading">
      <div style="display:flex; align-items:center; gap:10px; min-width:0;">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="1.8" style="color:var(--b); flex-shrink:0; opacity:.8;">
          <path d="M21 8v13H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/>
          <line x1="10" y1="12" x2="14" y2="12"/>
        </svg>
        <span style="font-family:var(--mono); font-size:12.5px;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ a.name }}</span>
      </div>
      <span style="font-size:11px; color:var(--text-3); flex-shrink:0; margin-left:16px;">
        {{ a.time[:16].replace('T',' ') if a.time else '' }}
      </span>
    </button>
    {% endfor %}
  </div>
</div>
{% endif %}

{% if not include_mode %}
<span id="borg-archive-stand" hx-swap-oob="true"
      style="font-size:10px; color:var(--text-3);">
  {% if cached_at %}Stand: {{ cached_at[:16] }}{% endif %}
</span>
{% endif %}

<div id="borg-archive-loading" class="htmx-indicator"
     style="text-align:center; padding:16px 0; color:var(--text-3); font-size:13px;">
  Lade Archiv-Inhalt …
</div>