Untitled

<template>
    <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
        <div class="slds-col"><!--RECORDS PER PAGE-->
            <div style={controlPagination} class="slds-list_inline slds-p-bottom_xx-small customSelect">
                <label class="slds-text-color_weak slds-p-horizontal_x-small" for="recordsPerPage">Records per page:</label> 
                <div class="slds-select_container">
                    <select class="slds-select" id="recordsPerPage" onchange={handleRecordsPerPage}>
                        <template for:each={pageSizeOptions} for:item="option">
                            <option key={option} value={option}>{option}</option>
                        </template>
                    </select>
                </div>
            </div>
        </div>
        <!--<div class="slds-col">SEARCH BOX
            <div if:true={showSearchBox}>
                <div class="slds-p-horizontal_x-small slds-p-bottom_xx-small">
                    <lightning-input label="" type="search" placeholder="Search by any Col Value" variant="label-hidden" onchange={handleKeyChange}></lightning-input>
                </div>
            </div>
        </div>-->
        <div class="slds-col"><!--PAGE NAVIGATION-->
            <div style={controlPagination}>
                <div class="slds-col slds-p-bottom_xx-small">
                    <span style={controlPrevious}>
                        <lightning-button-icon icon-name="utility:left" variant="bare" size="medium" alternative-text="Previous Page" onclick={previousPage}></lightning-button-icon>
                    </span>
                    <label class="slds-text-color_weak slds-p-horizontal_x-small" for="pageNum">Page:</label> 
                    <input type="number" id="pageNum" value={pageNumber} maxlength="4" onkeypress={handlePageNumberChange} class="customInput" title="Go to a Page"></input>
                    <span>&nbsp;of&nbsp;<b id="totalPages">{totalPages}</b></span>
                    <span style={controlNext}>
                        <lightning-button-icon icon-name="utility:right" variant="bare" size="medium" alternative-text="Next Page" onclick={nextPage} class="slds-p-horizontal_x-small"></lightning-button-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>