<?php
$ratio    = $block->ratio()->or('auto');
$src      = null;
$txtcolor = $block->txtcolor();
$bgcolor = $block->bgcolor();
$imgalpha = $block->imagealpha()->value();
$class = $block->gradient()->toBool() ? 'gradient' : '';

$is_fake3D = $block->image_is_fake3d()->isTrue();
$tresholdX =  $block->fake3d_threshx()->value() ?? 50;
$tresholdY =  $block->fake3d_threshy()->value() ?? 50;
$imgFocusx =  $block->fake3d_focusx()->value() ?? 50;
$imgFocusy =  $block->fake3d_focusy()->value() ?? 50;


if (!isset($imgcollection)) {
    if ($image = $block->image()->toFile()) {
        $src = $image;
    }
}

$class .= $block->mobilecard()->toBool()  ? ' visuals' : '';

$ratios = '';
if ($ratio != 'auto') {
    $ratio = Str::split($ratio, '/');
    $w = $ratio[0] ?? 1;
    $h = $ratio[1] ?? 1;
    $ratios = '--w:' . $w . '; --h:' . $h . '; ';
}

$attrs = attr([
    'style'         => $ratios . '--tColor:' . $txtcolor . '; --bgColor:' . $bgcolor . ';',
    'class'         => 'gridbox shadow ' . $class,
]);


?>
<div <?= $attrs ?>>

    <?php if (isset($imgcollection)) : ?>
        <div class="swiper ui-white" id="swiper-<?= $block->id() ?>">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <?php foreach ($imgcollection as $imageitem) : ?>
                    <?php $imageitem = $imageitem->toFile(); ?>
                    <div class="swiper-slide">
                        <div class="img-container" style="--imgalpha:<?= $imgalpha ?>">
                            <img class="gridbox-bg" style="--objPos:<?= $imageitem->focus() ?>;" src="<?= $imageitem->placeholderUri() ?>" data-srcset="<?= $imageitem->srcset() ?>" data-lazyload alt="<?= $imageitem->alt() ?>" title="<?= $imageitem->alt() ?>">
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="overlay"></div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
        </div>

    <?php else : ?>
        <?php if ($is_fake3D && $depthmap = $block->image_depthmap()->toFile()) : ?>
            <div class="img-container" style="--imgalpha:<?= $imgalpha ?>">
                <div class="fake3d-frame" style="--w: <?= $src->width() ?>; --h: <?= $src->height() ?>">
                    <div class="f3d-canvas" id="gl-<?=$block->id()?>" data-focusx="<?= $imgFocusx ?>" data-focusy="<?= $imgFocusy ?>" data-imageOriginal="<?= $src->url() ?>" data-imageDepth="<?= $depthmap->url() ?>" data-horizontalThreshold="<?= 101 - $tresholdX ?>" data-verticalThreshold="<?= 101 - $tresholdY ?>">
                    </div>
                    <div id="f3d-loader-<?=$block->id()?>" class="cpb-progress-container"></div>  
                </div>
            </div>
            <div class="overlay"></div>
        <?php else : ?>

            <?php if ($src) : ?>
                <div class="img-container" style="--imgalpha:<?= $imgalpha ?>">
                    <img class="gridbox-bg" src="<?= $src->placeholderUri() ?>" data-srcset="<?= $src->srcset() ?>" data-lazyload style="--objPos:<?= $src->focus() ?>;">
                </div>
                <div class="overlay"></div>
            <?php endif ?>
        <?php endif ?>
    <?php endif ?>
    <div class="text-area">
        <?php if ($block->headline()->isNotEmpty()) : ?>
            <?= $block->headline() ?>
        <?php endif ?>
        <?php if ($block->text()->isNotEmpty()) : ?>
            <?= $block->text() ?>
        <?php endif ?>
        <?php if ($block->cta()->isTrue()) : ?>
            <?php if ($obj = $block->cta_link()->toObject()) : ?>

                <?php if ($obj->is_script()->toBool()) : ?>
                    <button class="btn" onclick="<?= $obj->callback() ?>"><?= $obj->linkText()->or('EMPTY') ?></button>
                <?php else : ?>
                    <a class="btn" href="<?= $obj->link()->toUrl() ?>"><?= $obj->linkText()->or('EMPTY') ?></a>
                <?php endif ?>
            <?php endif ?>
        <?php endif ?>
    </div>
</div>