{{> partials/menu}}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
    <form class="form-horizontal" id="productNewForm" data-toggle="validator">
        <div class="col-12">
            <div class="page-header">
                <div class="float-right">
                    <button id="frm_edit_product_save" class="btn btn-outline-success" type="submit">Add product</button>
                </div>
                <h2>{{ @root.__ "New product" }}</h2>
            </div>
        </div>
        <div class="col-12">
            <div class="form-group">
                <label for="productTitle" class="control-label">{{ @root.__ "Product title" }} *</label>
                <input type="text" id="productTitle" class="form-control" minlength="5" maxlength="200" value="{{productTitle}}" required/>
            </div>
        </div>
        <div class="row ml-0 mr-0">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="productPrice" class="control-label">{{ @root.__ "Product price" }} *</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <label class="input-group-text">{{currencySymbol config.currencySymbol}}</label>
                        </div>
                        <input type="number" id="productPrice" class="form-control" step="any" value="{{productPrice}}" required/>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="productGtin" class="control-label">{{ @root.__ "Product GTIN" }}</label>
                    <div class="input-group">
                        <input type="number" id="productGtin" class="form-control" step="any" value="{{productGtin}}" />
                    </div>
                    <p class="help-block">{{ @root.__ "The Serial number, GTIN or Barcode" }}</p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="productBrand" class="control-label">{{ @root.__ "Product Brand" }}</label>
                    <div class="input-group">
                        <input type="text" id="productBrand" class="form-control" value="{{productBrand}}" />
                    </div>
                    <p class="help-block">{{ @root.__ "The brand of the product" }}</p>
                </div>
            </div>
        </div>
        <div class="row ml-0 mr-0">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="productPublished" class="control-label">{{ @root.__ "Status" }}</label>
                    <select class="form-control" id="productPublished">
                        <option value="true" selected>{{ @root.__ "Published" }}</option>
                        <option value="false">{{ @root.__ "Draft" }}</option>
                    </select>
                </div>
            </div>
            {{#if config.trackStock}}
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="productStock" class="control-label">{{ @root.__ "Stock level" }}</label>
                    <input type="number" id="productStock" class="form-control" value="{{productStock}}" step="any" />
                </div>
            </div>
        </div>
        {{/if}}
        <div class="col-12">
            <div class="form-group" id="editor-wrapper">
                <label for="editor" class="control-label">{{ @root.__ "Product description" }} *</label>
                <textarea minlength="5" rows="10" id="productDescription" class="form-control" required>{{productDescription}}</textarea>
            </div>
        </div>
        <div class="col-12">
            <div class="form-group">
                <label class="control-label">Permalink</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="productPermalink" placeholder="Permalink for the article" value={{productPermalink}}>
                    <div class="input-group-append">
                        <button class="btn btn-outline-success" id="validatePermalink" type="button">Validate</button>
                    </div>
                </div>
                <p class="help-block">{{ @root.__ "This sets a readable URL for the product" }}</p>
            </div>
        </div>
        {{#contains config.paymentGateway 'stripe'}}
        <div class="col-12">
            <div class="form-group">
                <label class="control-label">Subscription plan</label>
                <input type="text" class="form-control" id="productSubscription" placeholder="plan_XXXXXXXXXXXXXX">
                <p class="help-block">First setup the plan in <strong>Stripe</strong> dashboard and enter the Plan ID. Format: plan_XXXXXXXXXXXXXX</p>
            </div>
        </div>
        {{/contains}}
        <div class="col-12">
            <div class="form-group">
                <label for="productComment" class="control-label">{{ @root.__ "Allow comment" }}</label>
                <div class="checkbox">
                    <label>
                        <input class="productComment" type="checkbox" {{checkedState result.productComment}} id="productComment">
                    </label>
                </div>
                <p class="help-block">{{ @root.__ "Allow free form comments when adding products to cart" }}</p>
            </div>
        </div>
        <div class="col-12">
            <div class="form-group">
                <label for="productTags" class="control-label">Product tag words</label>
                <input type="text" class="form-control" id="productTags">
                <p class="help-block">{{ @root.__ "Tag words used to indexed products, making them easier to find and filter." }}</p>
            </div>
        </div>
    </form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script>
    $(document).ready(function() {
        $('#productDescription').summernote({
            height: 300,
            minHeight: null
        });
    });
</script>