<?php
// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
?>
<div class="form-row" id="<?php echo $this->id ? $this->id : $this->element->getId() . '-form-row'; ?>">
    <div class="field-name">
        <label for="<?php echo $this->element->getId(); ?>">
            <?php echo $this->element->getLabel(); ?>
            <?= $this->requiredMark($this->element->isRequired()) ?>
        </label>
    </div>
    <div class="field-value">

        <div class="mode-selector">
            <?php foreach ($this->element->getMultiOptions() as $optionName => $optionTitle): ?>
            <div class="mode-selector-item">
                <label class="mode-selector-radio <?php echo ($optionName == $this->element->getValue()) ? 'checked' : ''; ?>">
                    <input type="radio" id="<?php echo $this->element->getId() . "-$optionName"; ?>" name="<?php
                    echo $this->element->getBelongsTo()
                        ? $this->element->getBelongsTo() . '[' . $this->element->getName() . ']'
                        : $this->element->getName();
                    ?>" class="mode-selector-radio-input" <?php echo ($optionName == $this->element->getValue()) ? 'checked="checked"' : ''; ?> <?php echo ($this->element->disable === true
                        || (is_array($this->element->disable) && in_array($optionName, $this->element->disable)))
                        ? 'disabled="disabled"' : ''; ?> value="<?php echo $optionName; ?>">
                    <span class="mode-selector-radio-label"><i class="<?php echo $this->classes[$optionName]; ?>"></i><?php echo false === $this->element->escape ? $optionTitle : $this->escape($optionTitle); ?></span>
                </label>
            </div>
            <?php endforeach;?>
        </div>

    </div>
</div>
<script type="text/javascript">
    Jsw.onReady(function () {
        document.querySelectorAll('.mode-selector-radio input').forEach(function (el) {
            el.addEventListener('change', function (e) {
                document.querySelectorAll('.mode-selector-radio').forEach(function (el) {
                    el.classList.remove('checked');
                });
                e.target.closest('.mode-selector-radio').classList.add('checked');
            });
        });
    });
</script>
