Tables

              
                <!-- Card -->
                <div class="card">
                  <div class="card-header">
                    <h5 class="card-header-title">Your team</h5>
                  </div>

                  <!-- Table -->
                  <div class="table-responsive">
                    <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                      <thead class="thead-light">
                        <tr>
                          <th>Name</th>
                          <th>Status</th>
                          <th>Access</th>
                          <th style="width: 5%;"></th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
                                </a>
                                <small class="d-block">amanda@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive1" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive1" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin1" selected>Admin</option>
                              <option value="memberStatusLabelCanEdit1">Can edit</option>
                              <option value="memberStatusLabelCanView1">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Locked">
                              <i class="bi-lock-fill"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Anne Richard</h6>
                                </a>
                                <small class="d-block">anne@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive2" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive2" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin2">Admin</option>
                              <option value="memberStatusLabelCanEdit2" selected>Can edit</option>
                              <option value="memberStatusLabelCanView2">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="avatar avatar-sm avatar-warning avatar-circle">
                                  <span class="avatar-initials">FH</span>
                                </span>
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Finch Hoot</h6>
                                </a>
                                <small class="d-block">finch@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive4" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive4" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin4">Admin</option>
                              <option value="memberStatusLabelCanEdit4">Can edit</option>
                              <option value="memberStatusLabelCanView4" selected>Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">David Harrison <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
                                </a>
                                <small class="d-block">david@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive3" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive3" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin3">Admin</option>
                              <option value="memberStatusLabelCanEdit3" selected>Can edit</option>
                              <option value="memberStatusLabelCanView3">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="avatar avatar-sm avatar-danger avatar-circle">
                                  <span class="avatar-initials">SD</span>
                                </span>
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Sean Dean</h6>
                                </a>
                                <small class="d-block">bob@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive5" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive5" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin5">Admin</option>
                              <option value="memberStatusLabelCanEdit5" selected>Can edit</option>
                              <option value="memberStatusLabelCanView5">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Sam Kart <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
                                </a>
                                <small class="d-block">sam@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive6" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive6" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin6">Admin</option>
                              <option value="memberStatusLabelCanEdit6">Can edit</option>
                              <option value="memberStatusLabelCanView6" selected>Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Ella Marley</h6>
                                </a>
                                <small class="d-block">ella@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive7" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive7" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin7">Admin</option>
                              <option value="memberStatusLabelCanEdit7" selected>Can edit</option>
                              <option value="memberStatusLabelCanView7">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="avatar avatar-sm avatar-dark avatar-circle">
                                  <span class="avatar-initials">RD</span>
                                </span>
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Rachel Doe <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
                                </a>
                                <small class="d-block">rachel@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive8" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive8" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin8">Admin</option>
                              <option value="memberStatusLabelCanEdit8" selected>Can edit</option>
                              <option value="memberStatusLabelCanView8">Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                        
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="avatar avatar-sm avatar-primary avatar-circle">
                                  <span class="avatar-initials">BH</span>
                                </span>
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <a class="d-inline-block link-dark" href="#">
                                  <h6 class="text-hover-primary mb-0">Brian Halligan</h6>
                                </a>
                                <small class="d-block">brian@example.com</small>
                              </div>
                            </div>
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelActive9" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                              <option value="memberStatusLabelInactive9" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <!-- Select -->
                            <select class="js-select form-select form-select-sm">
                              <option value="memberStatusLabelAdmin9">Admin</option>
                              <option value="memberStatusLabelCanEdit9">Can edit</option>
                              <option value="memberStatusLabelCanView9" selected>Can view</option>
                            </select>
                            <!-- End Select -->
                          </td>
                          <td>
                            <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                              <i class="bi-trash"></i>
                            </a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- End Table -->

                  <!-- Footer -->
                  <div class="card-footer border-top">
                    <div class="d-flex justify-content-end gap-3">
                      <a class="btn btn-white" href="javascript:;">Cancel</a>
                      <a class="btn btn-primary" href="javascript:;">Save changes</a>
                    </div>
                  </div>
                  <!-- End Footer -->
                </div>
                <!-- End Card -->
              
            

              
                <link rel="stylesheet" href="../assets/vendor/tom-select/dist/css/tom-select.bootstrap5.css">
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/tom-select/dist/js/tom-select.complete.min.js"></script>

                <!-- JS Front -->

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SELECT
                    // =======================================================
                    HSCore.components.HSTomSelect.init('.js-select', {
                      render: {
                        'option': function(data, escape) {
                          return data.optionTemplate
                        },
                        'item': function(data, escape) {
                          return data.optionTemplate
                        }
                      }
                    })
                  })()
                </script>