<template name="prodMgmtForm">
    <h4>Product Management</h4>
    <form action="submit" class="prodInputForm">
        <div class="row">
            <div class="col s12 m6 l6 input-field">
                <input type="text" class="prodName" style="{{#if $eq prodNameErr true}}border: 2px solid red;{{/if}}" id="prodName" />
                <label for="prodName">Name*</label>
            </div>
            <div class="col s12 m6 l6 input-field">
                <select name="prodCategory" id="prodCategory" class="prodCategory">
                    <option value="" disabled selected></option>
                    {{#each category}}
                        <option value="{{categoryName}}">{{categoryName}}</option>
                    {{/each}}
                    <option id="addNewCategory" value="addNewCat">Add New Category</option>
                </select>
                <label for="prodCategory">Category</label>
            </div>
        </div>
        <div class="row">
            <div class="col s12 m6 l6 input-field">
                <select name="prodStore" id="prodStore" class="prodStore">
                    <option value="" disabled selected></option>
                    {{#each stores}}
                        <option value="{{storeName}}">{{storeName}}</option>
                    {{/each}}
                    <option id="addNewStore" value="addNewStore">Add New Store</option>
                </select>
                <label for="prodStore">Store</label>
            </div>
            <div class="col s12 m6 l6 input-field">
                <select name="prodLocation" id="prodLocation" class="prodLocation {{#if $eq darkmode true}}dark-mode{{/if}}">
                    <option value="" disabled selected></option>
                    {{#each locations}}
                        <option value="{{locationName}}">{{locationName}}</option>
                    {{/each}}
                    <option id="addNewLocation" value="addNewLocation">Add New Location</option>
                </select>
                <label for="prodLocation">Location</label>
            </div>
        </div>
        <div class="row">
            <div class="col s6 m6 l6">
                <a class="waves-effect waves-light btn cancelProdMgmt orange">Cancel</a>
            </div>
            <div class="col s6 m6 l6">
                {{#if $eq prodEditMode false}}
                    <a class="waves-effect waves-light btn saveProdMgmt green right">Add</a>
                {{else}}
                    <a class="waves-effect waves-light btn editProdMgmt blue right">Save Edits</a>
                {{/if}}
            </div>
        </div>
    </form>

    <!-- Store Modal Structure -->
    <div id="modalStore" class="modal">
        <div class="modal-content">
            <h4>Add New Store</h4>
            {{> storeMgmtForm}}
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
        </div>
    </div>

    <!-- Location Modal Structure -->
    <div id="modalLocation" class="modal">
        <div class="modal-content">
            <h4>Add New Location</h4>
            {{> locMgmtForm}}
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
        </div>
    </div>

    <!-- Category Modal Structure -->
    <div id="modalCategory" class="modal">
        <div class="modal-content">
            <h4>Add New Category</h4>
            {{> catMgmtForm}}
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
        </div>
    </div>
</template>