{% from "partials/components/ui_macros.html" import modal_wrapper, modal_title %}
{#
  borg/templates/modals/stats.html
  Repository-Statistiken für einen Borg-Job.

  Variablen:
    item_id     – Job-ID
    description – Anzeigename des Jobs
    repo_path   – Borg-Repo-Pfad (Anzeige im Untertitel)
    stats       – dict mit aufbereiteten Werten | None
    cached_at   – Timestamp des letzten Cache-Updates | None
    error       – Fehlermeldung als str | None
#}
{% call modal_wrapper(id="borg-stats-modal", max_width="680px") %}

  {{ modal_title(title="Statistiken – " ~ description) }}

  <div style="font-size:11px; color:var(--text-3); font-family:var(--mono);
              word-break:break-all; margin-bottom:18px;">{{ repo_path }}</div>

  <div id="borg-stats-content">
    {% set include_mode = True %}
    {% include "borg/partials/stats_content.html" %}
  </div>

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

  <div class="ds-modal-footer">
    <div style="display:flex; align-items:center; gap:10px;">
      <button class="btn btn-ghost btn-sm"
              hx-post="/api/borg/{{ item_id }}/stats/refresh"
              hx-target="#borg-stats-content"
              hx-swap="innerHTML"
              hx-indicator="#borg-stats-loading"
              title="Statistiken live vom Server abrufen">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
          <polyline points="23 4 23 10 17 10"/>
          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
        </svg>
        Aktualisieren
      </button>
      <span id="borg-stats-stand" style="font-size:10px; color:var(--text-3);">
        {% if cached_at %}Stand: {{ cached_at[:16] }}{% endif %}
      </span>
    </div>
    <button type="button" class="btn btn-ghost btn-sm"
            x-on:click="$el.closest('.ds-modal-backdrop').remove()">
      Schließen
    </button>
  </div>

{% endcall %}