@component('admin/layouts/main')
  @slot('main')
    <h1 class="text-2xl font-bold mb-6">Sauvegarde et Restauration</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <!-- Export Section -->
      <div class="bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Exporter les données</h2>
        <p class="text-gray-600 mb-4">
          Téléchargez une sauvegarde complète de la base de données au format JSON. 
          <br>
          <span class="text-sm text-yellow-600">Note : Les fichiers médias (images, musiques) ne sont pas inclus dans ce fichier mais leurs références le sont.</span>
        </p>
        <a href="/admin/backup/export" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 inline-flex items-center">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          Télécharger la sauvegarde
        </a>
      </div>

      <!-- Import Section -->
      <div class="bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Importer une sauvegarde</h2>
        <p class="text-gray-600 mb-4">
          Restaurez la base de données à partir d'un fichier JSON.
          <br>
          <span class="text-sm text-red-600 font-bold">ATTENTION : Cette action supprimera toutes les données actuelles !</span>
        </p>
        
        <form action="/admin/backup/import" method="POST" enctype="multipart/form-data" onsubmit="return confirm('Êtes-vous sûr de vouloir écraser toutes les données actuelles ? Cette action est irréversible.');">
          {{{ csrfField() }}}
          <div class="mb-4">
            <input type="file" name="backup_file" accept=".json" required class="block w-full text-sm text-gray-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-blue-50 file:text-blue-700
              hover:file:bg-blue-100
            "/>
          </div>
          <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 inline-flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
            Importer et Restaurer
          </button>
        </form>
      </div>
    
    </div>
  @endslot
@end