

<div class="offcanvas offcanvas-end shadow-lg" tabindex="-1" id="historyOffcanvas" aria-labelledby="historyOffcanvasLabel" style="width: 450px; z-index: 1065;">
  
  <div class="offcanvas-header border-bottom bg-light sticky-top z-3">
    <h5 class="offcanvas-title fw-bold" id="historyOffcanvasLabel">Comments History</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body">
    <div class="timeline" id="commentsTimeline">
      
      <div class="timeline-item">
        <div class="timeline-icon bg-primary text-white shadow-sm">
          <i class="bi bi-file-earmark-arrow-up"></i>
        </div>
        <div class="timeline-content border rounded p-3 shadow-sm">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <strong class="text-primary">Application  Submitted</strong>
            <small class="text-muted">16th May, 2026 - 2:15 PM</small>
          </div>
          <p class="mb-0 small text-muted">by Applicant Olivia Sampson</p>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-icon bg-secondary text-white shadow-sm">
          <i class="bi bi-chat-text"></i>
        </div>
        <div class="timeline-content border rounded p-3 shadow-sm">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <strong>Applicatant to review</strong>
            <small class="text-muted">17th May, 2026 - 3:15 PM</small>
          </div>
          <p class="mb-0 text-dark small">Please ensure the architectural drawings include the updated drainage plan for the region.</p>
          <p class="mb-0 small text-muted">Updated by Kafui Amuzu (Works, Head )</p>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-icon bg-success text-white shadow-sm">
          <i class="bi bi-check-lg"></i>
        </div>
        <div class="timeline-content border rounded p-3 shadow-sm">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <strong class="text-success">Application Received</strong>
            <small class="text-muted">18th May, 2026 - 10:30 AM</small>
          </div>
          <p class="mb-2 small">All documents are in order</p>
          <div>
              <p class="mb-0 small text-muted">Updated by Luke Okyere (PPD Head)</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="offcanvas-footer border-top p-3 bg-light z-3">
    
      <textarea class="form-control mb-2 commentBody" rows="2" placeholder="Write a comment..."></textarea>
      <button class="btn btn-primary w-100 btn-sm submitPermitCommentBtn" type="button"><i class="bi bi-send"></i> Submit Comment
      </button>
  </div>

</div>
