  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <div class="row my-2">
        <div class="col-md-12">
          <div class="input-group custom-search">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" placeholder="Search..." aria-label="Search">
          </div>
        </div>
      </div>
      <!-- Tabs -->
      <ul class="nav nav-tabs custom-tabs" id="userTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button"
            role="tab">All Users</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="active-tab" data-bs-toggle="tab" data-bs-target="#active" type="button"
            role="tab">Active Users</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="warned-tab" data-bs-toggle="tab" data-bs-target="#warned" type="button"
            role="tab">Warned Users</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="suspended-tab" data-bs-toggle="tab" data-bs-target="#suspended" type="button"
            role="tab">Suspended Users</button>
        </li>
      </ul>

      <!-- Tab Content -->
      <div class="tab-content p-3 border border-top-0" id="userTabsContent">
        <div class="tab-pane fade show active" id="all" role="tabpanel">
          <div class="table-responsive">
            <table class="table table-bordered align-middle">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Warnings</th>
                  <th>2hr Blooks</th>

                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>

                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>


              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="active" role="tabpanel">
          <div class="table-responsive">
            <table class="table table-bordered align-middle">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Warnings</th>
                  <th>2hr Blooks</th>

                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>

                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>


              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="warned" role="tabpanel">
          <div class="table-responsive">
            <table class="table table-bordered align-middle">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Warnings</th>
                  <th>2hr Blooks</th>

                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>

                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>


              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="suspended" role="tabpanel">
          <div class="table-responsive">
            <table class="table table-bordered align-middle">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Warnings</th>
                  <th>2hr Blooks</th>

                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>

                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-proceed">
                    <span class="status-dot"></span>Active
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-reject">
                    <span class="status-dot"></span>Suspend
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>
                <tr>
                  <td>Alice Smith</td>
                  <td>alicesmith@example.com</td>
                  <td>1 warning</td>
                  <td>0 time</td>

                  <td class="status-warn">
                    <span class="status-dot"></span>Warning
                  </td>
                  <td>
                    <button class="btn-warn">Warnings</button>
                    <button class="btn-reject">Suspend</button>
                    <button class="btn-delete">Delete</button>
                  </td>
                </tr>


              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>

  </main>
  <!--end main wrapper-->
