<div id="add-canned-reply" class="mb-4">
  <!-- Reply Name -->
  <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>

  <!-- Reply Text -->
  <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>

  <!-- Toggle Available Tags -->
  <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>

  <!-- Tags List -->
  <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>
document.addEventListener('shown.bs.modal', function (event) {
    // Only run for richwindow modals
    if (!event.target.classList.contains('richwindow')) {
        return;
    }

    var modal = event.target;

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

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

    // Prevent duplicate initialization
    if (collapseEl.dataset.initialized) {
        return;
    }
    collapseEl.dataset.initialized = 'true';

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

    toggleLink.addEventListener('click', function (e) {
        e.preventDefault();
        bsCollapse.toggle();
    });

    collapseEl.addEventListener('show.bs.collapse', function () {
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    });

    collapseEl.addEventListener('hide.bs.collapse', function () {
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    });
});
</script>