@php
    $class = $class ?? '';
    $file = $file ?? null;

    if (! $file && ! empty($name)) {
        $candidates = [$name.'.png'];
        foreach (glob(public_path('screenshots/*_'.$name.'.png')) ?: [] as $match) {
            $candidates[] = basename($match);
        }
        foreach (glob(public_path('screenshots/*_'.$name.'_*.png')) ?: [] as $match) {
            $candidates[] = basename($match);
        }
        foreach ($candidates as $candidate) {
            if (file_exists(public_path('screenshots/'.$candidate))) {
                $file = $candidate;
                break;
            }
        }
    }

    $hasImg = $file && file_exists(public_path('screenshots/'.$file));
@endphp
<span class="device android {{ $class }}">
    <span class="device-frame">
        <span class="device-screen">
            <span class="device-camera" aria-hidden="true"></span>
            @if ($hasImg)
                <img src="{{ asset('screenshots/'.$file) }}" alt="{{ $alt }}" loading="lazy" width="640" height="1387">
            @else
                <div class="screen-placeholder" aria-label="{{ $alt }}">
                    <div class="sp-bar" style="width:55%"></div>
                    <div class="sp-bar" style="width:35%"></div>
                    <div class="sp-card">{{ $title ?? $alt }}</div>
                    <div class="sp-bar" style="width:75%"></div>
                    <div class="sp-bar" style="width:45%"></div>
                </div>
            @endif
        </span>
    </span>
</span>