<div id="add-canned-reply" class="mb-4">
    <div class="mb-3">
        <label for="name" class="form-label fw-bold"><?php echo $this->user->lang('Reply Name'); ?></label>
        <input type="text" class="form-control required" id="name" name="name" value="<?php echo $this->name; ?>">
    </div>

    <div class="mb-3">
        <label for="response" class="form-label fw-bold"><?php echo $this->user->lang('Reply Text'); ?></label>
        <textarea class="form-control required" id="response" name="response" rows="4"><?php echo $this->responseText; ?></textarea>
    </div>

    <div class="mb-3">
        <a href="#" class="d-inline-flex align-items-center text-decoration-none" id="toggleTags">
            <?php echo $this->user->lang('Available Tags'); ?>
            <i class="ms-2 bi bi-chevron-down" id="toggleIcon"></i>
        </a>
    </div>

    <ul id="cannedTags" class="collapse list-unstyled">
        <li><b>[CLIENTNAME]</b>: <?php echo $this->user->lang("Client's first and last name") ?></li>
        <li><b>[FIRSTNAME]</b>: <?php echo $this->user->lang("Client's First name") ?></li>
        <li><b>[LASTNAME]</b>: <?php echo $this->user->lang("Client's Last name") ?></li>
        <li><b>[CLIENTEMAIL]</b>: <?php echo $this->user->lang("Client's Email") ?></li>
        <li><b>[ORGANIZATION]</b>: <?php echo $this->user->lang("Client's Organization") ?></li>
        <li><b>[CLIENTAPPLICATIONURL]</b>: <?php echo $this->user->lang("Url to your Clientexec installation") ?></li>
        <li><b>[BILLINGEMAIL]</b>: <?php echo $this->user->lang("Email address for billing inquiries") ?></li>
        <li><b>[SUPPORTEMAIL]</b>: <?php echo $this->user->lang("Email to support staff") ?></li>
        <li><b>[COMPANYNAME]</b>: <?php echo $this->user->lang("Company name") ?></li>
        <li><b>[COMPANYADDRESS]</b>: <?php echo $this->user->lang("Company address") ?></li>
        <li><b>[COMPANYURL]</b>: <?php echo $this->user->lang("URL to your web site") ?></li>
        <li><b>[PLANNAME]</b>: <?php echo $this->user->lang("Client's Plan") ?></li>
        <li><b>[CUSTOMPROFILE_xxxx]</b>: <?php echo $this->user->lang("Custom Profile<br/><i style='font-size:smaller;'>where xxx is a profile custom field name (i.e. [CUSTOMPROFILE_somename])</i>") ?></li>
        <li><b>[CUSTOMPACKAGE_xxxx]</b>: <?php echo $this->user->lang("Custom Package Field<br/><i style='font-size:smaller;'>Where xxx is custom package field name (i.e. [CUSTOMPACKAGE_somename])</i>") ?></li>
        <li><b>[SMARTDATE_xxx]</b>: <?php echo $this->user->lang("Date calculated using PHP's <a href='http://php.net/manual/en/datetime.formats.relative.php' target='_blank'>strtotime()</a> function.<br><i style='font-size:smaller'>For example [SMARTDATE_next monday]</i>") ?></li>
    </ul>

</div>


<script data-cfasync="false">
document.addEventListener('click', function (e) {
    var toggleLink = e.target.closest('#toggleTags');

    if (!toggleLink) {
        return;
    }

    e.preventDefault();

    var modal = toggleLink.closest('.modal');

    if (!modal || !modal.classList.contains('richwindow')) {
        return;
    }

    var collapseEl = modal.querySelector('#cannedTags');
    var icon = modal.querySelector('#toggleIcon');

    if (!collapseEl || !icon) {
        return;
    }

    var bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl, {
        toggle: false
    });

    bsCollapse.toggle();
});

document.addEventListener('show.bs.collapse', function (e) {
    if (e.target.id !== 'cannedTags') {
        return;
    }

    var modal = e.target.closest('.modal');

    if (!modal) {
        return;
    }

    var icon = modal.querySelector('#toggleIcon');

    if (!icon) {
        return;
    }

    icon.classList.remove('bi-chevron-down');
    icon.classList.add('bi-chevron-up');
});

document.addEventListener('hide.bs.collapse', function (e) {
    if (e.target.id !== 'cannedTags') {
        return;
    }

    var modal = e.target.closest('.modal');

    if (!modal) {
        return;
    }

    var icon = modal.querySelector('#toggleIcon');

    if (!icon) {
        return;
    }

    icon.classList.remove('bi-chevron-up');
    icon.classList.add('bi-chevron-down');
});
</script>