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


if (!isset($this->size_bg)) {
    $this->{"size_bg"} = "";
}
?>


<div <?php echo $this->cssID; ?>
        class="content--element <?php echo $this->class; ?> <?php if ($this->bg_image): ?>lazy<?php endif; ?>"
        <?php if ($this->bg_image): ?>data-bg="<?= Image::get(FilesModel::findByUuid($this->bg_image)->path, $this->size_bg[0], $this->size_bg[1], $this->size_bg[2]); ?>" style="background-position: center center; background-repeat: no-repeat; background-size: cover;"<?php endif; ?>
>
    <div class="ce--inner container">
        <?php if ($this->headline || $this->subline || $this->topline) : ?>
        <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"
                  data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>"><?php echo $this->subline; ?></span>
        <?php endif; ?>
    </div>
    <?php endif; ?>
    <div class="ce--number-boxes">
        <div class="row g-3 gy-md-5 align-items-center">
            <?php foreach ($this->boxes as $box) : ?>
            <div class="col-12 col-md-6 col-lg-3">

                <?php
                if (!isset($box->size)) {
                    $box->{"size"} = "";
                }
                ?>

                <div class="number-box--wrapper lazy <?php if ($box->image): ?>with-image<?php endif; ?>"
                     data-aos="<?php if ($box->animation_type) : ?><?php echo $box->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>"
                     data-bg="<?= Image::get(FilesModel::findByUuid($box->image)->path, $box->size[0], $box->size[1], $box->size[2]); ?>">
                    <?php if ($box->headline) : ?>
                    <div class="number-box--title">
                        <?php if (!$box->onlystyle) : ?>
                        <<?php echo $box->headline_type; ?>>
                        <?php echo $box->headline; ?>
                    </<?php echo $box->headline_type; ?>>
                <?php else : ?>
                    <span class="<?php echo $box->headline_type; ?>"><?php echo $box->headline; ?></span>
                <?php endif; ?>
                </div>
            <?php endif; ?>
                <div class="number-box--content">
                    <div class=" <?php if (($box->text_left_1 || $box->text_left_2) && ($box->text_right_1 || $box->text_right_2)): ?>row align-items-center<?php endif;?>">
                        <?php if ($box->text_left_1 || $box->text_left_2): ?>
                        <div class="<?php if ($box->text_right_1 != "" || $box->text_right_2 != ""): ?>col-6<?php endif; ?> left--col">
                            <div class="left-col--inner">
                                <?php if ($box->text_left_1 != ""): ?>
                                    <span class="count"><?php echo $box->text_left_1; ?></span>
                                <?php endif; ?>
                                <?php if ($box->text_left_2 != ""): ?>
                                    <span><?php echo $box->text_left_2; ?></span>
                                <?php endif; ?>
                            </div>
                        </div>
                            <?php endif; ?>
                        <?php if ($box->text_right_1 || $box->text_right_2): ?>
                            <div class="<?php if ($box->text_left_1 != "" || $box->text_left_2 != ""): ?>col-6<?php endif; ?> right--col">
                                <div class="right-col--inner <?php if ($box->text_left_1 != "" || $box->text_left_2 != ""): ?>with-left-col<?php endif; ?>">
                                    <?php if ($box->text_right_1 != ""): ?>
                                        <?php echo $box->text_right_1; ?>
                                    <?php endif; ?>
                                    <?php if ($box->text_right_2 != ""): ?>
                                        <?php echo $box->text_right_2; ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
</div>
</div>