{% extends "base.html" %}
{% block title %}Instances distantes{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-xl font-bold text-gray-900">Instances distantes</h1>
  <a href="{{ url_for('remote_instance_new') }}"
     class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
    + Ajouter une instance
  </a>
</div>

{% if not instances %}
  <div class="bg-white rounded-xl border border-gray-200 px-6 py-12 text-center text-gray-400">
    <p class="text-lg">Aucune instance distante configurée.</p>
    <p class="text-sm mt-2">Ajoutez une instance pour voir son état et déclencher des sauvegardes à distance.</p>
    <a href="{{ url_for('remote_instance_new') }}" class="mt-4 inline-block text-blue-600 hover:underline text-sm">
      Ajouter une première instance →
    </a>
  </div>
{% else %}
  <div class="space-y-4">
    {% for inst in instances %}
    {% set status_color = {
      'online':  'bg-green-100 text-green-700',
      'error':   'bg-red-100 text-red-700',
      'offline': 'bg-gray-100 text-gray-500',
    }.get(inst.status, 'bg-gray-100 text-gray-400') %}

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
      <div class="flex items-start justify-between gap-4">

        <div class="space-y-2 min-w-0 flex-1">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="font-semibold text-gray-900">{{ inst.name }}</span>
            <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ status_color }}">
              {{ inst.status or 'unknown' }}
            </span>
            {% if inst.last_seen %}
              <span class="text-xs text-gray-400">
                vu {{ inst.last_seen.strftime('%d/%m %H:%M') }}
              </span>
            {% endif %}
          </div>

          <p class="text-sm font-mono text-gray-500">{{ inst.url_display }}</p>

          {% if inst.remote_runs %}
          <div class="mt-3 border-t border-gray-100 pt-3">
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
              Jobs ({{ inst.remote_runs | length }})
            </p>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
              {% for rr in inst.remote_runs %}
              {% set run_color = {
                'success': 'text-green-600',
                'error':   'text-red-600',
                'running': 'text-blue-600',
              }.get(rr.last_status, 'text-gray-400') %}
              <div class="text-xs bg-gray-50 rounded-lg px-3 py-2 space-y-0.5">
                <p class="font-medium text-gray-800 truncate">{{ rr.job_name }}</p>
                <p class="text-gray-400">{{ rr.job_type }}</p>
                {% if rr.last_run_at %}
                  <p class="{{ run_color }} font-medium">
                    {{ rr.last_status }} — {{ rr.last_run_at.strftime('%d/%m %H:%M') }}
                  </p>
                {% else %}
                  <p class="text-gray-300">jamais exécuté</p>
                {% endif %}
                {% if rr.last_size_bytes %}
                  <p class="text-gray-400">{{ rr.last_size_human }}</p>
                {% endif %}
              </div>
              {% endfor %}
            </div>
          </div>
          {% endif %}
        </div>

        <div class="flex items-center gap-2 shrink-0 flex-wrap justify-end">
          <form method="post" action="{{ url_for('remote_instance_test', inst_id=inst.id) }}">
            <button type="submit"
              class="bg-gray-50 hover:bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded border border-gray-200 transition">
              Tester
            </button>
          </form>
          <form method="post" action="{{ url_for('remote_instance_sync', inst_id=inst.id) }}">
            <button type="submit"
              class="bg-gray-50 hover:bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded border border-gray-200 transition">
              Synchroniser
            </button>
          </form>
          <a href="{{ url_for('remote_instance_edit', inst_id=inst.id) }}"
             class="bg-gray-50 hover:bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded border border-gray-200 transition">
            Éditer
          </a>
          <form method="post" action="{{ url_for('remote_instance_delete', inst_id=inst.id) }}"
                onsubmit="return confirm('Supprimer l\'instance « {{ inst.name }} » ?')">
            <button type="submit"
              class="text-red-300 hover:text-red-600 text-xs px-2 py-1.5 rounded hover:bg-red-50 transition">
              ✕
            </button>
          </form>
        </div>

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