<!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>
        <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
        
        <!-- 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') }}"/>
        {% if session['user']['flags']['darkmode'] %}
        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
        {% endif %}


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

    </head>
    <style>
    :root {
        --primary-color: {{ session['user']['flags']['styles']['primary_color']}};
    }
    </style>
    {% if session['user']['flags']['darkmode'] %}
    <body class="uk-light">
    {% else %}
    <body>
    {% endif %}
        <nav class="uk-navbar-container">
            <div class="uk-container uk-container-expand">
                <div class="uk-navbar uk-navbar-primary">
                    <!-- Application Navigation-->
                    <div class="uk-navbar-left">
                        <ul class="uk-navbar-nav">
                            <li>
                                <a href>Apps</a>
                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                        <li><a href="/planner">Planner</a></li>
                                        <li><a href="/recipes">Recipes</a></li>
                                        <li><a href="/shopping-lists">Shopping Lists</a></li>
                                        <li class="uk-nav-header">Logistics</li>
                                        <li><a href="/items">Items</a></li>
                                        <li><a href="/items/transaction">Transaction</a></li>
                                        <li><a href="/receipts">Receipts</a></li>
                                        <li class="uk-nav-header">Points of Ease</li>
                                        <li><a href="/poe/scanner">Transaction Scanner</a></li>
                                        <li><a href="/poe/receipts">Receipts Scanner</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <!-- Breadcrumbs Navigation -->
                    <div class="uk-navbar-center uk-visible@m">
                        <ul class="uk-breadcrumb uk-margin-remove">
                            <li class="uk-disabled" style="cursor: pointer;"><span><strong>{{current_site}}</strong></span>
                                <div uk-dropdown="mode: hover">
                                    <ul class="uk-nav uk-dropdown-nav">
                                        <li class="uk-nav-header">Select Site</li>
                                        <li class="uk-nav-divider"></li>
                                        {% 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;" class="uk-disabled"><span>Modules</span></li>
                            <li class="uk-disabled"><span>Shopping Lists</span></li>
                            <li class="uk-disabled"><span>Editing Shopping List</span></li>
                        </ul>
                    </div>
                    <!-- Profile/Management Navigation-->
                    <div class="uk-navbar-right">
                        <ul class="uk-navbar-nav">
                            <li>
                                <a href="#">
                                    <img src="{{session['user']['profile_pic_url']}}" alt="Profile Picture" class="profile-pic uk-visible@m" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 5px;">
                                            {{username}}
                                </a>
                                <div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false">
                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                        <li><a href="/profile">Profile</a></li>
                                        <li><a onclick="toggleDarkMode()">Dark Mode</a></li>
                                        <li><a href="/site-management">Site Management</a></li>
                                        <li><a href="/administration">System Management</a></li>
                                        <li><a href="/access/logout">Logout</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <div class="uk-container">
            <div class="uk-section">
                <div class="uk-grid-small" uk-grid>
                    <div class="uk-width-1-1">
                        <h1 class="uk-heading-medium uk-heading-divider">Generate Shopping List</h1>
                    </div>
                    <div class="uk-width-1-1">
                        <p class="uk-text-small">Generating a shopping list is as powerful as you wish to make it. In this form you will make the choices of what and when you want to 
                            generate the list for. You will be adding specific items in the system, even can add all the safety stock items or specific ones, recipes, even other shopping lists
                            can be added to this one list. This is a snapshot of a moment though and any calculated safety stocks become static and can change if there is a long wait.
                        </p>
                    </div>
                    <!-- type section -->
                    <div class="uk-width-1-1">
                        <h1 class="uk-heading-xsmall uk-heading-divider">Shopping List Type</h1>
                    </div>
                    <div class="uk-width-1-1">
                        <p class="uk-text-small">Choosing the shopping list type informs the system of your intent when actually using the list when viewed. It will inform the system if it should 
                            completely delete the list (known as a "Temporary" list) or if it should just change the states of all items to new (known as a "Permanent" list). Permanent lists would be used
                            for reoccuring lists that never change and can be reused. Temporary lists will generally be used when generating a huge one time list, or something small that you just want to
                            track quickly.
                        </p>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="generated_list_type">Select List Type</label>                            
                        <select id="generated_list_type" class="uk-select" aria-label="Select">
                            <option value="temporary" selected>Temporary</option>
                            <option value="permanent">Permanent</option>
                        </select>
                    </div>
                    <!-- basic info section -->
                    <div class="uk-width-1-1">
                        <h1 class="uk-heading-xsmall uk-heading-divider">Shopping List Info</h1>
                    </div>
                    <div class="uk-width-1-1">
                        <p class="uk-text-small">Fill out the basic info asked for here, the description could be helpful to remind yourself and others what the list was generated for. 
                            The shopping list name must be unique!
                        </p>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="generated_list_name">Shopping List Name</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="generated_list_name" type="text" placeholder="Enter list name here...">
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <label class="uk-form-label" for="generated_list_description">Shopping List Description</label>
                        <div class="uk-form-controls">
                            <textarea id="generated_list_description" class="uk-textarea" rows="5" placeholder="Enter list description here..." aria-label="Textarea"></textarea>                        
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <button onclick="postGenerateList()" class="uk-button uk-button-primary uk-align-right">Generate List</button>
                    </div>
                    <!-- Part section -->
                    <div class="uk-width-1-1">
                        <h1 class="uk-heading-xsmall uk-heading-divider">Shopping List Operators</h1>
                    </div>
                    <div class="uk-width-1-1">
                        <p class="uk-text-small"> Operators are what drives the engine that is a shopping list. You can configure each on specifically for the list you
                            want to generate and each will operate in their own manner behind the scenes.
                        </p>
                    </div>
                    <div class="uk-width-1-1">
                        <button class="uk-button uk-button-primary" type="button">Add Operator</button>
                        <div uk-dropdown>
                            <ul class="uk-nav uk-dropdown-nav">
                                <li class="uk-nav-header">Active Operators</li>
                                <li class="uk-nav-divider"></li>
                                <li><a onclick="addCustomItemsCard()" uk-tooltip="title: Create Custom items to add into the generated list.; pos: right">Custom Items</a></li>
                                <li><a onclick="addUncalculatedItemsCard()" uk-tooltip="title: Add items from the system that take a static quantity into the generated list.; pos: right">Un-Calculated System Items</a></li>
                                <li><a onclick="addCalculatedItemsCard()" uk-tooltip="title: Add items from the system that calculate quantity using quantity on hand and a set safety stocks into the generated list.; pos: right">Calculated System Items</a></li>
                                <li><a onclick="addRecipesCard()" uk-tooltip="title: Add Recipes that will take all the ingrediants and add them into the generated list.; pos: right">System Recipes</a></li>
                                <li><a onclick="addFullSKUCard()" uk-tooltip="title: Takes a full safety stock count from the system and adds any quantities below their safety stocks into the generated list.; pos: right">Full System Calculated</a></li>
                                <li><a onclick="addPlannerCard()" uk-tooltip="title: Uses a date range and selected planners for each to add any planned recipes into the generated list.; pos: right">Site Planners</a></li>
                                <li><a onclick="addListsCard()" uk-tooltip="title: Combine already made lists into this one; pos: right">Shopping Lists</a></li>

                            </ul>
                        </div>
                    </div>
                    <div class="uk-width-1-1">
                        <div id="operators_deck" class="uk-grid-small uk-child-width-1-1" uk-grid>
                            <!-- Items Custom -->
                            <div id="customItemsCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Custom Items Operator
                                        <span class="">
                                            <button onclick="changeCustomZoneState()" class="uk-button uk-button-small" title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removeCustomItemsCard()" class="uk-button uk-button-small" title="Will remove the custom items card and data from the list." uk-tooltip>Remove</button>
                                        </span>
                                    </h3>
                                    <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>
                                    <div id="customCardZone">
                                        <table class="uk-table uk-table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Qty/UOM</th>
                                                    <th>Operations</th>
                                                </tr>
                                            </thead>
                                            <tbody id="customItemsTableBody"></tbody>
                                        </table>
                                        <button onclick="openCustomItemsModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Items Uncalculated -->
                            <div id="uncalcedItemsCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Un-Calculated System Item Operator
                                        <span class="">
                                            <button onclick="changeUncalculatedZoneState()" class="uk-button uk-button-small"  title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removeUncalcedItemsCard()" class="uk-button uk-button-small"  title="Will remove the uncalculated system items card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta"> An Uncalulated System Item is an item choosen from the configured SKUs in your 
                                            system. The uncalculated part means the quantity asked for in the list will always remain to be what 
                                            you set it to during configuration of the list or while editing.
                                        </p>

                                    <div id="uncalculatedCardZone">
                                        <table class="uk-table uk-table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Qty/UOM</th>
                                                    <th>Operations</th>
                                                </tr>
                                            </thead>
                                            <tbody id="uncalculatedItemsTableBody"></tbody>
                                        </table>
                                        <button onclick="openUncalculatedItemsModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Items Calculated -->
                            <div id="calculatedItemsCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Calculated System Item Operator
                                        <span class="">
                                            <button onclick="changeCalculatedZoneState()" class="uk-button uk-button-small"  title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removeCalculatedItemsCard()" class="uk-button uk-button-small"  title="Will remove the calculated system items card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta"> A Calculated System Item is an item choosen from the configured SKUs in your 
                                            system. The calculated part means the quantity asked for in the list will be calculated at the time 
                                            that the list is generated based on set safety stock and quantity on hand.
                                        </p>

                                    <div id="calculatedCardZone">
                                        <table class="uk-table uk-table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Operations</th>
                                                </tr>
                                            </thead>
                                            <tbody id="calculatedItemsTableBody"></tbody>
                                        </table>
                                        <button onclick="openCalculatedItemsModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Recipes -->
                            <div id="recipesCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Recipes Operator
                                        <span class="">
                                            <button onclick="changeRecipesZoneState()" class="uk-button uk-button-small"  title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removeRecipesItemsCard()" class="uk-button uk-button-small"  title="Will remove the Recipes card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta">Recipes can be built into the system and when added through this operator each ingrediant will be added to the list at the recipes quantity and UOM.</p>

                                    <div id="recipesCardZone">
                                        <table class="uk-table uk-table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Operations</th>
                                                </tr>
                                            </thead>
                                            <tbody id="recipesTableBody"></tbody>
                                        </table>
                                        <button onclick="openRecipesModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Shopping List -->
                            <div id="listsCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Shopping Lists Operator
                                        <span class="">
                                            <button onclick="changeListsZoneState()" class="uk-button uk-button-small"  title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removeListsItemsCard()" class="uk-button uk-button-small"  title="Will remove the Recipes card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta">This operator allows you to select other shopping lists that already exist to have their 
                                        items added onto this lists items.
                                    </p>
                                    <div id="listsCardZone">
                                        <table class="uk-table uk-table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Operations</th>
                                                </tr>
                                            </thead>
                                            <tbody id="listsTableBody"></tbody>
                                        </table>
                                        <button onclick="openListsModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Full Calculated SKU -->
                            <div id="fullSKUCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Full Calculation Operator
                                        <span class="uk-align-right">
                                            <button onclick="removeFullSKUCard()" class="uk-button uk-button-small"  title="Will remove the Recipes card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta">Full SKU calculations will go through your whole system and grab all items that have safety stocks. 
                                        It will then use the safety stocks and quantity on hand to determine if you need to purchase more to add to the list. With 
                                        this in mind you CANNOT have full SKU calculation enabled and also have the Calculated Items Operator.
                                    </p>

                                    <div id="fullSKUZone" uk-grid>
                                        <div class="uk-width-1-1">
                                            <label><input autocomplete="off" id="fullSKUCheckbox" onclick="fullSKUEnabledChange(event)" class="uk-checkbox" type="checkbox"> Enabled</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Full Calculated SKU -->
                            <div id="plannerCard" hidden>
                                <div class="uk-card uk-card-default uk-card-small uk-card-body">
                                    <h3>Site Planner Operator
                                        <span class="">
                                            <button onclick="changePlannerZoneState()" class="uk-button uk-button-small"  title="Show/Hide the card body." uk-tooltip>Show/Hide</button>
                                        </span>
                                        <span class="uk-align-right">
                                            <button onclick="removePlannerCard()" class="uk-button uk-button-small"  title="Will remove the Recipes card and data from the list." uk-tooltip >Remove</button>
                                        </span>
                                    </h3>
                                    <p class="uk-text-meta">Site Planner Operators allow you to select specific plans and a date range on that planner to insert any planned recipes into the list. This is best
                                        utilized without the Recipe Operator, but it has been allowed to have both. Currently you can only have one date range for a plan. If you 
                                        do attempt to add from the same plan twice it will overwrite the last date range.
                                    </p>
                                    <div id="plannerZone" uk-grid>
                                        <div class="uk-width-1-1">
                                            <table class="uk-table uk-table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Plan Name</th>
                                                        <th>Start Date</th>
                                                        <th>End Date</th>
                                                        <th>Operations</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="plannerTableBody"></tbody>
                                            </table>
                                            <button onclick="openPlannerModal()" class="uk-button uk-button-secondary uk-width-1-1">Add Item</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                    
            <div id="modals_deck">
                <!-- Custom Item Modal -->
                <div id="CustomItemModal" class="uk-modal">
                    <div class="uk-modal-dialog uk-modal-body">
                        <h2 class="uk-modal-title">Add Custom Line...</h2>
                        <p class="uk-text-small">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="number"></td>
                                </tr>
                                <tr>
                                    <td>UOM</td>
                                    <td>
                                        <select id="customUnit" class="uk-select" aria-label="Select">
                                            {% for unit in units %}
                                            <option value={{unit['id']}} data-fullname={{unit['fullname']}}>{{unit['fullname']}}</option>
                                            {% endfor %}
                                        </select>
                                    </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="customItemModalButton" onclick="addCustomItem()" class="uk-button uk-button-primary" type="button">Add Line</button>
                        </p>
                    </div>
                </div>
                <!-- Uncalculated Item Modals -->
                <div id="uncalculatedItemModal" class="uk-flex-top" uk-modal>
                    <div class="uk-modal-dialog">
                        <button class="uk-modal-close-default" type="button" uk-close></button>
                        <div class="uk-modal-header">
                            <h2 class="uk-modal-title">System Item Search</h2>
                        </div>
                        <div id="paginationModalBody" class="uk-modal-body">
                            <div class="uk-grid-small" uk-grid>
                                <div class="uk-width-1-1">
                                    <p class="uk-text-small"> An Uncalulated System Item is an item choosen from the configured SKUs in your 
                                        system. The uncalculated part means the quantity asked for in the list will always remain to be what 
                                        you set it to during configuration of the list or while editing.
                                    </p>
                                </div>
                                <div class="uk-width-1-1">
                                    <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>
                                </div>
                                <div class="uk-width-1-1">
                                    <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>
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>Select an Item from the system...</caption>
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Qty</th>
                                                <th>UOM</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="uncalculatedItemsModalTableBody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="uncalculatedItemModalEdit" class="uk-modal">
                    <div class="uk-modal-dialog uk-modal-body">
                        <h2 class="uk-modal-title">Edit Uncalulated Item...</h2>
                        <p class="uk-text-small"> An Uncalulated System Item is an item choosen from the configured SKUs in your 
                            system. The uncalculated part means the quantity asked for in the list will always remain to be what 
                            you set it to during configuration of the list or while editing.
                        </p>
                        <div class="uk-alert uk-alert-warning">While editing System Items the <strong>Name</strong> and <strong>UOM</strong> inputs will be Disabled!</div>
                        <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="uncalculatedItemName" class="uk-input uk-disabled" type="text"></td>
                                </tr>
                                <tr>
                                    <td>QTY</td>
                                    <td><input id="uncalculatedItemQty" class="uk-input" type="number"></td>
                                </tr>
                                <tr>
                                    <td>UOM</td>
                                    <td>
                                        <select id="uncalculatedItemUnit" class="uk-select uk-disabled" aria-label="Select">
                                            {% for unit in units %}
                                            <option value={{unit['id']}} data-fullname={{unit['fullname']}}>{{unit['fullname']}}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Main Link</td>
                                    <td><input id="uncalculatedItemLink" 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="uncalculatedItemModalEditButton" class="uk-button uk-button-primary" type="button">Add Line</button>
                        </p>
                    </div>
                </div>
                <!-- Calculated Item Modals -->
                <div id="calculatedItemModal" class="uk-flex-top" uk-modal>
                    <div class="uk-modal-dialog">
                        <button class="uk-modal-close-default" type="button" uk-close></button>
                        <div class="uk-modal-header">
                            <h2 class="uk-modal-title">System Item Search</h2>
                        </div>
                        <div class="uk-modal-body">
                            <div class="uk-grid-small" uk-grid>
                                <div class="uk-width-1-1">
                                    <p class="uk-text-small"> A Calculated System Item is an item choosen from the configured SKUs in your 
                                    system. The calculated part means the quantity asked for in the list will be calculated at the time 
                                    that the list is generated based on set safety stock and quantity on hand.
                                    </p>
                                </div>
                                <div class="uk-width-1-1">
                                    <div id="searcCalculatedItemsForm" onkeydown="searchCalculatedItemTable(event)" class="uk-search uk-search-default uk-align-center">
                                        <input id="searchCalculatedItemsInput" class="uk-border-pill uk-search-input" type="search" placeholder="" aria-label="">
                                        <span class="uk-search-icon-flip" uk-search-icon></span>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <nav aria-label="Pagination">
                                        <ul id="itemsCalculatedPage" 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>
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>Select an Item from the system...</caption>
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="calculatedItemsModalTableBody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Recipes Modals -->
                <div id="recipesModal" class="uk-flex-top" uk-modal>
                    <div class="uk-modal-dialog">
                        <button class="uk-modal-close-default" type="button" uk-close></button>
                        <div class="uk-modal-header">
                            <h2 class="uk-modal-title">System Recipes Search</h2>
                        </div>
                        <div class="uk-modal-body">
                            <div class="uk-grid-small" uk-grid>
                                <div class="uk-width-1-1">
                                    <p class="uk-text-small">Recipes can be built into the system and when added through this operator each ingrediant will be added to the list at the recipes quantity and UOM.</p>
                                </div>
                                <div class="uk-width-1-1">
                                    <div id="searchRecipesForm" onkeydown="searchRecipesTable(event)" class="uk-search uk-search-default uk-align-center">
                                        <input id="searchRecipesInput" class="uk-border-pill uk-search-input" type="search" placeholder="" aria-label="">
                                        <span class="uk-search-icon-flip" uk-search-icon></span>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <nav aria-label="Pagination">
                                        <ul id="recipesPage" 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>
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>Select a Recipe from the system...</caption>
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="recipesModalTableBody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Shopping Lists Modals -->
                <div id="listsModal" class="uk-flex-top" uk-modal>
                    <div class="uk-modal-dialog">
                        <button class="uk-modal-close-default" type="button" uk-close></button>
                        <div class="uk-modal-header">
                            <h2 class="uk-modal-title">System Shopping Lists Search</h2>
                        </div>
                        <div class="uk-modal-body">
                            <div class="uk-grid-small" uk-grid>
                                <div class="uk-width-1-1">
                                    <p class="uk-text-small">This operator allows you to select other shopping lists that already exist to have their 
                                        items added onto this lists items.</p>
                                </div>
                                <div class="uk-width-1-1">
                                    <div id="searchListsForm" onkeydown="searchListsTable(event)" class="uk-search uk-search-default uk-align-center">
                                        <input id="searchListsInput" class="uk-border-pill uk-search-input" type="search" placeholder="" aria-label="">
                                        <span class="uk-search-icon-flip" uk-search-icon></span>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <nav aria-label="Pagination">
                                        <ul id="listsPage" 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>
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>Select a List from the system...</caption>
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="listsModalTableBody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Site Planner Modal -->
                <div id="plannerModal" class="uk-modal">
                    <div class="uk-modal-dialog uk-modal-body">
                        <h2 class="uk-modal-title">Add Planner Date Range...</h2>
                        <p class="uk-text-small">Site Planner Operators allow you to select specific plans and a date range on that planner to insert any planned recipes into the list. This is best
                            utilized without the Recipe Operator, but it has been allowed to have both.
                        </p>
                        <table class="uk-table uk-table-responsive uk-table-striped">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Plan</td>
                                    <td>
                                        <select id="planUUID" class="uk-select" aria-label="Select">
                                            <option value="site">Site Planner</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Start Date</td>
                                    <td><input id="planStartDate" class="uk-input" type="date"></td>
                                </tr>
                                <tr>
                                    <td>End Date</td>
                                    <td><input id="planEndDate" class="uk-input" type="date"></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="plannerModalButton" onclick="addPlanner()" class="uk-button uk-button-primary" type="button">Add Planner</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>const units = {{units|tojson}}</script>
    <script src="{{ url_for('shopping_list_API.static', filename='js/shoppingListGeneratorHandler.js') }}"></script>
</html>
