<!DOCTYPE html>
<html lang="en" dir="ltr">
    <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 rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>

        <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>
        .add-button{
            width: 100%;
            border-radius: 10px; 
            margin-top: 10px; 
            background-color: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
        }
        .add-button:hover{
            background-color: whitesmoke;
        }
    </style>
    <body>
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
            <!-- to color the navbar i have to stlye this element the nav element -->
            <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">Shopping Lists</a></li>
                                    <li><a href="/recipes">Recipes</a></li>
                                    <li class="uk-nav-header">Logistics</li>
                                    <li>
                                        <a href="/items">
                                            <div class="uk-active">Items<div class="uk-nav-subtitle" disabled>You are currently editing an item...</div>
                                        </div>
                                    </a>
                                    <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-small" uk-icon="icon: menu" uk-toggle> menu</a>
                        </div>
                        <div class="uk-navbar-center uk-margin-small uk-visible@m">
                            <ul class="uk-breadcrumb">
                                <li style="cursor: default; user-select: none;"><span><strong>{{current_site}}</strong></span></li>
                                <li style="cursor: default; user-select: none;"><span>Logistics</span></li>
                                <li><a href="/items">Items</a></li>
                                <li class="uk-disabled"><span>Editing Item</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 class="uk-section">
                <div uk-grid>
                    <!-- Barcode -->
                    <div class="uk-width-1-1 uk-margin">
                        <h1 id="itemBarcode" class="uk-heading-medium">test</h1>
                    </div>
                    <p class="uk-text-meta">This is where you will spend alot of time editing and refining what data is associated 
                        with the selected SKU. This data is used across the apps to bring larger functionality and an understanding
                        of how this data is used in each app is required to make sure you dont change anything unexpectantly.
                    </p>
                    <!-- Item Name -->
                    <div class="uk-width-1-1 uk-margin">
                        <label class="uk-form-label" for="itemName">Item Common Name</label>
                        <input onchange="nameChanged()" style="" id="itemName" class="uk-input uk-form-blank uk-form-large" type="text" placeholder="test">
                    </div>
                    <!-- Item Brand -->
                    <div class="uk-width-1-1 uk-grid-small uk-margin" uk-grid>
                        <div class="uk-width-1-2">
                            <label class="uk-form-label" for="itemBrand">Item Brand</label>
                            <input id="itemBrand" class="uk-input uk-disabled" type="text">
                        </div>
                        <div class="uk-width-1-2 uk-margin-auto-top">
                            <button onclick="openBrandsModal('brand', 'brandsPage')" class="uk-button uk-button-default uk-margin-remove-left">Select Brand</button>
                        </div>
                    </div>
                    <!-- item types -->
                    <div class="uk-width-1-1 uk-margin">
                        <div uk-grid>
                            <div class="uk-width-1-2">
                                <caption>Item Type</caption>
                                <select onchange="selectChanged('row_type')" id="itemTypeSelect" class="uk-select">
                                </select>
                            </div>
                            <div class="uk-width-1-2">
                                <caption>Item Subtype</caption>
                                <select onchange="selectChanged('item_type')" id="itemSubTypeSelect" class="uk-select">
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- Item Description -->
                    <div class="uk-width-1-1 uk-margin">
                        <label class="uk-form-label" for="itemDescription">SKU Description</label>
                        <textarea onchange="descriptionChanged()" id="itemDescription" name="test" class="uk-textarea" placeholder="This is the items description..."></textarea>
                    </div>
                    <!-- Tags -->
                    <div class="uk-width-1-1 uk-margin">
                        <p style="color: red;" class="uk-hidden@s">Tags are currently hidden on smaller screens for development reasons...</p>
                        <table class="uk-visible@s uk-table uk-table-striped uk-table-small">
                            <caption>List out Item tags for filtering purposes...</caption>
                            <thead>
                                <tr>
                                    <th class="uk-table-expand">Tags</th>
                                    <th class="uk-width-1-4 uk-text-nowrap"><input onkeydown="addTag(event)" class="uk-input uk-form-small" type="text" id="tagInput" placeholder="Add a tag..."></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="tagsRow" class="uk-table-expand"></td>
                                    <td class="uk-text-nowrap"><button onclick="addTag(event)" class="uk-align-right uk-button uk-button-small uk-button-default">Add Tag</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- Weblinks -->
                    <div class="uk-width-1-1 uk-margin">
                        <table class="uk-table uk-table-striped">
                            <caption>Listed out links associated with this Item; its recommended that you have at least a "main" link...</caption>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="uk-table-expand uk-text-truncate">Web Link</th>
                                    <th class="uk-width-1-4">
                                        <span>
                                            <button class="uk-button uk-button-small uk-button-default uk-align-right uk-margin-remove" uk-toggle="target: #addWeblinkModal" type="button">Add Weblink</button>
                                        </span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id='weblinksTableBody'>
                            <!-- populates with javascript -->
                            </tbody>
                        </table>
                    </div>
                    <!-- Tabs Element; references, food info, logistics, purchasing, packaging, linked items  -->
                    <div class="uk-width-1-1 uk-margin">
                        <ul class="uk-flex-center" uk-tab>
                            <li class="uk-active"><a href="#">References</a></li>
                            <li><a herf="#">Purchasing/Packaging</a></li>
                            <li><a href="#">Food Info</a></li>
                            <li><a href="#">Logistics Info</a></li>
                            <li id="linkedListLink" class="uk-disabled"><a>Linked Items</a></li>
                            <li><a href="#">Search String</a></li>

                        </ul>
                        <div class="uk-switcher uk-margin">
                            <!-- References -->
                            <div uk-grid>
                                <div class="uk-width-1-1">
                                    <table class="uk-width-1-1 uk-table uk-table-striped">
                                        <caption>These are all the place in the apps that this item is referenced...</caption>
                                        <thead>
                                            <tr>
                                                <th class="uk-width-1-4">Reference type</th>
                                                <th class="uk-width-3-4 uk-table-expand uk-text-truncate">Reference Name</th>
                                            </tr>
                                        </thead>
                                        <tbody id="referenceTableBody">
                                        <!-- populated by javascript -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Purchasing/Packaging -->
                            <div uk-grid>
                                <div class="uk-width-1-1" uk-grid>
                                    <div class="uk-width-1-6@s">
                                        <label class="uk-form-label" for="safetyStock">Safety Stock</label>
                                        <input onchange="itemInfoChanged('safety_stock')" class="uk-input" id="safetyStock" type="text" placeholder="Some text...">
                                    </div>
                                    <div class="uk-width-1-6@s">
                                        <label class="uk-form-label" for="leadTimeInDays">Lead Time (days)</label>
                                        <input onchange="itemInfoChanged('lead_time_days')" class="uk-input" id="leadTimeInDays" type="text" placeholder="Some text...">
                                    </div>
                                    <div class="uk-width-1-6@s">
                                        <label class="uk-form-label" for="skuCost">Cost</label>
                                        <input onchange="itemInfoChanged('cost')" class="uk-input" id="skuCost" type="text" placeholder="">
                                    </div>
                                    <div class="uk-width-1-6@s">
                                        <label class="uk-form-label" for="uom_quantity">Single Quantity</label>
                                        <input onchange="itemInfoChanged('uom_quantity')" class="uk-input" id="uom_quantity" type="text" placeholder="">
                                    </div>
                                    <div class="uk-width-1-6@s">
                                        <label class="uk-form-label" for="uom">Unit of Measure</label>
                                        <select onchange="itemInfoChanged('uom')" id="uom" class="uk-select" aria-label="Custom controls">
                                        {% for unit in units %}
                                            <option value="{{unit['id']}}">{{unit['fullname']}}</option>
                                        {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <div>
                                        <label class="uk-form-label" for="packaging">Packaging Description</label>
                                        <input onchange="itemInfoChanged('packaging')" class="uk-input" id="packaging" type="text" placeholder="This is an example of a box of examples...">
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <label><input onclick="itemInfoChanged('ai_pick')" id="aiPickableCheckbox" class="uk-checkbox" type="checkbox"> <strong>AI Pickable</strong> - this determines if this item is used in AI systems.</label>
                                </div>
                                <div class="uk-width-1-2@m">
                                    <caption class="uk-text-meta">Here are all the prefixes that have been set up for this SKU</caption>
                                    <table style="margin-bottom: 0px;" class="uk-table uk-table-striped">
                                        <tbody id="prefixesTableBody">
                                        </tbody>
                                    </table>
                                    <button onclick="openAddPrefixesModal()" class="uk-button add-button"><i class="uk-flex-middle material-symbols-outlined" style="">add_circle</i></button>
                                </div>
                                <div class="uk-width-1-2@m">
                                    <caption class="uk-text-meta">Here are all the conversions that have been set up for this SKU</caption>
                                    <table style="margin-bottom: 0px;" class="uk-table uk-table-striped">
                                        <tbody id="conversionsTableBody">
                                        </tbody>
                                    </table>
                                    <button onclick="openAddConversionsModal()" class="uk-button add-button"><i class="uk-flex-middle material-symbols-outlined" style="">add_circle</i></button>
                                </div>
                            </div>
                            <!-- Food Info-->
                            <div uk-grid>
                                <div class="uk-width-1-1">
                                    <label><input onclick="foodInfoChanged('expires')" id="expiresCheckbox" class="uk-checkbox" type="checkbox"> <strong>Expires</strong> - this determines if this item expires.</label>
                                </div>
                                <div class="uk-width-1-6@s uk-margin-small">
                                    <div>
                                        <label class="uk-form-label" for="expirePeriod">Default Expiration Period</label>
                                        <input onchange="foodInfoChanged('default_expiration')" class="uk-input" id="expirePeriod" type="text" placeholder="Days">
                                    </div>
                                </div>
                                <div class="uk-width-1-1 uk-margin">
                                    <p style="color: red;" class="uk-hidden@s">Food Groups are currently hidden on smaller screens for development reasons...</p>
                                    <table class="uk-visible@s uk-table uk-table-striped uk-table-small">
                                        <caption>List out Food Groups for filtering purposes...</caption>
                                        <thead>
                                            <tr>
                                                <th class="uk-width-3-4">Food Groups</th>
                                                <th class="uk-width-1-4 uk-text-nowrap"><input onkeydown="addFoodGroup(event)" class="uk-input uk-form-small" type="text" id="foodGroupsInput" placeholder="Add a food group..."></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td id="foodGroupsTagsRow" class="uk-width-3-4 uk-table-expand"></td>
                                                <td class="uk-width-1-4 uk-text-nowrap"><button onclick="addFoodGroup(event)" class="uk-align-right uk-button uk-button-small uk-button-default">Add Food Group</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="uk-width-1-1 uk-margin">
                                    <p style="color: red;" class="uk-hidden@s">Ingrediants are currently hidden on smaller screens for development reasons...</p>
                                    <table class="uk-visible@s uk-table uk-table-striped uk-table-small">
                                        <caption>List out ingrediants for filtering purposes...</caption>
                                        <thead>
                                            <tr>
                                                <th class=" uk-width-3-4">Ingrediants</th>
                                                <th class="uk-width-1-4 uk-text-nowrap"><input onkeydown="addIngrediant(event)" class="uk-input uk-form-small" type="text" id="ingrediantsInput" placeholder="Add an ingrediant..."></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td id="ingrediantsRow" class="uk-width-3-4"></td>
                                                <td class="uk-width-1-4 uk-text-nowrap"><button onclick="addIngrediant(event)" class="uk-align-right uk-button uk-button-small uk-button-default">Add ingrediant</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Logistics Info -->
                            <div uk-grid>
                                <!-- Primary Location -->
                                <div class="uk-width-1-1 uk-margin uk-grid-medium" uk-grid>
                                    <div class="uk-width-1-2@m uk-grid-small" uk-grid>
                                        <div class="uk-width-3-4 uk-margin-auto-top">
                                            <label for="primaryZone">Primary Zone</label>
                                            <input class="uk-input uk-disabled" id="primaryZone" type="text">
                                        </div>
                                        <div class="uk-width-1-4 uk-margin-auto-top">
                                            <button onclick="openZonesModal('primary_zone', 'zonesPage')" class="uk-button uk-button-default">Select</button>
                                        </div>
                                    </div>
                                    <div class="uk-width-1-2@m uk-grid-small" uk-grid>
                                        <div class="uk-width-3-4 uk-margin-auto-top">
                                            <label for="primaryLocation">Primary Location</label>
                                            <input class="uk-input uk-disabled" id="primaryLocation" type="text">
                                        </div>
                                        <div class="uk-width-1-4 uk-margin-auto-top">
                                            <button onclick="openLocationsModal('primary_location', 'locationsPage')" class="uk-button uk-button-default">Select</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Auto Issue Location -->
                                <div class="uk-width-1-1 uk-margin uk-grid-medium" uk-grid>
                                    <div class="uk-width-1-2@m uk-grid-small" uk-grid>
                                        <div class="uk-width-3-4 uk-margin-auto-top">
                                            <label for="autoZone">Auto Issue Zone</label>
                                            <input class="uk-input uk-disabled" id="autoZone" type="text">
                                        </div>
                                        <div class="uk-width-1-4 uk-margin-auto-top">
                                            <button onclick="openZonesModal('auto_issue_zone', 'zonesPage')" class="uk-button uk-button-default">Select</button>
                                        </div>
                                    </div>
                                    <div class="uk-width-1-2@m uk-grid-small" uk-grid>
                                        <div class="uk-width-3-4 uk-margin-auto-top">
                                            <label for="autoLocation">Auto Issue Location</label>
                                            <input class="uk-input uk-disabled" id="autoLocation" type="text">
                                        </div>
                                        <div class="uk-width-1-4 uk-margin-auto-top">
                                            <button onclick="openLocationsModal('auto_issue_location', 'locationsPage')" class="uk-button uk-button-default">Select</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <caption>Here are all the locations that this SKU has quantity in...</caption>
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Location</th>
                                                <th>QOH</th>
                                            </tr>
                                        </thead>
                                        <tbody id="locationsTableBody">
                                        </tbody>
                                    </table>
                                    <button onclick="openPossibleLocationsModal()" class="uk-button add-button"><i class="uk-flex-middle material-symbols-outlined" style="">add_circle</i></button>

                                </div>
                            </div>
                            <!-- Linked Items -->
                            <div uk-grid>
                                <div class="uk-width-1-1">
                                    <p class="uk-text-meta">A linked Item functions as a backend item that is used during scanning and/or 
                                        receipting into the system. In essence the item will be converted into the main list item during
                                        transacting. This is represented as below:
                                    </p>
                                </div>
                                <div class="uk-width-1-1 uk-grid-small" uk-grid>
                                    <div class="uk-width-auto">
                                        <button onclick="openItemsModal('items', 'itemsPage')" class="uk-button uk-button-default">lookup</button>
                                    </div>
                                    <div class="uk-width-auto">
                                        <input class="uk-input uk-disabled" id="linked_item" type="text">
                                        <input class="uk-input uk-hidden" id="linked_item_id" type="text">
                                    </div>
                                    <div class="uk-width-auto">
                                        <input class="uk-input uk-form-width-small" id="conversion_factor" type="text">
                                    </div>
                                    <div class="uk-width-auto">
                                        <input class="uk-input uk-form-width-small uk-disabled" id="conversion_factor_uom" type="text">
                                    </div>
                                    <div class="uk-width-auto uk-flex uk-flex-middle">
                                        <p class="uk-flex uk-flex-middle uk-flex-center"><strong>INTO</strong></p>
                                    </div>
                                    <div class="uk-width-auto">
                                        <input class="uk-input uk-disabled uk-form-width-small" id="main_qty_uom" type="text">
                                    </div>
                                    <div class="uk-width-auto">
                                        <input class="uk-input uk-disabled" id="main_barcode" type="text">
                                    </div>
                                    <div class="uk-width-auto">
                                        <button id="linkAdd" class="uk-button uk-button-default">add</button>
                                    </div>
                                </div>
                                <div class="uk-width-1-1">
                                    <table class="uk-table uk-table-striped">
                                        <thead>
                                            <tr>
                                                <th>Barcode</th>
                                                <th>Name</th>
                                                <th>Operations</th>
                                            </tr>
                                        </thead>
                                        <tbody id="linkedItemsTableBody"></tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Search_String -->
                            <div uk-grid>
                                <div class="uk-width-1-1">
                                    <caption class="uk-text-meta">This portion of the search string is created by the system</caption>
                                    <div style="margin-bottom: 0px;" class="uk-margin">
                                        <textarea id="search_string_main" class="uk-textarea" rows="5" placeholder="Textarea" aria-label="Textarea"></textarea>
                                    </div>
                                    <button onclick="refreshSearchString()" class="uk-button add-button"><i class="uk-flex-middle material-symbols-outlined" style="">refresh</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button id="saveButton" onclick="saveUpdated()" class="uk-button uk-button-primary floating-button"><span class="uk-flex material-icons">save</span></button>
        <!-- Modals -->
         <!-- This is the modal -->
        <div id="zonesModal" uk-modal>
            <div id="zonesModalInner" class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Select Zone</h2>
                <p> Select a zone from the list</p>
                <nav aria-label="Pagination">
                    <ul id="zonesPage" 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>Zone</th></tr>
                    </thead>
                    <tbody id="zonesTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Location Select Modal -->
        <div id="LocationsModal" uk-modal>
            <div id="locationsModalInner" class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Select Location</h2>
                <p> Select a Location from the list</p>
                <nav aria-label="Pagination">
                    <ul id="locationsPage" 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>Location</th></tr>
                    </thead>
                    <tbody id="selectlocationsTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Brands Modal -->
        <div id="brandsModal" uk-modal>
            <div id="brandsModalinner" class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Select Location</h2>
                <p> Select a Location from the list</p>
                <nav aria-label="Pagination">
                    <ul id="brandsPage" 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>Brand</th></tr>
                    </thead>
                    <tbody id="brandsTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Add Weblink Modal -->
        <div id="addWeblinkModal" uk-modal>
            <div id="weblinkModal" class="uk-modal-dialog uk-modal-body">
                <h2 class="uk-modal-title">Add Weblink</h2>
                <p>By adding a weblink you are giving others ways of better understanding what this item
                    is, if you wish for the link to show up in shopping-lists and or other parts of the system 
                    give it the name "main". By using the same name you will be overwriting!
                </p>
                <div class="">
                    <label class="uk-form-label" for="weblinkName">Weblink Name</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="weblinkName" type="text">
                    </div>
                </div>
                <div class="uk-margin-bottom">
                    <label class="uk-form-label" for="weblinkLink">Weblink</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="weblinkLink" type="text">
                    </div>
                </div>
                <div id="weblinkModalFooter" class="uk-modal-footer">
                    <button onclick="addWebLink()" class="uk-button uk-button-default uk-align-right" type="button">Add</button>
                </div>
            </div>
        </div>
        <!-- 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>
        <!-- Conversions Modal -->
        <div id="conversionsModal" 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">Conversions</h2>
                </div>
                <div class="uk-modal-body">
                    <div class="uk-grid-small" uk-grid>
                        <div class="uk-width-1-1">
                            <p class="uk-text-meta">To create a conversion allows the use of differing unit of measures in other parts of the system; mainly recipes. For example, it allows for the ability to 
                                use tablespoons for recipes while tracking the sku as grams. Here is where you can add or edit your conversion:
                            </p>
                        </div>
                        <div class="uk-width-1-2@m">
                            <div class="uk-margin">
                                <label class="uk-form-label" for="parent_uom_quantity">SKU UOM QTY</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled" id="parent_uom_quantity" type="text" placeholder="" value="1">
                                </div>
                            </div>
                        </div>
                        <div class="uk-width-1-2@m">
                            <div class="uk-margin">
                                <label class="uk-form-label" for="parent_uom">SKU UOM</label>
                                <div class="uk-form-controls">
                                    <input class="uk-input uk-disabled" id="parent_uom" type="text" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="uk-width-1-1 uk-text-center">
                            <div>
                                <p class="uk-text-lead">TO</p>
                            </div>
                        </div>
                        <div class="uk-width-1-2@m">
                            <div class="uk-margin">
                                <label class="uk-form-label" for="conversion_factor">Conversion Factor</label>
                                <div class="uk-form-controls">
                                    <input id="conversion_factor_modal" class="uk-input" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="uk-width-1-2@m">
                            <div class="uk-margin">
                                <label class="uk-form-label" for="conversion_uom">Conversion UOM</label>
                                <select id="conversion_uom" class="uk-select" aria-label="Select">
                                    {% for unit in units %}
                                        <option value="{{unit['id']}}">{{unit['fullname']}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="uk-modal-footer uk-text-right">
                    <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                    <button id="conversionSubmitButton" class="uk-button uk-button-primary" type="button">Save</button>
                </div>
            </div>
        </div>
        <!-- Prefix Modal -->
        <div id="prefixesModal" uk-modal>
            <div id="prefixesModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                <h2 class="uk-modal-title">Select Item</h2>
                <p>Select an Prefix from the system...</p>
                <nav aria-label="Pagination">
                    <ul id="prefixesModalPage" 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>Name</th>
                        </tr>
                    </thead>
                    <tbody id="prefixesModalTableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Prefix Modal -->
        <div id="NewLocationsModal" uk-modal>
            <div id="NewLocationsModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                <h2 class="uk-modal-title">Select Item</h2>
                <p>Select an Prefix from the system...</p>
                <nav aria-label="Pagination">
                    <ul id="NewLocationsModalPage" 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>Zone</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody id="NewLocationsModalTableBody">
                    </tbody>
                </table>
            </div>
        </div>


    </body>
    <script src="{{ url_for('static', filename='handlers/itemEditHandler.js') }}"></script>
    <script>const item_id = {{id|tojson}}</script>
</html>