@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-semibold text-gray-800">Galería de Imágenes</h2>
        <a href="{{ route('images.create') }}" class="btn btn-primary">Subir nueva imagen</a>
    </div>

    @if (session('success'))
        <div class="mb-4 alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        @foreach ($images as $image)
        <div class="bg-white rounded shadow p-2">
            <img src="{{ asset('storage/' . $image->path) }}" alt="{{ $image->alt }}" class="w-full h-40 object-cover rounded">
            <div class="mt-2 text-sm font-medium text-gray-700 truncate">{{ $image->name }}</div>
            <div class="flex justify-between mt-2 text-xs text-gray-500">
                <a href="{{ route('images.edit', $image) }}" class="text-blue-600 hover:underline">Editar</a>
                <form action="{{ route('images.destroy', $image) }}" method="POST" onsubmit="return confirm('¿Eliminar esta imagen?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-red-600 hover:underline">Eliminar</button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $images->links() }}
    </div>
</div>
@endsection