@props(['vehicle'])
<section class="panel" id="vehicle-gallery">
    <div class="panel-heading flex-wrap gap-4"><div><h2 class="panel-title">Photos & documents</h2><p class="muted mt-1">{{ $vehicle->media->where('kind', 'photo')->count() }} photos · {{ $vehicle->media->where('kind', 'document')->count() }} documents</p></div><label class="text-xs flex items-center gap-2">Image quality<select data-photo-quality class="input !w-auto !py-1.5 !text-xs" aria-label="Gallery image quality"><option value="auto">Auto · best for this connection</option><option value="save">Data saver</option></select></label></div>
    <div class="p-6">
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @forelse($vehicle->media->sortBy('position') as $media)
                <article class="border border-slate-200 rounded-lg overflow-hidden">
                    @if($media->kind === 'photo')
                        <a href="{{ $media->imageUrl(1600) }}" target="_blank" rel="noopener" class="block aspect-[4/3] bg-slate-50"><x-vehicle-photo :media="$media" class="w-full h-full" /></a>
                    @else
                        <a class="aspect-[4/3] flex flex-col gap-3 items-center justify-center bg-slate-50 text-forest" href="{{ route('stock.media.file', $media) }}"><x-icon name="file" class="size-9" /><span class="text-xs">Download document</span></a>
                    @endif
                    <div class="p-3"><p class="text-xs font-semibold break-words">{{ $media->alt_text ?: $media->name }}</p><p class="muted mt-1">{{ $media->listing_photo ? 'Selected listing photo' : 'Private file' }}@if($media->variants) · Optimised WebP @endif</p>
                        @can('update', $vehicle)
                            @if($media->kind === 'photo')<form action="{{ route('stock.media.update', $media) }}" method="POST" class="flex flex-wrap gap-2 mt-3 items-center">@csrf @method('PATCH')<input name="workspace_id" type="hidden" value="{{ session('dealer_id') }}"><input type="hidden" name="listing_photo" value="0"><label class="text-[10px] flex gap-1 items-center"><input name="listing_photo" type="checkbox" value="1" @checked($media->listing_photo)>For listing</label><input name="position" type="number" min="0" max="1000" value="{{ $media->position }}" class="input !w-16 !px-2 !py-1 !text-xs" aria-label="Photo order for {{ $media->name }}"><button class="text-xs font-semibold text-forest">Save order & visibility</button></form>@endif
                            <div class="flex items-center justify-between mt-3 gap-3">@if($media->kind === 'photo' && $media->original_path)<a href="{{ route('stock.media.file', ['media' => $media->id, 'variant' => 'original']) }}" target="_blank" rel="noopener" class="text-[10px] text-slate-500">View original</a>@endif<form action="{{ route('stock.media.destroy', $media) }}" method="POST">@csrf @method('DELETE')<input name="workspace_id" type="hidden" value="{{ session('dealer_id') }}"><button class="text-[10px] text-red-700">Remove file</button></form></div>
                        @endcan
                    </div>
                </article>
            @empty
                <div class="sm:col-span-2 lg:col-span-3 py-8 text-center"><x-icon name="car" class="size-8 text-slate-300 mx-auto mb-3" /><p class="text-sm font-medium">Show the vehicle at its best.</p><p class="muted mt-2">Add exterior, interior and detail photos. Documents remain separate and private.</p></div>
            @endforelse
        </div>
        @can('update', $vehicle)
            <div class="border-t border-slate-100 mt-6 pt-6"><div class="mb-4"><h3 class="text-sm font-semibold">Add photos or documents</h3><p class="muted mt-1">Photos get a consistent 4:3 frame and four optimised sizes. Your original is kept privately.</p></div>
                <x-media-upload-form :action="route('stock.media.store', $vehicle)" />
            </div>
        @endcan
    </div>
</section>