{% extends 'edit.html' %}
<!-- This is the modal -->
<div id="itemsModal" uk-modal>
    <div id="itemsModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
        <h2 class="uk-modal-title">Select Item</h2>
        <p>Select an Item from the system...</p>
        <div id="searchItemsForm" onkeydown="searchTable(event, 'items', 'itemsPage')" class="uk-search uk-search-default uk-align-center">
            <input id="searchItemsInput" class="uk-border-pill uk-search-input" type="search" placeholder="" aria-label="">
            <span class="uk-search-icon-flip" uk-search-icon></span>
        </div>
        <nav aria-label="Pagination">
            <ul id="itemsPage" class="uk-pagination uk-flex-center" uk-margin>
                <li><a href="#"><span uk-pagination-previous></span></a></li>
                <li><a href="#">1</a></li>
                <li class="uk-disabled"><span>…</span></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li class="uk-active"><span aria-current="page">7</span></li>
                <li><a href="#">8</a></li>
                <li><a href="#"><span uk-pagination-next></span></a></li>
            </ul>
        </nav>
        <table class="uk-table uk-table-striped uk-table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Barcode</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody id="itemsTableBody">
            </tbody>
        </table>
    </div>
</div>