<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>Email</th><th>Role</th><th>Status</th><th></th></tr></thead>
        <tbody>
        <?php foreach ($users as $u) : ?>
          <tr>
            <td><?= e($u['name']) ?></td>
            <td class="text-sm"><?= e($u['email']) ?></td>
            <td><span class="badge badge-outline"><?= e($u['role_name']) ?></span></td>
            <td><span class="badge <?= $u['is_active']?'badge-resolved':'badge-closed' ?>"><?= $u['is_active']?'Active':'Inactive' ?></span></td>
            <td>
              <form method="post" action="<?= url('/admin/users/' . $u['id'] . '/toggle') ?>">
                <?= csrf_field() ?><button class="btn btn-sm"><?= $u['is_active']?'Deactivate':'Activate' ?></button>
              </form>
            </td>
          </tr>
        <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-header"><h3>Add agent</h3></div>
    <div class="card-body">
      <form method="post" action="<?= url('/admin/users') ?>">
        <?= 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>Email <span class="req">*</span></label><input type="email" name="email" required></div>
        <div class="form-group"><label>Employee no.</label><input type="text" name="employee_no"></div>
        <div class="form-group">
          <label>Role <span class="req">*</span></label>
          <select name="role_id" required><?php foreach ($roles as $r) : ?><option value="<?= $r['id'] ?>"><?= e($r['name']) ?></option><?php endforeach; ?></select>
        </div>
        <div class="form-group"><label>Temporary password</label><input type="text" name="password" value="Passw0rd!"></div>
        <button class="btn btn-primary btn-block">Create account</button>
      </form>
    </div>
  </div>
</div>
