<?php
// Copyright 1999-2023. 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(); ?>
            <?php if ($this->element->isRequired()): ?>
                <span class="required">*</span>
            <?php endif; ?>
        </label>
    </div>
    <div class="field-value">
        <div class="image-selector">
            <?php foreach ($this->element->getMultiOptions() as $optionName => $optionTitle): ?>
                <div class="image-selector-item">
                    <label class="image-selector-radio <?php echo ($optionName == $this->element->getValue()) ? 'checked' : ''; ?>">
                        <div>
                            <img class="image-selector-image" src="/modules/panel-migrator/images/<?php echo $this->element->getImage($optionName); ?>">
                        </div>
                        <div class="image-selector-text">
                            <input
                                type="radio"
                                id="<?php echo $this->element->getId() . "-$optionName"; ?>"
                                name="<?php echo $this->element->getFullyQualifiedName();?>"
                                class="image-selector-radio-input"
                                <?php echo ($optionName == $this->element->getValue()) ? 'checked="checked"' : ''; ?>
                                value="<?php echo $optionName; ?>"
                            >&nbsp;
                            <span class="image-selector-radio-label">
                                <?php echo false === $this->element->escape ? $optionTitle : $this->escape($optionTitle); ?>
                            </span>
                        </div>
                    </label>
                </div>
            <?php endforeach;?>
        </div>
    </div>
</div>
<script type="text/javascript">
    //<![CDATA[
    Jsw.onReady(function() {
        $$('.image-selector-radio input').invoke('observe', 'change', function (e) {
            $$('.image-selector-radio').invoke('removeClassName', 'checked');
            e.target.up('.image-selector-radio').addClassName('checked');
        });
    });
    //]]>
</script>