{% extends "base.html" %}
{% block title %}{{ 'Éditer' if inst else 'Nouvelle instance' }}{% endblock %}

{% block content %}
<div class="max-w-lg">
  <h1 class="text-xl font-bold text-gray-900 mb-6">
    {{ 'Éditer « ' + inst.name + ' »' if inst else 'Nouvelle instance distante' }}
  </h1>

  <form method="post"
        action="{{ url_for('remote_instance_edit', inst_id=inst.id) if inst else url_for('remote_instance_new') }}"
        class="space-y-6">

    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
        <input type="text" name="name" required
               value="{{ inst.name if inst else '' }}"
               placeholder="ex: jerry, tom, serveur-2"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        <p class="text-xs text-gray-400 mt-1">Identifiant court pour affichage.</p>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">URL de l'instance</label>
        <input type="url" name="url" required
               value="{{ inst.url if inst else '' }}"
               placeholder="https://mon-serveur.domaine.fr/backupmanager"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        <p class="text-xs text-gray-400 mt-1">
          URL complète avec le sous-chemin si applicable.
          L'API sera contactée sur <code class="bg-gray-100 px-1 rounded">/api/v1/</code>.
        </p>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Token API</label>
        <input type="text" name="api_key" required
               value="{{ inst.api_key if inst else '' }}"
               placeholder="ex: a3f8c2d1..."
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        <p class="text-xs text-gray-400 mt-1">
          Valeur du header <code class="bg-gray-100 px-1 rounded">X-BackupManager-Key</code>
          configurée sur l'instance distante (visible dans sa config YunoHost).
        </p>
      </div>

    </div>

    <div class="flex gap-3">
      <button type="submit"
              class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium text-sm transition">
        {{ 'Enregistrer' if inst else 'Ajouter l\'instance' }}
      </button>
      <a href="{{ url_for('remote_instances_list') }}"
         class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 px-5 py-2 rounded-lg font-medium text-sm transition">
        Annuler
      </a>
    </div>

  </form>
</div>
{% endblock %}