<?php
// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
?>
<div class="form-row">
    <div class="single-row">
        <?php echo $this->elementPart($this->element)->content() ?>
        <div id="<?php echo $this->escape($this->element->getId()) ?>-replace">
            <?php echo $this->lmsg("{$this->localeSection}.ruleSetAtomicInstalled") ?>
            <a href="#" id="<?php echo $this->escape($this->element->getId()) ?>-toggler" class="toggler">
                <?php echo $this->lmsg("{$this->localeSection}.ruleSetAtomicInstall") ?>
            </a>
        </div>
        <div id="<?php echo $this->escape($this->element->getId()) ?>-credentials">
            <?php echo $this->lmsg($this->localeSection . ('true' === $this->element->getValue()
                    ? ".ruleSetAtomicHowTo" : ".ruleSetAtomicSwitchHowTo")) ?>
        </div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
Jsw.onReady(function() {
    var installHidden = document.getElementById('<?php echo $this->escape($this->element->getId()) ?>');
    var replaceHint = document.getElementById('<?php echo $this->escape($this->element->getId()) ?>-replace');
    var credentialsHint = document.getElementById('<?php echo $this->escape($this->element->getId()) ?>-credentials');
    var loginInput = document.getElementById('<?php echo $this->escape($this->form->getElement('ruleSetAtomicLogin')->getId()) ?>');
    var passwordInput = document.getElementById('<?php echo $this->escape($this->form->getElement('ruleSetAtomicPassword')->getId()) ?>');
    var updateControls = function () {
        var showReplace = false;
        var showCredentials = false;
        if (document.getElementById('<?php echo $this->escape($this->form->getElement('ruleSet')->getId()) ?>-atomic').checked) {
            showReplace = 'true' !== installHidden.value;
            showCredentials = !showReplace;
        }
        installHidden.closest('.form-row').style.display = (showReplace || showCredentials) ? '' : 'none';
        replaceHint.style.display = showReplace ? '' : 'none';
        credentialsHint.style.display = showCredentials ? '' : 'none';
        loginInput.closest('.form-row').style.display = showCredentials ? '' : 'none';
        passwordInput.closest('.form-row').style.display = showCredentials ? '' : 'none';
    };
    updateControls();

    <?php foreach (array_keys($this->form->getElement('ruleSet')->getMultiOptions()) as $option): ?>
        document.getElementById('<?php echo $this->escape($this->form->getElement('ruleSet')->getId() . '-' . $option) ?>').addEventListener('click', updateControls);
    <?php endforeach ?>

    document.getElementById('<?php echo $this->escape($this->element->getId()) ?>-toggler').addEventListener('click', function (event) {
        event.preventDefault();
        installHidden.value = 'true';
        updateControls();
    });
});
//]]>
</script>
