<?php
$cssClasses = array(
    'feature-wrapper',
    'feature-wrapper_' . $this->id,
    $this->class,
);
if ($this->colorVariation) {
    $cssClasses[] = $this->colorVariation;
}
if ($this->contentPosition)
{
    $cssClasses[] = $this->contentPosition;
}
if ($this->valign)
{
    $cssClasses[] = $this->valign;
}
if ($this->viewportHeight)
{
    $cssClasses[] = '-viewportHeight';
}

$figure = '';
$blnIsVideo = false;
if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null)
{
    if (in_array(
        $file->extension,
        array_map('trim', explode(',', \Config::get('validImageTypes')))
    ))
    {
        $figure = $this->figure(
            $file->uuid, $this->backgroundImageSize,
            [
                'options' => [
                    'attr' => [
                        'class' => 'feature-image',
                    ],
                    'picture_attr' => [
                        'style' => "object-fit: $this->backgroundSize;" .
                            ($this->backgroundPosition ? "object-position: $this->backgroundPosition;" : "") .
                            "font-family: 'object-fit: $this->backgroundSize';"
                    ],
                    'img_attr' => [
                        'style' => "object-fit: $this->backgroundSize;" .
                            ($this->backgroundPosition ? "object-position: $this->backgroundPosition;" : "") .
                            "font-family: 'object-fit: $this->backgroundSize';"
                    ]
                ]
            ],
            '@ContaoCore/Image/Studio/figure.html.twig'
        );
    } else
    {
        $blnIsVideo = !$blnIsVideo;
    }
}

?>

<?php $this->block('content'); ?>
<div class="<?php echo implode(' ', $cssClasses) ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="feature-wrapper-boundary">
        <div class="feature-wrapper-cols">
            <div class="media-col">
                <?php if ($blnIsVideo && $file !== null): ?>
                    <div class="media-col-content">
                        <div class="feature-video">
                            <video autoplay muted loop playsinline>
                                <source src="<?php echo TL_FILES_URL . $file->path ?>" type="video/<?php echo $file->extension ?>">
                            </video>
                        </div>
                    </div>
                <?php elseif ($figure !== null): ?>
                    <div class="media-col-content">
                        <?= $figure ?>
                        <?php if ($this->featureLink && $this->linkUrl): ?>
                            <div class="feature-link<?php if ($this->linkAlign): ?> <?= $this->linkAlign ?><?php endif; ?>">
                                <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><span><?= $this->linkLabel ?></span></a>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endif ?>
            </div>

            <div class="content-col">
                <div class="content-col-inside<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>">
<?php $this->endblock(); ?>
