{{include "header.html"}}
{{include "nav.html"}}
{{if .Content}}
<section class="detail-head">
  <div class="wrap breadcrumb"><a href="/">Home</a><span>/</span><a href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a><span>/</span><b>{{.Content.Title}}</b></div>
  <div class="wrap detail-grid">
    <div>
      <div class="main-photo">{{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}</div>
      {{if .Content.Albums}}<div class="thumbs">{{range .Content.Albums}}<img src="{{.}}" alt="Product view">{{end}}</div>{{end}}
    </div>
    <div class="detail-summary">
      <p class="eyebrow">{{index .Content.Ext "category"}}</p>
      <h1>{{.Content.Title}}</h1>
      <p>{{.Content.Description}}</p>
      {{if .Content.Price}}<div class="price">Reference FOB: US${{.Content.Price}}</div>{{end}}
      <dl class="spec-table">
        <div><dt>Material</dt><dd>{{index .Content.Ext "material"}}</dd></div>
        <div><dt>MOQ</dt><dd>{{index .Content.Ext "moq"}}</dd></div>
        <div><dt>Lead time</dt><dd>{{index .Content.Ext "lead_time"}}</dd></div>
        <div><dt>Packaging</dt><dd>{{index .Content.Ext "packaging"}}</dd></div>
        <div><dt>Certification</dt><dd>{{index .Content.Ext "certification"}}</dd></div>
        <div><dt>Origin</dt><dd>{{.Content.Origin}}</dd></div>
      </dl>
      <div class="actions"><a class="btn primary" href="/message">Ask for quote</a><a class="btn secondary" href="/contact">Discuss compliance</a></div>
    </div>
  </div>
</section>
<section class="section tinted">
  <div class="wrap prose-block">
    <h2>Product and export notes</h2>
    <div>{{.Content.Content|Str2Html}}</div>
    {{if .Content.Tags}}<div class="tags">{{range .Content.Tags}}<a href="{{.URL}}">{{.Name}}</a>{{end}}</div>{{end}}
  </div>
</section>
{{$related := Related .Content.Id 3}}
{{if $related}}
<section class="section">
  <div class="wrap section-head compact"><h2>Related sourcing options</h2></div>
  <div class="wrap card-grid three">{{range $related}}<a class="article-card" href="{{.URL}}">{{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}<strong>{{.Title}}</strong><span>{{.Description}}</span></a>{{end}}</div>
</section>
{{end}}
{{end}}
{{include "footer.html"}}
{{include "js.html"}}