@component('admin/layouts/main')
  @slot('main')
    <div class="p-6">
      <h1 class="text-2xl font-bold mb-6">Gestionnaire d'Images</h1>

      <!-- Upload Form -->
      <div class="bg-white p-6 rounded-lg shadow-md mb-8">
        <h2 class="text-lg font-semibold mb-4">Téléverser une nouvelle image</h2>
        <form action="/admin/images" method="POST" enctype="multipart/form-data" class="flex items-end gap-4">
          {{ csrfField() }}
          <div class="flex-1">
            <label for="image" class="block text-sm font-medium text-gray-700 mb-1">Fichier Image</label>
            <input 
              type="file" 
              name="image" 
              id="image" 
              accept="image/*"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500"
            >
          </div>
          <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Téléverser
          </button>
        </form>
        @if(flashMessages.has('error'))
          <div class="mt-4 p-3 bg-red-100 text-red-700 rounded">
            {{ flashMessages.get('error') }}
          </div>
        @endif
        @if(flashMessages.has('success'))
          <div class="mt-4 p-3 bg-green-100 text-green-700 rounded">
            {{ flashMessages.get('success') }}
          </div>
        @endif
      </div>

      <!-- Image Grid -->
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
        @each(image in images)
          <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 group relative">
            <div class="aspect-square bg-gray-100 relative">
              <img 
                src="{{ image.filePath }}" 
                alt="{{ image.originalName }}" 
                class="w-full h-full object-cover"
              >
              <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                <button 
                  onclick="navigator.clipboard.writeText('{{ image.filePath }}')"
                  class="bg-white text-gray-800 text-xs px-2 py-1 rounded hover:bg-gray-100"
                  title="Copier le lien"
                >
                  Copier Lien
                </button>
                <form action="/admin/images/{{ image.id }}?_method=DELETE" method="POST" onsubmit="return confirm('Supprimer cette image ?')">
                  {{ csrfField() }}
                  <button type="submit" class="bg-red-500 text-white text-xs px-2 py-1 rounded hover:bg-red-600">
                    Supprimer
                  </button>
                </form>
              </div>
            </div>
            <div class="p-3 text-xs text-gray-500 truncate" title="{{ image.originalName }}">
              {{ image.originalName }}
            </div>
          </div>
        @else
          <div class="col-span-full text-center text-gray-500 py-12">
            Aucune image trouvée.
          </div>
        @endeach
      </div>
    </div>
  @endslot
@end