@php
    $photos = collect($pageData['photos'] ?? []);
@endphp

<div class="rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3 mb-4 text-sm text-indigo-900">
    <p class="font-medium">{{ __('devices.camera.title') }}</p>
    <p class="mt-1 text-xs text-indigo-800">{{ __('devices.camera.hint') }}</p>
</div>

@if($photos->isEmpty())
    <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
        <p class="text-sm text-gray-500">{{ __('devices.camera.empty') }}</p>
    </div>
@else
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($photos as $photo)
            <div class="rounded-lg border border-gray-200 overflow-hidden bg-gray-50">
                <a href="{{ route('downloads.preview', $photo) }}" target="_blank" class="block aspect-square bg-gray-900/5">
                    <img src="{{ route('downloads.preview', $photo) }}"
                         alt="{{ $photo->original_name }}"
                         class="w-full h-full object-cover"
                         loading="lazy">
                </a>
                <div class="px-2 py-2 text-xs text-gray-600 flex justify-between gap-2">
                    <span>{{ $photo->created_at->format('d/m H:i:s') }}</span>
                    <a href="{{ route('downloads.show', $photo) }}" class="text-indigo-600 hover:underline shrink-0">
                        {{ __('devices.camera.download') }}
                    </a>
                </div>
            </div>
        @endforeach
    </div>
@endif