<photo-container :photo='<?php echo json_encode($photo, 15, 512) ?>' 
    :max-size="<?php echo e($max_size ?? 1152); ?>" 
    layout="<?php echo e(isset($layout) ? $layout : ''); ?>" 
    #default="{ photo, loadingComplete }"
    :hide-loader="<?php echo e($sort_order === 1 ? 'true' : 'false'); ?>"
    :no-transition="<?php echo e($sort_order === 1 ? 'true' : 'false'); ?>"
>

    <?php if($photo->number): ?> 
        <div class="content-number"><?php echo e($photo->number); ?></div>
    <?php endif; ?>

    <picture class="photo transition-transform duration-300 print:opacity-100
                 <?php echo e($photo->fill ? 'fill' : 'fit'); ?>

                 <?php echo e($photo->link ? 'cp md:hover:scale-105' : ''); ?>

                 <?php echo e($photo->enlarge && !$photo->link ? 'md:cursor-zoom-in' : ''); ?>

                 <?php echo e($photo->border ? 'p-2' : ''); ?>

        " 
    >

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

        <?php if($max_size > 768 && $photo->large): ?>
            <source media="(min-width: 768px)" srcset="<?php echo e($photo->large); ?>.webp" type="image/webp">
        <?php endif; ?>

        <?php if($max_size > 768 && $photo->large): ?>
            <source media="(min-width: 768px)" srcset="<?php echo e($photo->large); ?> 1152w" type="image/jpg">
        <?php endif; ?>


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

        <?php if($max_size > 576 && $photo->medium): ?>
            <source media="(min-width: 576px)" srcset="<?php echo e($photo->medium); ?>.webp" type="image/webp">
        <?php endif; ?>

        <?php if($max_size > 576 && $photo->medium): ?>
            <source media="(min-width: 576px)" srcset="<?php echo e($photo->medium); ?> 768w" type="image/jpg">
        <?php endif; ?>

        <?php if($photo->small && $photo->large && false): ?>
            <source srcset="<?php echo e($photo->small); ?>.webp 1x, <?php echo e($photo->large); ?>.webp 2x" type="image/webp" v-if="retina">
        <?php endif; ?>

        <?php if($photo->small && $photo->medium && false): ?>
            <source srcset="<?php echo e($photo->small); ?>.webp 1x, <?php echo e($photo->medium); ?>.webp 1.3x" type="image/webp" v-if="retina">
        <?php endif; ?>

        <?php if($photo->small): ?>
            <source srcset=" <?php echo e($photo->small); ?>.webp" type="image/webp">
        <?php endif; ?>

        <?php if($photo->small): ?>
            <source srcset="<?php echo e($photo->small); ?> 576w" type="image/jpg">
        <?php endif; ?>

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

</photo-container>
<?php /**PATH /var/www/html/resources/views/content-elements/photo.blade.php ENDPATH**/ ?>