<photo-container :photo='@json($photo)' 
    :max-size="{{ $max_size ?? 1152 }}" 
    layout="{{ isset($layout) ? $layout : '' }}" 
    #default="{ photo, loadingComplete }"
    :hide-loader="{{ $sort_order === 1 ? 'true' : 'false' }}"
    :no-transition="{{ $sort_order === 1 ? 'true' : 'false' }}"
>

    @if ($photo->number) 
        <div class="content-number">{{ $photo->number }}</div>
    @endif

    <picture class="photo transition-transform duration-300 print:opacity-100
                 {{ $photo->fill ? 'fill' : 'fit' }}
                 {{ $photo->link ? 'cp md:hover:scale-105' : '' }}
                 {{ $photo->enlarge && !$photo->link ? 'md:cursor-zoom-in' : '' }}
                 {{ $photo->border ? 'p-2' : '' }}
        " 
    >

        @if ($max_size > 768 && $photo->large && $photo->retina && false)
            <source media="(min-width: 768px)" srcset="{{ $photo->large }}.webp 1x, {{ $photo->retina }}.webp 2x" type="image/webp" v-if="retina">
        @endif

        @if ($max_size > 768 && $photo->large)
            <source media="(min-width: 768px)" srcset="{{ $photo->large }}.webp" type="image/webp">
        @endif

        @if ($max_size > 768 && $photo->large)
            <source media="(min-width: 768px)" srcset="{{ $photo->large }} 1152w" type="image/jpg">
        @endif


        @if ($max_size > 576 && $photo->medium && $photo->large && false)
            <source media="(min-width: 576px)" srcset="{{ $photo->medium }}.webp 1x, {{ $photo->large }}.webp 1.5x" type="image/webp" v-if="retina">
        @endif

        @if ($max_size > 576 && $photo->medium)
            <source media="(min-width: 576px)" srcset="{{ $photo->medium }}.webp" type="image/webp">
        @endif

        @if ($max_size > 576 && $photo->medium)
            <source media="(min-width: 576px)" srcset="{{ $photo->medium }} 768w" type="image/jpg">
        @endif

        @if ($photo->small && $photo->large && false)
            <source srcset="{{ $photo->small }}.webp 1x, {{ $photo->large }}.webp 2x" type="image/webp" v-if="retina">
        @endif

        @if ($photo->small && $photo->medium && false)
            <source srcset="{{ $photo->small }}.webp 1x, {{ $photo->medium }}.webp 1.3x" type="image/webp" v-if="retina">
        @endif

        @if ($photo->small)
            <source srcset=" {{ $photo->small }}.webp" type="image/webp">
        @endif

        @if ($photo->small)
            <source srcset="{{ $photo->small }} 576w" type="image/jpg">
        @endif

        <img 
            src="{{ $photo->small }}"
            type="{{ $photo->file_upload ? 'image/'.$photo->file_upload->extension : null }}"
            alt="{{ $photo->alt }}"
            @load="loadingComplete"
            width="{{ $max_size }}"
            height="{{ $photo->width > 0 ? (($max_size * $photo->height) / $photo->width) : '' }}"
            class="{{ $photo->offset_class }} {{ $photo->border ? 'border-[16px] border-white shadow-md rounded' : '' }}"
            fetchpriority="{{ $sort_order === 1 ? 'high' : 'auto' }}"
        >
    </picture>

</photo-container>
