@if ($recipe->media->isNotEmpty())
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6 mb-6">
        <x-input-label :value="__('Current images')" />
        <div class="mt-1 flex flex-wrap gap-3">
            @foreach ($recipe->media as $media)
                <div class="relative">
                    <img src="{{ $media->url() }}" alt="{{ $media->original_name }}" class="h-24 w-24 object-cover rounded-md border">
                    <form action="{{ route('media.destroy', $media) }}" method="POST" onsubmit="return confirm('{{ __('Remove this image?') }}');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-6 h-6 text-xs leading-none">&times;</button>
                    </form>
                </div>
            @endforeach
        </div>
    </div>
@endif