{% extends "base.html" %}
{% block title %}Verlauf — Dockhand Backup{% endblock %}

{% block content %}
<h1 class="text-xl font-semibold text-white mb-5">Backup-Verlauf</h1>

<div class="overflow-x-auto rounded-lg border border-slate-800">
  <table class="min-w-full text-sm">
    <thead class="bg-slate-900/60 text-slate-400">
      <tr>
        <th class="text-left px-4 py-2 font-medium">Zeit</th>
        <th class="text-left px-4 py-2 font-medium">Stack</th>
        <th class="text-left px-4 py-2 font-medium">Status</th>
        <th class="text-left px-4 py-2 font-medium">Datei</th>
        <th class="text-right px-4 py-2 font-medium">Größe</th>
        <th class="text-left px-4 py-2 font-medium">Hinweise</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-800">
      {% for h in history %}
      <tr class="hover:bg-slate-900/40">
        <td class="px-4 py-2 whitespace-nowrap text-slate-300">{{ h.ts|short_ts }}</td>
        <td class="px-4 py-2 text-slate-200">{{ h.stack }}</td>
        <td class="px-4 py-2">
          <span class="rounded-full px-2 py-0.5 text-xs font-medium
            {{ 'bg-emerald-500/20 text-emerald-300' if h.status in ('ok','simulated')
               else 'bg-amber-500/20 text-amber-300' if h.status=='partial'
               else 'bg-rose-500/20 text-rose-300' }}">{{ h.status }}</span>
        </td>
        <td class="px-4 py-2 font-mono text-slate-400 truncate max-w-xs">{{ h.file }}</td>
        <td class="px-4 py-2 text-right text-slate-300">{{ h.size|human_size }}</td>
        <td class="px-4 py-2 text-slate-400">
          {% if h.error %}<span class="text-rose-400">{{ h.error }}</span>{% endif %}
          {% if h.warnings %}<span class="text-amber-400">{{ h.warnings|join('; ') }}</span>{% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="px-4 py-6 text-center text-slate-500">Noch keine Läufe.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}