<?php
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
?>
<div class='form-row'>
    <div class='field-name'>
        <?php echo $this->element->getLabel(); ?>
    </div>
    <div class='field-value'>
        <?php echo $this->elementPart($this->element)->content(); ?>
        <?php echo $this->defaultElementContent; ?>
        <?php echo $this->restoreToDefaultElementContent; ?>
        <?php echo $this->elementPart($this->element)->description(); ?>
        <span class='field-errors'></span>
    </div>
</div>
<script type='text/javascript'>
//<![CDATA[
(function () {
    var mainElement = document.getElementById(<?php echo $this->jsEscape($this->element->getId()); ?>);
    var defaultElement = document.getElementById(mainElement.id + '-default');
    var resetElement = document.getElementById(mainElement.id + '-reset-to-default');

    if (!mainElement || !defaultElement || !resetElement) {
        return;
    }

    if (mainElement.value === defaultElement.value) {
        resetElement.style.display = 'none';
    }

    resetElement.addEventListener('click', function (event) {
        event.preventDefault();
        event.stopPropagation();
        mainElement.value = defaultElement.value;

        // trigger native change event
        if (document.createEvent) {
            var evt = document.createEvent('HTMLEvents');
            evt.initEvent('change', true, true);
            mainElement.dispatchEvent(evt);
        } else if (mainElement.fireEvent) {
            mainElement.fireEvent('onchange');
        }

        mainElement.focus();
        resetElement.style.display = 'none';
    });

    mainElement.addEventListener('change', function (event) {
        event.preventDefault();
        event.stopPropagation();
        if (mainElement.value === defaultElement.value) {
            resetElement.style.display = 'none';
        } else {
            resetElement.style.display = '';
        }
    });
})();
//]]>
</script>
