<div class="col-xl-8 col-xl-offset-2 col-xs-12">
    <div class="row">
        {{#ifCond config.menuEnabled '==' 'true'}}
            {{#ifCond config.menuLocation '==' "side"}}
                <div class="col-xl-3 col-md-2">
                    <ul class="list-group menu-side">
                        <li class="list-group-item active">{{config.menuTitle}}</li>
                        <li class="list-group-item"><a href="/">All</a></li>
                        {{#each menu.items}}
                            <li class="list-group-item"><a href="/category/{{this.link}}">{{this.title}}</a></li>
                        {{/each}}
                    </ul>
                </div>
                    <div class="product-layout col-md-8">
            {{else}}
                <div class="row">
                    <div class="product-layout col-md-offset-1 col-md-8">
                        <ol class="breadcrumb menu-top">
                            <li><a href="/">Home</a></li>
                            {{#each menu.items}}
                                <li><a href="/category/{{this.link}}">{{this.title}}</a></li>
                            {{/each}}
                        </ol>
                    </div>
                </div>
                <div class="product-layout col-md-offset-1 col-md-8">
            {{/ifCond}}
        {{else}}
                <div class="product-layout col-md-8">
        {{/ifCond}}
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-md-6 pull-right">
                        <h1 class="product-title">{{result.productTitle}}</h1>
                        <h4 class="product-price">{{currencySymbol config.currencySymbol}}{{result.productPrice}}</h4>
                        {{#if productOptions}}
                            <h4 class="product-option">Options</h4>
                            {{#each productOptions}}
                                {{#ifCond this.optType '==' "select"}}
                                    <strong>{{this.optName}}</strong>
                                    <select name="opt-{{this.optName}}" class="form-control product-opt">
                                        {{#each this.optOptions}}
                                            <option value="{{this}}">{{this}}</option>
                                        {{/each}}
                                    </select>
                                {{/ifCond}}
                                {{#ifCond this.optType '==' "radio"}}
                                    {{#each this.optOptions}}
                                        <strong>{{this.optName}}</strong>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" class="product-opt" name="opt-{{../this.optName}}" value="{{this}}">
                                                {{this}}
                                            </label>
                                        </div>
                                    {{/each}}
                                {{/ifCond}}
                                {{#ifCond this.optType '==' "checkbox"}}
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="product-opt" name="opt-{{../this.optName}}" value="{{this.optName}}"><strong>{{this.optName}}</strong>
                                        </label>
                                    </div>
                                {{/ifCond}}
                            {{/each}}
                        {{/if}}
                        <p>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="product-option-text">Quantity</p>
                                    <div class="input-group">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary qty-btn-minus" type="button">-</button>
                                        </span>
                                        <input type="text" class="form-control add-color text-center" id="product_quantity" maxlength="3" value="1">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary qty-btn-plus" type="button">+</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </p>
                        <p>
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-primary btn-block product-add-to-cart" type="button">Add to cart</button>
                                </div>
                            </div>
                        </p>
                        <p class="seporator"></p>
                        <p class="body_text">
                            {{{productDescription}}}
                        </p>
                    </div>
                    <div class="col-xs-12 col-md-6 pull-left">
                        {{#if result.productImage}}
                            <div class="title-image-container">
                                <div class="image-prev image-button"> <i class="fa fa-chevron-left" aria-hidden="true"></i></div>
                                <img src="{{result.productImage}}" id="product-title-image" class="product-title-image img-responsive" alt="...">
                                <div class="image-next image-button"> <i class="fa fa-chevron-right" aria-hidden="true"></i></div>
                            </div>
                        {{else}}
                            <div class="title-image-container">
                                <img src="/uploads/placeholder.png" id="product-title-image" class="product-title-image img-responsive" alt="...">
                            </div>
                        {{/if}}
                        {{#ifCond images.length '>' 1}}
                            <div class="row">
                            {{#each images}}
                                <div class="vertical-center top-pad-20 col-xs-6 col-lg-6 col-xl-6">
                                    <img src="{{this.path}}" class="thumbnail-image img-responsive">
                                </div>
                            {{/each}}
                            </div>
                        {{/ifCond}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="productId" value="{{result._id}}">
</div>