{{define "content"}}
<div class="container">
  <nav class="crumbs reveal">
    <a href="/">Anasayfa</a>
    <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg>
    {{if .ActiveCat}}<a href="/urunler">Akülü Araçlar</a>
    <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg>
    <span>{{cat .ActiveCat}}</span>
    {{else}}<span>Akülü Araçlar</span>{{end}}
  </nav>

  <div class="listing">
    <aside class="sidebar-f reveal">
      <div class="widget">
        <h3 class="widget-title">Kategoriler</h3>
        <ul class="widget-cats">
          <li><a class="{{if not .ActiveCat}}on{{end}}" href="/urunler">Tüm Ürünler <span>{{.Total}}</span></a></li>
          {{$active := .ActiveCat}}{{$counts := .Counts}}
          {{range .Categories}}
          <li><a class="{{if eq $active .Slug}}on{{end}}" href="/urunler?kategori={{.Slug}}">{{.Name}} <span>{{index $counts .Slug}}</span></a></li>
          {{end}}
        </ul>
      </div>

      {{if .Brands}}
      <div class="widget">
        <h3 class="widget-title">Marka</h3>
        <ul class="widget-cats">
          {{$ab := .ActiveBrand}}{{$ac := .ActiveCat}}{{$av := .ActiveVolt}}
          {{range .Brands}}
          <li><a class="{{if eq $ab .}}on{{end}}" href="/urunler?{{if $ac}}kategori={{$ac}}&amp;{{end}}{{if $av}}voltaj={{$av}}&amp;{{end}}marka={{.}}">{{.}}</a></li>
          {{end}}
        </ul>
      </div>
      {{end}}

      <div class="widget">
        <h3 class="widget-title">Voltaj</h3>
        <div class="chip-row">
          {{$ac := .ActiveCat}}{{$ab := .ActiveBrand}}{{$av := .ActiveVolt}}
          {{range .Voltages}}
          <a class="chip {{if eq $av .}}chip-on{{end}}" href="/urunler?{{if $ac}}kategori={{$ac}}&amp;{{end}}{{if $ab}}marka={{$ab}}&amp;{{end}}{{if ne $av .}}voltaj={{.}}{{end}}">{{.}}</a>
          {{end}}
        </div>
      </div>

      <div class="widget">
        <h3 class="widget-title">Fiyat Aralığı</h3>
        <form class="price-filter" action="/urunler" method="get">
          {{if .ActiveCat}}<input type="hidden" name="kategori" value="{{.ActiveCat}}">{{end}}
          {{if .Query}}<input type="hidden" name="q" value="{{.Query}}">{{end}}
          {{if .Sort}}<input type="hidden" name="sirala" value="{{.Sort}}">{{end}}
          {{if .ActiveBrand}}<input type="hidden" name="marka" value="{{.ActiveBrand}}">{{end}}
          {{if .ActiveVolt}}<input type="hidden" name="voltaj" value="{{.ActiveVolt}}">{{end}}
          <div class="price-inputs">
            <input type="number" name="min" placeholder="En az ₺" value="{{.Min}}" min="0">
            <span>—</span>
            <input type="number" name="max" placeholder="En çok ₺" value="{{.Max}}" min="0">
          </div>
          <button class="btn btn-navy btn-sm btn-block" type="submit">Uygula</button>
        </form>
      </div>

      {{if or .ActiveCat .ActiveBrand .ActiveVolt .Query .Min .Max}}
      <a class="clear-filters" href="/urunler"><svg class="ico ico-xs"><use href="/static/icons.svg#i-plus"/></svg>Filtreleri Temizle</a>
      {{end}}

      {{if .S.VisiblePhones}}
      <div class="widget widget-call">
        <h3 class="widget-title"><svg class="ico ico-sm"><use href="/static/icons.svg#i-headset"/></svg>Telefonla Sipariş</h3>
        <p>Aradığınızı bulamadınız mı? Bizi arayın, birlikte seçelim.</p>
        {{range .S.VisiblePhones}}
        <a class="btn btn-navy btn-sm btn-block" href="{{tel .Number}}"><svg class="ico ico-xs"><use href="/static/icons.svg#i-phone"/></svg>{{.Number}}</a>
        {{end}}
      </div>
      {{end}}
    </aside>

    <div class="listing-main">
      <div class="toolbar reveal">
        <h1 class="toolbar-title">{{if .ActiveCat}}{{cat .ActiveCat}}{{else if .Query}}"{{.Query}}" için sonuçlar{{else}}Akülü Araçlar{{end}} <span class="toolbar-count">{{len .Products}} ürün</span></h1>
        <form class="sort-form" action="/urunler" method="get">
          {{if .ActiveCat}}<input type="hidden" name="kategori" value="{{.ActiveCat}}">{{end}}
          {{if .Query}}<input type="hidden" name="q" value="{{.Query}}">{{end}}
          {{if .Min}}<input type="hidden" name="min" value="{{.Min}}">{{end}}
          {{if .Max}}<input type="hidden" name="max" value="{{.Max}}">{{end}}
          <select name="sirala" onchange="this.form.submit()">
            <option value="">Önerilen Sıralama</option>
            <option value="fiyat-artan" {{if eq .Sort "fiyat-artan"}}selected{{end}}>Fiyat: Düşükten Yükseğe</option>
            <option value="fiyat-azalan" {{if eq .Sort "fiyat-azalan"}}selected{{end}}>Fiyat: Yüksekten Düşüğe</option>
            <option value="yeni" {{if eq .Sort "yeni"}}selected{{end}}>En Yeniler</option>
          </select>
        </form>
      </div>

      {{if .Products}}
      <div class="product-grid">
        {{range .Products}}
        <article class="product-card reveal">
          <a class="product-img" href="/urun/{{.ID}}/{{.Slug}}">
            {{if .OldPrice}}<span class="badge-discount">%{{discount .OldPrice .Price}}</span>{{end}}
            {{if not .InStock}}<span class="badge-out">Tükendi</span>{{end}}
            <img src="{{.Image}}" alt="{{.Name}}" loading="lazy">
          </a>
          <div class="product-body">
            <span class="product-cat">{{if .Brand}}{{.Brand}}{{else}}{{cat .Category}}{{end}}</span>
            <h3><a href="/urun/{{.ID}}/{{.Slug}}">{{.Name}}</a></h3>
            {{if or .Voltage .Remote}}
            <div class="tag-row">
              {{if .Voltage}}<span class="tag tag-volt">{{.Voltage}}</span>{{end}}
              {{if .Remote}}<span class="tag">Kumandalı</span>{{end}}
            </div>
            {{end}}
            <span class="ship-badge"><svg class="ico ico-xs"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo</span>
            <div class="product-price">
              {{if .OldPrice}}<s>{{money .OldPrice}} ₺</s>{{end}}
              <strong>{{money .Price}} ₺</strong>
            </div>
            <div class="product-actions">
              {{if and .InStock $.S.PaymentVisible}}<a class="btn btn-primary btn-sm" href="/satin-al?urun={{.ID}}">Satın Al</a>{{end}}
              <a class="btn btn-outline btn-sm" href="/urun/{{.ID}}/{{.Slug}}">İncele</a>
            </div>
          </div>
        </article>
        {{end}}
      </div>
      {{else}}
      <div class="empty reveal">
        <span class="empty-ico"><svg class="ico ico-xl"><use href="/static/icons.svg#i-search"/></svg></span>
        <h3>Ürün bulunamadı</h3>
        <p>Aramanıza uygun ürün yok. <a href="/urunler">Tüm ürünlere göz atın</a> veya bizi arayın.</p>
      </div>
      {{end}}
    </div>
  </div>
</div>
{{end}}