{{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>
    <a href="/urunler">Akülü Araçlar</a>
    <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg>
    <a href="/urunler?kategori={{.P.Category}}">{{cat .P.Category}}</a>
    <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg>
    <span>{{.P.Name}}</span>
  </nav>

  <div class="detail-card reveal">
    <div class="detail-grid">
      <div class="detail-media">
        {{if .P.OldPrice}}<span class="badge-discount">%{{discount .P.OldPrice .P.Price}}</span>{{end}}
        <img src="{{.P.Image}}" alt="{{.P.Name}}">
      </div>

      <div class="detail-info">
        <span class="product-cat">{{cat .P.Category}}</span>
        <h1>{{.P.Name}}</h1>
        <p class="detail-short">{{.P.Short}}</p>

        <div class="price-box">
          {{if .P.OldPrice}}<div class="price-old"><s>{{money .P.OldPrice}} ₺</s> <span class="price-save">%{{discount .P.OldPrice .P.Price}} indirim</span></div>{{end}}
          <div class="price-row">
            <strong>{{money .P.Price}} ₺</strong>
            {{if .P.InStock}}<span class="stock stock-in"><svg class="ico ico-xs"><use href="/static/icons.svg#i-check"/></svg>Stokta</span>{{else}}<span class="stock stock-out">Tükendi</span>{{end}}
          </div>
          <span class="ship-badge"><svg class="ico ico-xs"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo · 24 saatte kargoda</span>
        </div>

        {{if .P.InStock}}
        <div class="detail-actions">
          {{if .S.PaymentVisible}}<a class="btn btn-primary btn-lg" href="/satin-al?urun={{.P.ID}}"><svg class="ico ico-sm"><use href="/static/icons.svg#i-card"/></svg>Havale/EFT ile Satın Al</a>{{end}}
          {{with .S.MainPhone}}
          <a class="btn btn-navy btn-lg" href="{{tel .}}">
            <svg class="ico ico-sm"><use href="/static/icons.svg#i-phone"/></svg>Telefonla Sipariş
          </a>
          {{end}}
        </div>
        {{end}}

        <div class="spec-grid">
          {{if .P.Brand}}<div class="spec"><span>Marka</span><strong>{{.P.Brand}}</strong></div>{{end}}
          {{if .P.Voltage}}<div class="spec"><span>Voltaj</span><strong>{{.P.Voltage}}</strong></div>{{end}}
          {{if .P.Battery}}<div class="spec"><span>Batarya</span><strong>{{.P.Battery}}</strong></div>{{end}}
          {{if .P.Motor}}<div class="spec"><span>Motor</span><strong>{{.P.Motor}}</strong></div>{{end}}
          {{if .P.Speed}}<div class="spec"><span>Hız</span><strong>{{.P.Speed}}</strong></div>{{end}}
          {{if .P.MaxLoad}}<div class="spec"><span>Taşıma</span><strong>{{.P.MaxLoad}}</strong></div>{{end}}
          {{if .P.Age}}<div class="spec"><span>Yaş</span><strong>{{.P.Age}}</strong></div>{{end}}
          <div class="spec"><span>Kumanda</span><strong>{{if .P.Remote}}Var{{else}}Yok{{end}}</strong></div>
        </div>

        <div class="trust-row">
          <span><svg class="ico ico-sm"><use href="/static/icons.svg#i-shield"/></svg>2 Yıl Garanti</span>
          <span><svg class="ico ico-sm"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo</span>
          <span><svg class="ico ico-sm"><use href="/static/icons.svg#i-box"/></svg>Faturalı Gönderim</span>
        </div>
      </div>
    </div>
  </div>

  <div class="detail-body reveal">
    <div class="detail-desc panel-w">
      <h2>Ürün Açıklaması</h2>
      <p>{{nl2br .P.Desc}}</p>
    </div>
    {{if .P.Features}}
    <div class="detail-features panel-w">
      <h2>Öne Çıkan Özellikler</h2>
      <ul>{{range .P.Features}}<li><svg class="ico ico-xs"><use href="/static/icons.svg#i-check-c"/></svg>{{.}}</li>{{end}}</ul>
    </div>
    {{end}}
  </div>

  {{if .Similar}}
  <div class="similar reveal">
    <div class="section-head">
      <h2>Benzer Ürünler</h2>
      <a class="section-link" href="/urunler?kategori={{.P.Category}}">Tümünü Gör <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg></a>
    </div>
    <div class="product-grid">
      {{range .Similar}}
      <article class="product-card">
        <a class="product-img" href="/urun/{{.ID}}/{{.Slug}}">
          {{if .OldPrice}}<span class="badge-discount">%{{discount .OldPrice .Price}}</span>{{end}}
          <img src="{{.Image}}" alt="{{.Name}}" loading="lazy">
        </a>
        <div class="product-body">
          <span class="product-cat">{{cat .Category}}</span>
          <h3><a href="/urun/{{.ID}}/{{.Slug}}">{{.Name}}</a></h3>
          <span class="ship-badge"><svg class="ico ico-xs"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo</span>
          <div class="product-price"><strong>{{money .Price}} ₺</strong></div>
          <div class="product-actions">
            {{if $.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>
  </div>
  {{end}}
</div>
{{end}}