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


    <div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
        <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"
                ><?php echo $this->subline; ?></span>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <?php if ($this->rows) : ?>
            <div class="row justify-content-center">
                <?php foreach ($this->rows as $i => $row) : ?>
                    <div class="<?php echo $row->column_width; ?>">
                        <div class="flipping-card--wrapper"
                             data-aos="<?php if ($row->animation_type) : ?><?php echo $row->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">

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

                            <div class="flipping-card--inner">

                                <div style="
                                <?php if ($row->front_background): ?>background-color: <?php echo $row->front_background; ?>;<?php endif; ?> <?php if ($row->front_textcolor): ?>color: <?php echo $row->front_textcolor; ?><?php endif; ?>
                                <?php if ($row->image_front && $row->front_as_bg): ?>background: url(<?= Image::get(FilesModel::findByUuid($row->image_front)->path, null, null, null); ?>) center center no-repeat; background-size: cover;<?php endif; ?>
                                        "
                                     class="flipping-card--front <?php echo $row->front_textalign; ?>">
                                    <div class="front--inner"
                                         style="<?php if ($row->front_background): ?>background-color: <?php echo $row->front_background; ?>;<?php endif; ?> <?php if ($row->front_textcolor): ?>color: <?php echo $row->front_textcolor; ?><?php endif; ?>"

                                    >
                                        <?php if ($row->image_front && !$row->front_as_bg): ?>
                                            <div class="fc--image">
                                                <img src="<?= Image::get(FilesModel::findByUuid($row->image_front)->path, null, null, null); ?>">
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->front_headline): ?>
                                            <div class="fc--headline">
                                                <span><?php echo $row->front_headline; ?></span>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->front_content_headline): ?>
                                            <div class="fc--content-headline">
                                                <span><?php echo $row->front_content_headline; ?></span>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->front_content_text): ?>
                                            <div class="fc--content-text">
                                                <span><?php echo $row->front_content_text; ?></span>
                                            </div>
                                        <?php endif; ?>


                                    </div>
                                </div>

                                <div style=" <?php if ($row->front_background): ?>border-color: <?php echo $row->front_background; ?>;<?php endif; ?>
                                <?php if ($row->back_background): ?>background-color: <?php echo $row->back_background; ?>;<?php endif; ?>
                                <?php if ($row->back_textcolor): ?>color: <?php echo $row->back_textcolor; ?><?php endif; ?>"
                                     class="flipping-card--back">
                                    <div class="back--inner">
                                        <?php if ($row->image_back): ?>
                                            <div class="fc--image">
                                                <img src="<?= Image::get(FilesModel::findByUuid($row->image_back)->path, null, null, null); ?>">
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->back_headline): ?>
                                            <div class="fc--headline">
                                                <?php echo $row->back_headline; ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->back_content_headline): ?>
                                            <div class="fc--content-headline">
                                                <span><?php echo $row->back_content_headline; ?></span>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($row->back_content_text): ?>
                                            <div class="fc--content-text">
                                                <?php echo $row->back_content_text; ?>
                                            </div>
                                        <?php endif; ?>

                                        <?php if ($row->link_url): ?>
                                            <div class="fc--content-button mt-4">
                                                <a class="d-inline-block btn <?php if ($row->link_size) : ?><?php echo $row->link_size; ?><?php endif; ?> <?php echo $row->link_type; ?>"
                                                   href="<?php echo $row->link_url; ?><?php if ($row->link_betreff) : ?>?subject=<?php echo $row->link_betreff; ?><?php endif; ?>"><?php echo $row->link_text; ?>
                                                </a>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        <?php endif; ?>
    </div>
    </div>

<?php if (TL_MODE == 'FE'): ?>
    <script>
        if ($('.flipping-card--wrapper').length) {
            $('body').on('click', '.flipping-card--wrapper', function (e) {
                $('.flipping-card--wrapper.active').removeClass("active");
                $(this).addClass("active");
            });
        }
    </script>
<?php endif; ?>