<!-- Edit User Access Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editUserModalLabel">Edit User Access</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editUserForm">
          <div class="mb-3">
            <label for="name" class="form-label">Name:</label>
            <input type="text" class="form-control" id="name" name="name" readonly>
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">Email:</label>
            <input type="email" class="form-control" id="email" name="email" readonly>
          </div>

          <div class="mb-3">
            <label for="division" class="form-label">Division:</label>
            <input type="text" class="form-control" id="division" name="division" readonly>
          </div>

          <div class="mb-3">
            <label for="section" class="form-label">Section:</label>
            <input type="text" class="form-control" id="section" name="section" readonly>
          </div>

          <div class="mb-3">
            <label for="unitOffice" class="form-label">Unit/Office:</label>
            <input type="text" class="form-control" id="unitOffice" name="unitOffice" readonly>
          </div>

          <div class="mb-3">
            <label for="role" class="form-label">Role:</label>
            <div class="form-control d-flex flex-wrap gap-2" style="min-height: 58px;">
              <span class="badge bg-light text-dark p-2 d-flex align-items-center">
                <span>MATRADE Employee</span>
                <button type="button" class="btn-close ms-2" style="font-size: 0.6rem;"></button>
              </span>
              <span class="badge bg-light text-dark p-2 d-flex align-items-center">
                <span>TC Admin</span>
                <button type="button" class="btn-close ms-2" style="font-size: 0.6rem;"></button>
              </span>
            </div>
          </div>

          <div class="mb-3">
            <label for="accessStatus" class="form-label">Access Status:</label>
            <select class="form-select" id="accessStatus" name="accessStatus">
              <option value="Active" selected>Active</option>
              <option value="Inactive">Inactive</option>
              <option value="Suspended">Suspended</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
        <button type="button" class="btn btn-light" id="resetBtn">Reset</button>
      </div>
    </div>
  </div>
</div>