<div class="ticket-grid" style="grid-template-columns:1fr 340px">
  <div class="card">
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Name</th><th>Parent</th><th>Status</th><th></th></tr></thead>
        <tbody>
        <?php foreach ($categories as $c) : ?>
          <tr>
            <td><?= $c['parent_id'] ? '— ' : '' ?><?= e($c['name']) ?></td>
            <td class="text-sm text-faint"><?= e($c['parent_name'] ?? '—') ?></td>
            <td><span class="badge <?= $c['is_active'] ? 'badge-resolved' : 'badge-closed' ?>"><?= $c['is_active'] ? 'Active' : 'Inactive' ?></span></td>
            <td>
              <div class="flex gap-2">
                <button type="button" class="btn btn-sm" data-modal-open="edit-category-<?= $c['id'] ?>">Edit</button>
                <form method="post" action="<?= url('/admin/categories/' . $c['id'] . '/toggle') ?>">
                  <?= csrf_field() ?><button class="btn btn-sm"><?= $c['is_active'] ? 'Deactivate' : 'Activate' ?></button>
                </form>
                <form method="post" action="<?= url('/admin/categories/' . $c['id'] . '/delete') ?>" onsubmit="return confirm('Delete this category? This only works if it is not referenced by any ticket, sub-category, canned response or routing rule.');">
                  <?= csrf_field() ?><button class="btn btn-sm btn-danger">Delete</button>
                </form>
              </div>

              <div class="modal-overlay" id="edit-category-<?= $c['id'] ?>">
                <div class="modal-box">
                  <div class="modal-header"><h3>Edit category</h3><button type="button" class="modal-close" data-modal-close aria-label="Close">&times;</button></div>
                  <div class="modal-body">
                    <form method="post" action="<?= url('/admin/categories/' . $c['id']) ?>">
                      <?= csrf_field() ?>
                      <div class="form-group"><label>Name <span class="req">*</span></label><input type="text" name="name" required value="<?= e($c['name']) ?>"></div>
                      <div class="form-group">
                        <label>Parent</label>
                        <select name="parent_id">
                          <option value="">— Top level —</option>
                          <?php foreach ($categories as $p) : if ($p['parent_id'] || (int)$p['id'] === (int)$c['id']) continue; ?>
                            <option value="<?= $p['id'] ?>" <?= (int)$c['parent_id'] === (int)$p['id'] ? 'selected' : '' ?>><?= e($p['name']) ?></option>
                          <?php endforeach; ?>
                        </select>
                      </div>
                      <button type="submit" class="btn btn-primary btn-block">Save changes</button>
                    </form>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        <?php endforeach; ?>
        <?php if (empty($categories)) : ?><tr><td colspan="4" class="text-faint">No categories yet.</td></tr><?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-header"><h3>Add category</h3></div>
    <div class="card-body">
      <form method="post" action="<?= url('/admin/categories') ?>">
        <?= csrf_field() ?>
        <div class="form-group"><label>Name <span class="req">*</span></label><input type="text" name="name" required></div>
        <div class="form-group">
          <label>Parent (leave blank for a top-level category)</label>
          <select name="parent_id">
            <option value="">— Top level —</option>
            <?php foreach ($categories as $c) : if ($c['parent_id']) continue; ?>
              <option value="<?= $c['id'] ?>"><?= e($c['name']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <button class="btn btn-primary btn-block">Add category</button>
      </form>
    </div>
  </div>
</div>
