@extends('layouts.app')

@section('content')
<div class="max-w-xl mx-auto py-10 sm:px-6 lg:px-8">
    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Editar imagen</h2>

    <form action="{{ route('images.update', $image) }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded shadow">
        @csrf @method('PUT')

        <div class="mb-4">
            <label class="block font-medium text-sm text-gray-700">Nombre</label>
            <input type="text" name="name" class="input w-full" value="{{ old('name', $image->name) }}" required>
        </div>

        <div class="mb-4">
            <label class="block font-medium text-sm text-gray-700">Texto alternativo (alt)</label>
            <input type="text" name="alt" class="input w-full" value="{{ old('alt', $image->alt) }}">
        </div>

        <div class="mb-4">
            <label class="block font-medium text-sm text-gray-700">Imagen actual</label>
            <img src="{{ asset('storage/' . $image->path) }}" alt="{{ $image->alt }}" class="w-full h-40 object-cover rounded mb-2">
            <input type="file" name="image" accept="image/*" class="input w-full">
        </div>

        <div class="flex justify-end">
            <a href="{{ route('images.index') }}" class="btn btn-secondary mr-2">Cancelar</a>
            <button type="submit" class="btn btn-primary">Actualizar</button>
        </div>
    </form>
</div>
@endsection