@props([
    'path',
    'alt',
    // No image on the site spans the full viewport: every one of them sits inside
    // `container-amare`, which reserves 1.5rem of padding on each side. Claiming
    // 100vw made a 412 px viewport at DPR 1.75 ask for 721 px and jump to the
    // 960 variant for a box it draws at 637 px.
    'sizes' => '(max-width: 768px) calc(100vw - 3rem), 960px',
    'loading' => 'lazy',
    'fetchpriority' => null,
    'width' => null,
    'height' => null,
    'disk' => null,
    'class' => null,
])

@php
    use App\Support\PublicImageUploadRules;
    use App\Support\ResponsiveImage;
    use Illuminate\Support\Facades\Storage;

    $diskName = $disk ?? PublicImageUploadRules::disk();
    $filesystem = Storage::disk($diskName);
    $src = $filesystem->url($path);

    $toSrcset = fn (array $variants): string => collect($variants)
        ->map(fn (array $variant): string => $filesystem->url($variant['path']).' '.$variant['width'].'w')
        ->implode(', ');

    $variants = ResponsiveImage::availableVariants($path, $diskName);
    $srcset = $toSrcset($variants);

    if ($srcset === '' && $filesystem->exists($path)) {
        $srcset = null;
    }

    // Offered ahead of the original format because webp carries the same picture
    // for roughly a third of the bytes, and the MAN-109 audit found the hero
    // image to be the LCP element on every page at mobile widths. Media uploaded
    // before `media:generate-variants` learned to emit webp has no siblings, so
    // the <source> is skipped rather than pointed at nothing.
    $webpSrcset = $toSrcset(ResponsiveImage::availableWebpVariants($path, $diskName));

    $dimensions = ($width === null || $height === null)
        ? ResponsiveImage::dimensions($path, $diskName)
        : null;

    $resolvedWidth = $width ?? $dimensions['width'] ?? null;
    $resolvedHeight = $height ?? $dimensions['height'] ?? null;
    $loadingValue = $loading;
@endphp

{{-- `display: contents` keeps <picture> out of the layout: the callers style the
     <img> with classes like `h-full w-full object-cover` that resolve against the
     grid or flex parent, and an inline wrapper would break that. --}}
@if ($webpSrcset !== '')
<picture class="contents">
    <source type="image/webp" srcset="{{ $webpSrcset }}" sizes="{{ $sizes }}">
@endif
<img
    src="{{ $src }}"
    @if ($srcset) srcset="{{ $srcset }}" sizes="{{ $sizes }}" @endif
    alt="{{ $alt }}"
    @if ($resolvedWidth) width="{{ $resolvedWidth }}" @endif
    @if ($resolvedHeight) height="{{ $resolvedHeight }}" @endif
    loading="{{ $loadingValue }}"
    @if ($fetchpriority) fetchpriority="{{ $fetchpriority }}" @endif
    @if ($class) class="{{ $class }}" @endif
    {{ $attributes->except(['path', 'alt', 'sizes', 'loading', 'width', 'height', 'disk', 'class']) }}
>
@if ($webpSrcset !== '')
</picture>
@endif