@php
    $shot = $item['shot'];
    $detected = $item['detected'];
    $capturedAt = $shot->captured_at ?? $shot->created_at;
    $thumbScale = (float) config('systemlog.screenshot_thumb_scale', 0.25);
    $detectedSummary = collect($detected)->pluck('label')->filter()->implode(' · ');
    $tooltip = trim(($capturedAt?->format('d/m/Y H:i:s') ?? '').($shot->match_score !== null ? ' · '.number_format($shot->match_score, 2) : '').($detectedSummary ? ' · '.$detectedSummary : ''));
    $layout = $layout ?? 'strip';
@endphp

@if($layout === 'timeline')
    <li class="screenshot-capture-timeline-item screenshot-capture-card group"
        data-capture-id="{{ $shot->id }}">
        <div class="screenshot-capture-timeline-marker" aria-hidden="true"></div>
        <time class="screenshot-capture-timeline-time shrink-0" datetime="{{ $capturedAt?->toIso8601String() }}">
            {{ $capturedAt?->format('d/m/Y H:i:s') }}
        </time>
        <div class="screenshot-capture-timeline-body min-w-0 flex-1 flex items-start gap-3">
            <a href="{{ route('downloads.preview', $shot) }}" target="_blank"
               class="shrink-0 rounded-md overflow-hidden bg-slate-100 leading-[0] ring-1 ring-slate-200/80 hover:ring-indigo-200 transition-shadow screenshot-capture-link"
               title="{{ $tooltip }}">
                <img src="{{ route('downloads.preview', $shot) }}" alt=""
                     class="screenshot-capture-img block h-auto max-w-none"
                     data-scale="{{ $thumbScale }}"
                     loading="lazy" />
            </a>
            <div class="min-w-0 flex-1 pt-0.5">
                @if($detectedSummary)
                    <p class="text-[11px] text-slate-600 truncate" title="{{ $detectedSummary }}">{{ $detectedSummary }}</p>
                @endif
                @if($shot->match_score !== null)
                    <p class="text-[10px] text-indigo-600 font-medium mt-0.5">
                        {{ __('devices.screenshots.capture_match_score', ['value' => number_format($shot->match_score, 2)]) }}
                    </p>
                @endif
            </div>
            <div class="shrink-0 flex items-center gap-1.5 self-start">
                <label class="screenshot-capture-select hidden cursor-pointer">
                    <input type="checkbox"
                           class="screenshot-capture-checkbox rounded border-slate-300 text-indigo-600 shadow-sm w-4 h-4"
                           value="{{ $shot->id }}"
                           aria-label="{{ __('devices.screenshots.delete_capture') }}" />
                </label>
                <button type="button"
                        class="screenshot-capture-delete scr-icon-btn scr-icon-btn-danger opacity-100"
                        data-url="{{ route('devices.screenshots.captures.destroy', [$shot->device, $shot]) }}"
                        title="{{ __('devices.screenshots.delete_capture') }}"
                        aria-label="{{ __('devices.screenshots.delete_capture') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 0 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
    </li>
@else
    <div class="shrink-0 rounded-lg overflow-hidden bg-white flex flex-col relative screenshot-capture-card group shadow-sm ring-1 ring-slate-200/80 hover:ring-indigo-200 transition-shadow"
         data-capture-id="{{ $shot->id }}">
        <label class="screenshot-capture-select hidden absolute top-1.5 left-1.5 z-20 cursor-pointer">
            <input type="checkbox"
                   class="screenshot-capture-checkbox rounded border-slate-300 text-indigo-600 shadow-sm w-4 h-4"
                   value="{{ $shot->id }}"
                   aria-label="{{ __('devices.screenshots.delete_capture') }}" />
        </label>
        <button type="button"
                class="screenshot-capture-delete absolute top-1.5 right-1.5 z-20 scr-icon-btn scr-icon-btn-danger"
                data-url="{{ route('devices.screenshots.captures.destroy', [$shot->device, $shot]) }}"
                title="{{ __('devices.screenshots.delete_capture') }}"
                aria-label="{{ __('devices.screenshots.delete_capture') }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 0 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
            </svg>
        </button>
        <a href="{{ route('downloads.preview', $shot) }}" target="_blank"
           class="block bg-slate-100 leading-[0] screenshot-capture-link"
           title="{{ $tooltip }}">
            <img src="{{ route('downloads.preview', $shot) }}" alt=""
                 class="screenshot-capture-img block h-auto max-w-none"
                 data-scale="{{ $thumbScale }}"
                 loading="lazy" />
        </a>
        <div class="px-2 py-1 text-[10px] text-slate-500 text-center border-t border-slate-100">
            {{ $capturedAt?->format('H:i:s') }}
            @if($shot->match_score !== null)
                <span class="text-indigo-500 font-medium">{{ number_format($shot->match_score, 2) }}</span>
            @endif
        </div>
    </div>
@endif