{{ define "products" }}
<section class="breadcrumb-section pb-3 pt-3">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Products</li>
        </ol>
    </div>
</section>
<section class="products-grid pb-4 pt-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-12">
                <div class="sidebar">
                    <!--<div class="sidebar-widget">
                        <div class="widget-title">
                            <h3>Shop by Price</h3>
                        </div>
                        <div class="widget-content shop-by-price">
                            <form method="get" action="/tesas">
                                <div class="price-filter">
                                    <div class="price-filter-inner">
                                        <div id="slider-range"></div>
                                        <div class="price_slider_amount">
                                            <div class="label-input">
                                                <input type="text" id="amount" name="price"
                                                       placeholder="Add Your Price" />
                                                <button type="submit">Filter</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>-->
                    <!--
                    <div class="sidebar-widget">
                        <div class="widget-title">
                            <h3>Categories</h3>
                        </div>
                        <div class="widget-content widget-categories">
                            <ul>
                                <li><a href="#">Fashions</a></li>
                                <li><a href="#">Electronics</a>
                                    <ul>
                                        <li><a href="#">Hand Phone</a></li>
                                        <li><a href="#">Laptops</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Home and Kitchen</a></li>
                                <li><a href="#">Baby and Toys</a></li>
                                <li><a href="#">Sports</a></li>
                                <li><a href="#">Digital Goods</a></li>
                            </ul>
                        </div>
                    </div>-->
                    <!--
                    <div class="sidebar-widget">
                        <div class="widget-title">
                            <h3>Brands</h3>
                        </div>
                        <div class="widget-content widget-brands">
                            <ul>
                                <li><a href="#">Apple</a></li>
                                <li><a href="#">Samsung</a></li>
                                <li><a href="#">Lenovo</a></li>
                                <li><a href="#">Asus</a></li>
                                <li><a href="#">Xiaomi</a></li>
                            </ul>
                        </div>
                    </div>
                    -->
                </div>
            </div>
            <div class="col-lg-9 col-md-8 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="products-top">
                            <div class="products-top-inner">
                                <div class="products-found">
                                    {{ if eq (len .products) 1 }}
                                    <p><span>1 Produkt gefunden</span></p>
                                    {{ else }}
                                    <p><span>{{ len .products }}</span> Produkte gefunden</span></p>
                                    {{ end }}
                                </div>
                                <!--
                                <div class="products-sort">
                                    <span>Sort By : </span>
                                    <select>
                                        <option>Default</option>
                                        <option>Price</option>
                                        <option>Recent</option>
                                    </select>
                                </div>
                                -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    {{ range $i, $product := .products }}
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="single-product">
                            <div class="product-img">
                                <a href="/products/{{ $product.ID }}">
                                    <img src="https://placehold.jp/300x400.png" class="img-fluid" />
                                </a>
                            </div>
                            <div class="product-content">
                                <h3><a href="/products/{{ $product.ID }}">{{ $product.Name }}</a></h3>
                                <div class="product-price">
                                    <span>{{ $product.Price }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ end }}
                </div>
                {{ template "pagination" . }}
            </div>
        </div>
    </div>
</section>
{{ end }}