<!DOCTYPE html>
<html lang="en" dir="ltr" id="main_html">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title id="title"></title>
        
        
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Material Symbols - Outlined Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
        <!-- Material Symbols - Rounded Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
        <!-- Material Symbols - Sharp Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
        
        <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>


        <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>

    </head>
    <body>
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
            <nav id="navbar" class="uk-navbar-container">
                <div class="uk-container uk-container-expand">
                    <div uk-navbar="dropbar: true">
                        <div id="offcanvas-slide" uk-offcanvas="mode: slide; overlay: true">
                            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
                                <ul class="uk-nav uk-nav-secondary">  
                                    <img class="uk-align-center uk-border-circle" data-src="{{ url_for('static', filename='pictures/logo.jpg') }}" style="width: 150px; height: auto;" uk-img />
                                    <li class="uk-nav-header">Apps</li>
                                    <li>
                                        <a href="/shopping-lists">
                                            <div class="uk-active">Shopping Lists<div class="uk-nav-subtitle" disabled>You are currently browsing shopping lists here...</div></div>
                                        </a>
                                    </li>
                                    <li><a href="/groups">Groups</a></li>
                                    <li><a href="/recipes">Recipes</a></li>
                                    <li class="uk-nav-header">Logistics</li>
                                    <li><a href="/items">Items</a></li>
                                    <li><a href="/transaction">Add Transaction</a></li>
                                    <li><a href="/workshop">Workshop</a></li>
                                    <li><a href="/receipts">Receipts</a></li>
                                    <li class="uk-nav-header">System Management</li>
                                    {% if system_admin %}
                                    <li><a href="/admin">Administration</a></li>
                                    {% endif %}
                                    <li><a href="" class="">{{username}}</a></li>
                                </ul>
                                <button class="uk-button uk-margin-small uk-position-top-right" uk-icon="icon: close" href=""></button>
                            </div>
                        </div>
                        <div class="uk-navbar-left uk-margin-small">
                            <a href="#offcanvas-slide" class="uk-button uk-button-default uk-button-small" uk-icon="icon: menu" uk-toggle></a>
                        </div>
                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
                            <ul class="uk-breadcrumb">
                                <li style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                    <div uk-dropdown="mode: hover">
                                        <ul class="uk-nav uk-dropdown-nav">
                                            {% for site in sites %}
                                            {% if site == current_site  %}
                                            <li><a class="uk-disabled" href="#">{{site}}</a></li>
                                            {% else %}
                                            <li><a onclick="changeSite('{{site}}')">{{site}}</a></li>
                                            {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </li>
                                <li style="cursor: default; user-select: none;"><span>Apps</span></li>
                                <li class="uk-disabled"><span>Shopping Lists</span></li>
                            </ul>
                        </div>
                        <div class="uk-navbar-right">
                            <div>
                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                            </div>
                            <div>
                                <a href="" class="" uk-icon="icon: user" uk-toggle>{{username}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="uk-container">
            <div style="margin-top: 10px; margin-right: 10px;" class="uk-align-right">
                <button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip"><span uk-icon="question"></span>  help</button>
            </div>
            <div class="uk-section">
                <div class="uk-grid-small" uk-grid>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="list_name">Name</label>
                        <div class="uk-form-controls">
                            <input id="list_name" class="uk-input uk-width-1-2@m uk-form-large uk-form-blank" id="list_name" type="text" placeholder="Some text...">
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="list_creation_date">Creation Date</label>
                        <div class="uk-form-controls">
                            <input id="list_creation_date" class="uk-input uk-form-blank uk-width-1-2@m uk-disabled"></input>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="list_description">Description</label>
                        <div class="uk-form-controls">
                            <textarea class="uk-textarea uk-width-1-2@m" id="list_description" type="text" placeholder="Some text..."></textarea>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="list_author">Author</label>
                        <div class="uk-form-controls">
                            <input class="uk-input uk-width-1-2@m uk-disabled uk-form-blank" id="list_author" type="text" placeholder="Some text...">
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="list_type">Type</label>
                        <div class="uk-form-controls">
                            <select class="uk-select uk-width-1-2@m" id="list_type">
                                <option value="plain">Plain List</option>
                                <option value="hybrid">Hybrid List</option>
                                <option value="calculated">Full Calculated List</option>
                            </select>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <hr class="uk-divider-icon">
                    </div>
                    <div class="uk-width-1-1 uk-grid-small" uk-grid>
                        <div class="uk-width-2-3@m">
                            <p class="uk-text-meta">Here are all the currently assigned items in your shopping list!</p>
                        </div>
                        <div class="uk-width-1-3@m">
                            <button id="addLineButton" class="uk-button uk-button-default uk-align-right@m uk-margin-small" type="button">Add Line <span uk-icon="icon: triangle-down"></span></button>
                            <div id="addLineDropDown" uk-dropdown="mode: click">
                                <ul class="uk-nav uk-dropdown-nav">
                                    <li class="uk-nav-header">Line Type</li>
                                    <li><a href="#customModal" uk-toggle>Custom</a></li>
                                    <li><a onclick="openSKUModal()">SKU</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <table class="uk-table uk-table-striped">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>uuid</th>
                                    <th>Name</th>
                                    <th>Operations</th>
                                </tr>
                            </thead>
                            <tbody id="listItemsTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true">
            <div class="uk-offcanvas-bar">
        
                <button class="uk-offcanvas-close" type="button" uk-close></button>
        
                <h3>Shopping Lists</h3>
        
                <p> Shopping lists are meant to be the frontend of your order system. It provides a clear concise way to generate
                    lists for the days you eventually have to order/purhcase things for your inventory.</p>
                
                <h4>Name</h4>
                <p>Your lists name is self explaintory, but must not already exist as a list or you will receive an error. We suggest
                    something that will give the user an idea what might be contained in the list.</p>
                <h4>Description</h4>
                <p>Just like your name, you can provide a more robust description of your shopping list to let users know exactly
                    what to expect from the shopping list!</p>
                <h4>Type</h4>
                <p>The type of your lists is the main backbone of your list. If its a <strong>Plain List</strong> then the only things that will
                    show up when viewing the list will be those you add and the quantity you ask for. If its a <strong>Hybrid</strong> then you will
                    be given the option to add SKU Lines to either be calculated or not and/or custom Lines. those that are not calculated or are add as a custom line will just use
                    the quantity you provide. A <strong>Calculated</strong> list will not allow you to add any items and when viewing it will do all the 
                    background calculations to determine what to generate for the list at the time of viewing.</p>
                <h5>calculated vs. non-calucated</h5>
                <p>Calculated just means the Line or lines will use any assigned safety stock along with what you have in the system for quantity on hand to
                    determine what to inform the user how much they will need to order/purcahse</p>

            </div>
        </div>
        <!-- This is the modal -->
        <!-- Items modal lookup -->
        <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="searchItemTable(event)" 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>
        <div id="customModal" uk-modal>
            <div class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Add Custom Line...</h2>
                <p class="uk-text-meta">A custom Item is an item that does not exist in your system but you would like to show up on your shopping list. This is useful for items 
                    you dont often have to buy or do not want to keep track of but give the users the ability to see it.
                </p>
                <table class="uk-table uk-table-responsive uk-table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Name</td>
                            <td><input id="customName" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>QTY</td>
                            <td><input id="customQty" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>UOM</td>
                            <td><input id="customUOM" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>Main Link</td>
                            <td><input id="customLink" class="uk-input" type="text"></td>
                        </tr>
                    </tbody>
                </table>
                <p class="uk-text-right">
                    <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                    <button id="addCustomButton" onclick="addCustomItem()" class="uk-button uk-button-primary" type="button">Add Line</button>
                </p>
            </div>
        </div>
        <!-- Line Edit Modal-->
        <div id="lineEditModal" uk-modal>
            <div class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Edit Line...</h2>
                <p class="uk-text-meta">Edit any fields here for the selected Line and then save them.</p>
                <table class="uk-table uk-table-responsive uk-table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Calculated</td>
                            <td><input id="lineCalc" class="uk-checkbox" type="checkbox"></td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td><input id="lineName" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>QTY</td>
                            <td><input id="lineQty" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>UOM</td>
                            <td><input id="lineUOM" class="uk-input" type="text"></td>
                        </tr>
                        <tr>
                            <td>Main Link</td>
                            <td><input id="lineLink" class="uk-input" type="text"></td>
                        </tr>
                    </tbody>
                </table>
                <p class="uk-text-right">
                    <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                    <button id="saveLineButton" class="uk-button uk-button-primary" type="button">Save</button>
                </p>
            </div>
        </div>
    </body>
    <script src="{{ url_for('static', filename='handlers/shoppingListEditHandler.js') }}"></script>
    <script>const sl_id = {{id|tojson}}</script>
</html>