Files
2026-02-25 00:34:39 +01:00

77 lines
3.1 KiB
Plaintext

@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