{{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>
    <span>Satın Al</span>
  </nav>

  <div class="checkout-steps reveal">
    <div class="cstep cstep-on"><span>1</span>Sipariş Bilgileri</div>
    <div class="cstep-line"></div>
    <div class="cstep"><span>2</span>Havale / EFT</div>
    <div class="cstep-line"></div>
    <div class="cstep"><span>3</span>Onay &amp; Kargo</div>
  </div>

  <div class="buy-grid">
    <div class="buy-form-wrap panel-w reveal">
      <h2>Sipariş Formu</h2>
      <form class="form" action="/satin-al" method="post">
        <label>Ürün
          <select name="product_id">
            <option value="0">— Ürün seçin (isteğe bağlı) —</option>
            {{$sel := 0}}{{if .P}}{{$sel = .P.ID}}{{end}}
            {{range .Products}}
            <option value="{{.ID}}" {{if eq .ID $sel}}selected{{end}}>{{.Name}} — {{money .Price}} ₺</option>
            {{end}}
          </select>
        </label>
        <div class="form-row">
          <label>Ad Soyad *<input type="text" name="name" required placeholder="Adınız Soyadınız"></label>
          <label>Telefon *<input type="tel" name="phone" required placeholder="05XX XXX XX XX"></label>
        </div>
        <div class="form-row">
          <label>İl<input type="text" name="city" placeholder="İstanbul"></label>
        </div>
        <label>Teslimat Adresi<textarea name="address" rows="3" placeholder="Mahalle, cadde, no, ilçe..."></textarea></label>
        <label>Sipariş Notu<textarea name="note" rows="2" placeholder="Renk tercihi, teslimat notu vb."></textarea></label>
        <button class="btn btn-primary btn-lg" type="submit">Siparişi Oluştur</button>
        <p class="form-hint">Formu gönderdikten sonra sipariş numaranız ve ödeme bilgileri ekranda görünecektir.</p>
      </form>
    </div>

    <aside class="buy-side">
      {{if .P}}
      <div class="buy-product panel-w reveal">
        <img src="{{.P.Image}}" alt="{{.P.Name}}">
        <div>
          <strong>{{.P.Name}}</strong>
          <span class="buy-product-price">{{money .P.Price}} ₺</span>
          <span class="ship-badge"><svg class="ico ico-xs"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo</span>
        </div>
      </div>
      {{end}}

      {{if .S.VisibleIBANs}}
      <div class="iban-card reveal">
        <h3><svg class="ico"><use href="/static/icons.svg#i-card"/></svg>Banka Hesaplarımız</h3>
        {{range .S.VisibleIBANs}}
        <div class="iban-row">
          <div class="iban-head"><strong>{{.Bank}}</strong><span>{{.Holder}}</span></div>
          <div class="iban-no">
            <code>{{.Number}}</code>
            <button type="button" class="copy-btn" data-copy="{{.Number}}" title="IBAN'ı kopyala">Kopyala</button>
          </div>
        </div>
        {{end}}
        {{if .S.OrderNote}}<p class="iban-note"><svg class="ico ico-sm"><use href="/static/icons.svg#i-info"/></svg>{{.S.OrderNote}}</p>{{end}}
      </div>
      {{end}}

      {{if .S.VisiblePhones}}
      <div class="call-card panel-w reveal">
        <h3><svg class="ico"><use href="/static/icons.svg#i-phone"/></svg>Telefonla Sipariş</h3>
        <p>Formla uğraşmak istemiyorsanız bizi arayın, siparişinizi telefonda oluşturalım.</p>
        {{range .S.VisiblePhones}}
        <a class="btn btn-navy call-line" href="{{tel .Number}}">{{if .Label}}{{.Label}}: {{end}}{{.Number}}</a>
        {{end}}
        {{if .S.ShowWhatsApp}}
        <a class="btn btn-wa call-line" href="{{wa .S.WhatsApp}}" target="_blank" rel="noopener">WhatsApp: {{.S.WhatsApp}}</a>
        {{end}}
      </div>
      {{end}}
    </aside>
  </div>
</div>
{{end}}