{% extends "base.html" %}
{% block title %}Vue globale des archives{% endblock %}

{% block content %}
<div class="space-y-8">

  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">Vue globale des archives</h1>
      <p class="text-sm text-gray-500 mt-1">Toutes les destinations — local, SSH et instances fédérées</p>
    </div>
    <a href="{{ url_for('overview.overview') }}" class="btn-ghost btn-sm">
      ↻ Rafraîchir
    </a>
  </div>

  {% for loc in locations %}
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">

    {# En-tête de la section #}
    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200 flex items-center gap-3">
      {% if loc.type == "local" %}
        <span class="inline-flex items-center gap-1 bg-blue-100 text-blue-700 text-xs font-semibold px-2.5 py-1 rounded-full">
          Local
        </span>
      {% elif loc.type == "ssh" %}
        <span class="inline-flex items-center gap-1 bg-slate-100 text-slate-700 text-xs font-semibold px-2.5 py-1 rounded-full">
          SSH
        </span>
      {% else %}
        <span class="inline-flex items-center gap-1 bg-purple-100 text-purple-700 text-xs font-semibold px-2.5 py-1 rounded-full">
          Instance
        </span>
      {% endif %}
      <span class="font-semibold text-gray-800">{{ loc.label }}</span>
      {% if loc.type == "instance" and loc.instance_url is defined %}
        <span class="text-xs text-gray-400">{{ loc.instance_url }}</span>
      {% endif %}
    </div>

    {# Erreur de connexion #}
    {% if loc.error %}
    <div class="px-6 py-5 flex items-start gap-3 text-sm text-red-700 bg-red-50">
      <span class="text-base shrink-0">⚠</span>
      <span>{{ loc.error }}</span>
    </div>

    {% else %}

      {# Groupes par job #}
      {% set ns = namespace(has_content=false) %}
      {% for group in loc.groups %}
        {% if group.archives %}
          {% set ns.has_content = true %}
        {% endif %}
      {% endfor %}
      {% if loc.orphaned %}{% set ns.has_content = true %}{% endif %}

      {% if not ns.has_content %}
      <div class="px-6 py-8 text-center text-sm text-gray-400">
        Aucune archive sur cette destination.
      </div>
      {% else %}

      <div class="divide-y divide-gray-100">

        {% for group in loc.groups %}
        {% if group.archives %}
        <div class="px-6 py-4">

          {# En-tête du groupe #}
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-2">
              <span class="font-medium text-gray-800">{{ group.job.name }}</span>
              <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                {{ group.job.type }}
              </span>
              <span class="text-xs bg-green-50 text-green-700 border border-green-200 px-2 py-0.5 rounded-full">
                rétention : {{ group.retention_label }}
              </span>
            </div>
            <form method="post" action="{{ url_for('overview.overview_retention') }}"
                  onsubmit="return confirm('Appliquer la rétention pour « {{ group.job.name }} » sur cette destination ?')">
              <input type="hidden" name="job_id" value="{{ group.job.id }}">
              <input type="hidden" name="loc_type" value="{{ loc.type }}">
              {% if loc.type == "ssh" %}<input type="hidden" name="dest_id" value="{{ loc.dest_id }}">{% endif %}
              {% if loc.type == "instance" %}<input type="hidden" name="instance_id" value="{{ loc.instance_id }}">{% endif %}
              <button type="submit" class="btn-secondary btn-sm">
                ↺ Appliquer la rétention
              </button>
            </form>
          </div>

          {# Table des archives #}
          <div class="rounded-lg border border-gray-100 overflow-hidden">
            <table class="w-full text-sm">
              <thead class="bg-gray-50 text-xs text-gray-500 uppercase tracking-wide">
                <tr>
                  <th class="text-left px-4 py-2 font-medium">Archive</th>
                  <th class="text-right px-4 py-2 font-medium">Taille</th>
                  <th class="text-right px-4 py-2 font-medium">Date</th>
                  <th class="px-4 py-2"></th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-50">
                {% for arch in group.archives %}
                <tr class="hover:bg-gray-50 transition">
                  <td class="px-4 py-2.5 font-mono text-xs text-gray-700">{{ arch.name }}</td>
                  <td class="px-4 py-2.5 text-right text-gray-500 tabular-nums">{{ arch.size_human }}</td>
                  <td class="px-4 py-2.5 text-right text-gray-500 tabular-nums">{{ arch.date_str }}</td>
                  <td class="px-4 py-2.5 text-right">
                    <form method="post" action="{{ url_for('overview.overview_delete') }}"
                          onsubmit="return confirm('Supprimer « {{ arch.name }} » ?')">
                      <input type="hidden" name="name" value="{{ arch.name }}">
                      <input type="hidden" name="loc_type" value="{{ loc.type }}">
                      {% if loc.type == "ssh" %}<input type="hidden" name="dest_id" value="{{ loc.dest_id }}">{% endif %}
                      {% if loc.type == "instance" %}<input type="hidden" name="instance_id" value="{{ loc.instance_id }}">{% endif %}
                      <button type="submit" class="btn-danger btn-icon-sm">✕</button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

        </div>
        {% endif %}
        {% endfor %}

        {# Archives orphelines (ne correspondent à aucun job) #}
        {% if loc.orphaned %}
        <div class="px-6 py-4">
          <div class="flex items-center gap-2 mb-3">
            <span class="font-medium text-gray-500">Sans job associé</span>
            <span class="text-xs bg-yellow-50 text-yellow-700 border border-yellow-200 px-2 py-0.5 rounded-full">
              {{ loc.orphaned | length }} archive(s)
            </span>
          </div>
          <div class="rounded-lg border border-gray-100 overflow-hidden">
            <table class="w-full text-sm">
              <tbody class="divide-y divide-gray-50">
                {% for arch in loc.orphaned %}
                <tr class="hover:bg-gray-50 transition">
                  <td class="px-4 py-2.5 font-mono text-xs text-gray-700">{{ arch.name }}</td>
                  <td class="px-4 py-2.5 text-right text-gray-500 tabular-nums">{{ arch.size_human }}</td>
                  <td class="px-4 py-2.5 text-right text-gray-500 tabular-nums">{{ arch.date_str }}</td>
                  <td class="px-4 py-2.5 text-right">
                    <form method="post" action="{{ url_for('overview.overview_delete') }}"
                          onsubmit="return confirm('Supprimer « {{ arch.name }} » ?')">
                      <input type="hidden" name="name" value="{{ arch.name }}">
                      <input type="hidden" name="loc_type" value="{{ loc.type }}">
                      {% if loc.type == "ssh" %}<input type="hidden" name="dest_id" value="{{ loc.dest_id }}">{% endif %}
                      {% if loc.type == "instance" %}<input type="hidden" name="instance_id" value="{{ loc.instance_id }}">{% endif %}
                      <button type="submit" class="btn-danger btn-icon-sm">✕</button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% endif %}

      </div>
      {% endif %}
    {% endif %}

  </div>
  {% endfor %}

</div>
{% endblock %}