<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>
  // Initialize chevron toggle every time modal is shown
  var cannedReplyModal = document.getElementById('rich-comp-1');
  cannedReplyModal.addEventListener('shown.bs.modal', function () {

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

    var icon = document.getElementById('toggleIcon');
    var toggleLink = document.getElementById('toggleTags');

    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>
