<?php
if (TL_MODE == 'FE') {
    $GLOBALS['TL_CSS'][] = 'files/base/layout/css/elements/custom-elements/ce_rsce_fullwidthgallery.min.css|static';
}
?>

<div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
    <div class="ce--inner">

        <?php if ($this->headline || $this->subline || $this->topline) : ?>
        <div class="container">
            <div class="ce--headline"
                 data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
                <?php if ($this->topline) : ?>
                    <span class="ce--topline"><?php echo $this->topline; ?></span>
                <?php endif; ?>
                <?php if ($this->headline) : ?>
                <<?php echo($this->hl); ?>>
                <?php echo($this->headline); ?>
            </<?php echo($this->hl); ?>>
            <?php endif; ?>
            <?php if ($this->subline) : ?>
                <span class="ce--subline"><?php echo $this->subline; ?></span>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>

    <?php if ($this->gallery): ?>
        <div class="ce--fullwidthgallery">
            <div class="row gx-0">
                <?php foreach ($this->gallery as $x => $e) : ?>
                    <div class="<?= $e->column_width; ?>"
                         data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
                        <div class="gallery-column">

                            <div class="gallery-column--inner">

                                <div data-bg="<?= Image::get(FilesModel::findByUuid($e->image)->path, null, null, null); ?>"
                                     style="background-size: cover; background-repeat: no-repeat;"
                                     class="lazy column--image-holder"></div>

                                <?php if ($e->link): ?>
                                    <a href="<?= $e->link; ?>"></a>
                                <?php endif; ?>

                                <?php if ($e->desc): ?>
                                    <div class="hover-content--info-icon">
                                        <i class="fas fa-info"></i>
                                    </div>

                                    <div class="gallery-column--hover-content" style="
                                    <?php if ($e->background_color): ?>background-color: <?= $e->background_color; ?>;<?php endif; ?>
                                    <?php if ($e->text_color): ?>color: <?= $e->text_color; ?>;<?php endif; ?>
                                            "

                                    >

                                        <div class="hover-content--inner">
                                            <?= $e->desc; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>

                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        </div>
    <?php endif; ?>
</div></div>