<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 d-flex align-items-stretch">
      <div class="card w-100">
        <div class="card-body p-4">

      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold mb-0">Help Center</h2>
        <a href="<?= site_url('/admin/help/create') ?>" class="btn btn-primary">Create +</a>
      </div>

      <div class="accordion" id="helpAccordion">
        <?php
        $num = 0; // numeric index better for id's
        foreach ($details as $data) { ?>
          <div class="accordion-item mb-3">
            <h2 class="accordion-header d-flex justify-content-between align-items-center" id="heading<?= $num ?>">
              <button 
                class="accordion-button collapsed flex-grow-1"
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapse<?= $num ?>" 
                aria-expanded="false" 
                aria-controls="collapse<?= $num ?>">
                <?= htmlspecialchars($data['question']) ?>
              </button>

              <div class="mx-3 d-flex flex-column flex-md-row gap-2">
                <a href="<?= site_url('/admin/help/edit?id=' . $data['id']) ?>" class="btn btn-sm btn-warning "><i class="fa-solid fa-pen-to-square"></i></a>
                <a href="<?= site_url('/admin/help/delete?id=' . $data['id']) ?>" 
                   class="btn btn-sm btn-danger "
                   onclick="return confirm('Are you sure you want to delete this question?');">
                   <i class="fa-solid fa-trash"></i>
                </a>
              </div>
            </h2>

            <div id="collapse<?= $num ?>" class="accordion-collapse collapse" aria-labelledby="heading<?= $num ?>" data-bs-parent="#helpAccordion">
              <div class="accordion-body">
                <?= nl2br(htmlspecialchars($data['answer'])) ?>
              </div>
            </div>
          </div>
        <?php $num++; } ?>
      </div>

    </div>
  </div>
</div>
</div>
</div>