{extends file='layout.tpl'}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">You are here: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">{intl l="Home"}</span></a></li>
            {loop name="category_path" type="category-path" category="{category attr="id"}"}
            {if $ID == {category attr="id"}}
                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active">
                    <span itemprop="title">{$TITLE}</span>
                </li>
            {else}
                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{$URL}"  itemprop="url"><span itemprop="title">{$TITLE}</span></a></li>
            {/if}
            {/loop}
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

{block name="main-content"}
    <div class="main layout-col-2-left">

        <article class="col-main {$smarty.get.mode|default:"grid"}" role="main">
            {include file="includes/category-toolbar.html" toolbar="top"}
            <div id="category-products">
                <div class="products-content">
                    <ul class="product-col-4">
                        {loop type="product" name="product_list" category={category attr="id"}}

                        <li class="item">
                            {include file="includes/single-product.html" product_id=$ID}
                        </li>
                        {/loop}
                    </ul>
                </div>
            </div><!-- /#category-products -->
            {include file="includes/category-toolbar.html" toolbar="bottom"}
        </article>

        <aside class="col-left" role="complementary" itemscope itemtype="http://schema.org/WPSideBar">

            {include file="includes/menu.html"}

            <section id="filters">
                <h3>Find <span>a product</span></h3>
                <form id="form-filters" action="" method="get" role="form">
                    <div class="filter filter-type">
                        <fieldset>
                            <legend class="filter-heading">Type</legend>
                            <div class="filter-content">
                                <div class="checkbox">
                                    <label for="type0">
                                        <input type="checkbox" name="type0" id="type0" value="0"> Type 0
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="type1">
                                        <input type="checkbox" name="type1" id="type1" value="1"> Type 1
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="type2">
                                        <input type="checkbox" name="type2" id="type2" value="2"> Type 2
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    </div><!-- /Filter Type -->

                    <div class="filter filter-price">
                        <fieldset>
                            <legend class="filter-heading">Price</legend>
                            <div class="filter-content">
                                <div class="checkbox">
                                    <label for="price0">
                                        <input type="checkbox" name="price0" id="price0" value="0"> $0.00 - $99.99
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="price1">
                                        <input type="checkbox" name="price1" id="price1" value="1"> $100.00 - $199.99
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="price2">
                                        <input type="checkbox" name="price2" id="price2" value="2"> $200.00 and above
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    </div><!-- /Filter Price -->

                    <div class="filter filter-size">
                        <fieldset>
                            <legend class="filter-heading">Size</legend>
                            <div class="filter-content">
                                <div class="checkbox">
                                    <label for="size0">
                                        <input type="checkbox" name="size0" id="size0" value="0"> Large
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="size1">
                                        <input type="checkbox" name="size1" id="size1" value="1"> Medium
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="size2">
                                        <input type="checkbox" name="size2" id="size2" value="2"> Small
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    </div><!-- /Filter Size -->

                    <div class="group-btn">
                        <button type="submit" class="btn btn-filter">Submit</button>
                    </div>
                </form>
            </section><!-- /.filters -->

        </aside>

    </div>

    </div><!-- /.container -->
{/block}