<div class="js-tableFilters row mt-4 mb-3 px-sm-3">
    <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
        <div class="table-search-group mb-lg-0 mb-3">
            <label for="searchForContent" class="table-search-label">
                <i class="bi bi-search"></i>
            </label>
            <input type="search" id="searchForContent" class="table-search-input disable-while-loading" placeholder="search">
        </div>
    </div>
    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-button-controls">
        <div class="d-inline-block">
            <div class="dropdown table-sort-dropdown">
                <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                    <i class="bi bi-sort-alpha-up"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><h6 class="dropdown-header">Sort By</h6></li>
                </ul>
            </div>
        </div>
        <div class="d-inline-block">
            <div class="dropdown table-filter-dropdown">
                <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                    <i class="bi bi-funnel"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><h6 class="dropdown-header">Filter By</h6></li>
                </ul>
            </div>
        </div>
        <div class="d-inline-block">
            <button type="button" class="js-tableRefreshBtn btn btn-outline-secondary rounded-1 disable-while-loading">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
        <div class="d-inline-block">
            <button type="button" class="js-tableDeleteBtn btn btn-danger rounded-1" disabled>
                <i class="bi bi-trash3"></i>
            </button>
        </div>
    </div>
</div>
<div class="js-tableBody table-responsive my-3 px-sm-3">
    <table id="contentTable" class="table table-hover"></table>
</div>
<div class="js-tableControls row px-sm-3 mb-4">
    <div class="col-lg-6">
        <nav class="table-pagination mb-4 mb-lg-0 table-pagination-group"> <!-- TODO: continue here -->
            <ul class="pagination mb-0">
                <li class="page-item">
                    <button type="button" class="page-link page-prev rounded-start-1">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                </li>
                <li class="page-item">
                    <button type="button" class="page-link page-next rounded-end-1">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </li>  
            </ul>
        </nav>
    </div>
    <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
        <label for="contentTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
        <select name="contentTablePageSizer" id="contentTablePageSizer" class="select-2 table-page-sizer disable-while-loading">
            <option value="1">1&emsp;</option>
            <option value="10" selected>10&emsp;</option>
            <option value="15">15&emsp;</option>
            <option value="20">20&emsp;</option>
            <option value="25">25&emsp;</option>
        </select>
        <span class="ms-2">of&nbsp;</span>
        <span class="pageinfo-total text-nowrap">10</span>
    </div>
</div>