<script>
    self.ModelViewerElement = self.ModelViewerElement || {};
    self.ModelViewerElement.dracoDecoderLocation = '<?= kirby()->url() ?>/assets/js/vendor/decoder/';
</script>
<?= js('/assets/js/vendor/model-viewer.min.js', ['type' => 'module']) ?>

<?php

$imgurl = "";
$imgalt = "";
$modelurl = "";
$exposure = 1;

if ($img = $block->placeholder()->toFile()) {

    $imgurl =  $img->thumb([
        'width'   => 250,
        'quality' => 5,
    ])->url();
    $imgalt = $img->alt();
}

if ($model = $block->threed_model()->toFile())
    $modelurl = $model->url();

$exposure = $block->threed_model_light()->value();




$ratio    = $block->ratio()->or('16/9');
if ($ratio !== 'auto') {
  $ratio = Str::split($ratio, '/');
  $w = $ratio[0] ?? 1;
  $h = $ratio[1] ?? 1;
}
$attrs = attr([
  'style'         => 'aspect-ratio:' . $w . '/' . $h,
]);
?>

<?php if ($modelurl) : ?>
    <div class="object__viewer" <?= $attrs ?>>
        <model-viewer class="exhibit-3d" id="reveal" loading="eager" exposure="<?= $exposure ?>" disable-tap disable-pan camera-controls touch-action="pan-y" auto-rotate poster="<?= $imgurl ?>" src="<?= $modelurl ?>" shadow-intensity="0" alt="<?= $imgalt ?>" style="background-color: unset;">
            <div class="viewer-progress" slot="progress-bar"></div>
        </model-viewer>
    </div>
<?php elseif (!$modelurl && $imgurl) : ?>
    <div class="digital__container row justify-content-center">
        <div class="col align-self-center text-center exhibit-digital">
            <div id="gallery" class="pswp-gallery">
                <a class="pswp-gallery__item" href="<?= $img->url() ?>" target="_blank" data-pswp-width="<?= $img->width() ?>" data-pswp-height="<?= $img->height() ?>">
                    <?= $img->responsiveImg($imgalt) ?>
                </a>
            </div>
        </div>
    </div>
<?php else : ?>
    <div class="object__viewer" <?= $attrs ?>>
        <div class="exhibit-3d no-object row justify-content-center text-center">
            <span class="empty w-50 text-primary"><i data-lucide="help-circle" class="icon-only"></i></span>
        </div>
    </div>
<?php endif ?>