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


<div <?php echo $this->cssID; ?>
        class="<?= $this->class; ?> form--image-select widget widget-<?php echo($this->input_type); ?>  form-group">
    <?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->headline_type); ?>>
        <?php echo($this->headline); ?>
    </<?php echo($this->headline_type); ?>>
<?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; ?>
<?php if ($this->text_right) : ?>
<div class="row align-items-center">
    <div class="col-12 col-xl-6">
        <?php endif; ?>
        <div class="row">
            <?php
            $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            $charactersLength = strlen($characters);
            $inputId = '';
            for ($i = 0; $i < 3; $i++) {
                $inputId .= $characters[rand(0, $charactersLength - 1)];
            }
            ?>
            <?php foreach ($this->inputs as $index => $input) : ?>
            <div class="col-12 <?php if ($this->text_right) : ?>col-md-6 col-lg-4 col-xl-6 <?php else : ?>col-md-6 col-lg-4 col-xl-3<?php endif; ?>">
                <label class="image-select--item" for="opt_<?php echo $inputId; ?>_<?php echo $index; ?>"
                       data-aos="<?php if ($input->animation_type) : ?><?php echo $input->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
                    <?php if ($input->headline) : ?>
                    <div class="item--headline">
                        <?php if ($input->headline) : ?>
                        <<?php echo($input->headline_type); ?>>
                        <?php echo($input->headline); ?>
                    </<?php echo($input->headline_type); ?>>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            <?php if ($input->text_top) : ?>
            <div class="item--text-top">
                <?php echo($input->text_top); ?>
            </div>
            <?php endif; ?>
            <div class="item--image">
                <img src="<?= Image::get(FilesModel::findByUuid($input->image)->path, null, null, null); ?>">
            </div>
            <?php if ($input->text_bottom) : ?>
            <div class="item--text-bottom">
                <?php echo($input->text_bottom); ?>
            </div>
            <?php endif; ?>
            <div class="item--input price-relevant">
                <div class="form-check">
                    <input type="<?php echo($this->input_type); ?>" name="<?= $this->name ?>[]"
                           id="opt_<?php echo $inputId; ?>_<?php echo $index; ?>"
                           class="<?php echo($this->input_type); ?> form-check-input"
                           value="<?php echo($input->input_value); ?>">
                    <label id="lbl_<?php echo $inputId; ?>_<?php echo $index; ?>"
                           for="opt_<?php echo $inputId; ?>_<?php echo $index; ?>" class="form-check-label">
                        <span class="item--price"><?php echo($input->price); ?></span> €
                    </label>
                </div>
            </div>
            <?php if ($input->preview_links) : ?>
            <div class="item--preview-links">
                <?php echo($input->preview_links); ?>
            </div>
            <?php endif; ?>
            </label>
        </div>
        <?php endforeach; ?>
    </div>
    <?php if ($this->text_right) : ?>
</div>
    <div class="col-12 col-xl-6">
        <div class="col-right"
             data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
            <?php echo $this->text_right; ?>
        </div>
    </div>
    </div>
<?php endif; ?>
</div>