<% layout('master.ejs') %>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <style>
            .product {
                margin-bottom: 0;
                border: 1px solid #dedede;
            }

            .sort-bar {
                min-height: 34px;
                margin-bottom: 15px;
            }
            .menuItem a{
                color: #fff;
                height: 34px;
                line-height: 34px!important;
                font-weight: 500;
            }
            .menuItem.active a{
                color: #fff!important;
                background: #333!important;
            }

        </style>
        <script>
            $(function () {

            })
        </script>

        <!-- ========== SLIDER END ========== -->

        <!-- ========== CONTENT START ========== -->

        <section id="content">
            <div class="container">
                <div class="row">
                    <div class="col-xs-10 col-md-10" style="margin: 0 auto;float: none">
                <ol class="breadcrumb">
                    <li><a href="/">Home</a></li>
                    <li><a href="<%= prev_category.firstUrl %>"><%= prev_category.firstTitle %></a></li>
                    <li><a href="<%= prev_category.secondUrl %>"><%= prev_category.secondTitle %></a></li>
                    <li class="active"><%= product[0].thirdTitle %></li>
                </ol>

                <div class="row">

                    <div class="col-sm-12">
                        <div class="navwrapper">
                            <div class="navbar navbar-default navbar-static-top sort-bar">
                                <div class="navbar-collapse collapse" style="padding: 0">
                                    <ul class="nav navbar-nav">
                                        <li class="menuItem active"><a>Recommended</a></li>
                                        <li class="menuItem"><a>Time</a></li>
                                        <li class="menuItem"><a>Price</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <ul class="products row">
                            <% if(product[0].product.length != 0 ) { %>
                            <% product[0].product.forEach(function(item){ %>
                            <li class="col-sm-3">
                                <div class="product">
                                    <div class="thumbnail">
                                        <a href="/single-product/<%= item.product_id %>"><img class="product_images"
                                                                                              src="<%= item.product_images[0].url %>"
                                                                                              alt=""></a>
                                        <a href="#" class="add-to-cart" title="Add to Cart">
                                          <span class="fa-stack fa-2x">
                                            <i class="fa fa-circle fa-stack-2x"></i>
                                            <i class="fa fa-shopping-cart  fa-stack-1x fa-inverse"></i>
                                          </span>
                                        </a>
                                    </div>
                                    <hr>
                                    <div class="title">
                                        <h3><a href="#"><%= item.product_images[0].title %></a></h3>
                                        <!--<p>by Jack &amp; Jones</p>-->
                                    </div>
                                    <% if( status == 200) { %>
                                    <% if( user.level == '10' ) { %>
                                    <% if( item.product_origin_price.sale_discount_regular_price.length == 0 ) { %>
                                    <span class="price"><%= item.product_origin_price.regular_price %></span>
                                    <% } else { %>
                                    <span class="price"><%= item.product_origin_price.sale_discount_regular_price %></span>
                                    <% } %>
                                    <% } %>
                                    <% if( user.level == '66' ) { %>
                                    <% if( item.product_origin_price.sale_discount_vip_price.length == 0 ) { %>
                                    <span class="price"><%= item.product_origin_price.regular_price %></span>
                                    <% } else { %>
                                    <span class="price"><%= item.product_origin_price.sale_discount_vip_price %></span>
                                    <% } %>
                                    <% } %>
                                    <% } %>
                                    <% if( status == 500 ) { %>
                                    <span class="price"><%= item.product_origin_price.market_price %></span>
                                    <% } %>

                                </div>
                            </li>

                            <% }) %>
                            <% } %>

                        </ul>

                    </div>

                </div>
                </div>
                </div>
            </div>
        </section>

    </section>

    <!-- Main content -->

</div>

<script>
    $(function () {
        $('#zlight-nav').zlightMenu();
    });
</script>
<!-- ========== CONTENT END ========== -->

<!-- ========== CONTENT START ========== -->


<!-- ========== CONTENT END ========== -->

<script>

</script>