<div class="container h-100 d-flex flex-column mt-0" style="max-width: 100%; padding-bottom: 0;">
    <!-- Alert Section -->
    <div class="row">
        <div class=col-sm>
            <div id="view.login.message" class="alert alert-danger">
                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
                <span id="view.login.message.label"></span>
            </div>
        </div>
    </div>

    <!-- Actions Row -->
    <div class="row mt-3 justify-content-center">
        <div class="col-auto d-flex align-items-center">
            <label class="mt-3" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
        </div>
        <div class="col-auto d-flex align-items-center">
            <label class="mt-3" style="font-weight: 700;">Order By: <select class="custom-select" id="wlcborderby" style="font-size: 1.00rem;"></select></label>
        </div>
        <div class="col-auto">
            <button id="btnaddorder" class="btn btn-secondary mt-3">Add Order</button>
        </div>
        <div class="col-auto">
            <button id="btnsetstatus" class="btn btn-secondary mt-3">Set Status</button>
        </div>
        <div class="col-auto">
            <button id="btngeneratepdf" class="btn btn-secondary mt-3" type="button">Generate PDF</button>
            <div class="invalid-feedback">
                No order selected. Please select an order to generate a PDF.
            </div>
        </div>
        <div class="col-auto">
            <button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
        </div>
    </div>

    <!-- Entries Label Section d-flex justify-content-between w-100 mt-2-->
    <div class="row">
        <div class="col-auto">
            <label id="lblentries"></label>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <input id="edtsearch" type="text" class="form-control" style="width: 100%;"/>
        </div>
    </div>

    <!-- Table Section -->
    <div id="order_table_section" class="overflow-auto mt-2"
         style="max-height: calc(100vh - 250px); padding-bottom: 0; width: 100%;">
        <table id="tblPhoneGrid" class="table table-striped table-bordered" style="width: 100%;">
            <thead class="sticky-top thead-light">
                <tr style="font-size: 0.875rem;">
                    <!-- Table headers are dynamically generated -->
                </tr>
            </thead>
            <tbody id="orderTableBody" class="align-middle">
                <!-- Table rows are dynamically generated -->
            </tbody>
        </table>
    </div>

    <!-- Pagination Section -->
    <div class="d-flex justify-content-center w-100 mt-4">
        <nav aria-label="Page navigation">
            <ul id="pagination" class="pagination">
                <!-- Pagination items added dynamically -->
            </ul>
        </nav>
    </div>
</div>