{{ define "main" }}
<h1>{{ .Title }}</h1>

<div class="product-grid">
  {{ range .Site.Data.products }}
  <div class="product-card">
    <img src="{{ .image | relURL }}" alt="{{ .name }}">
    <div class="body">
      <span class="status-pill {{ .status }}">
        {{ if eq .status "available" }}Available
        {{ else if eq .status "low" }}Low Stock
        {{ else }}Out of Stock{{ end }}
      </span>
      <h3>{{ .name }}</h3>
      <p class="desc">{{ .description }}</p>
      <p class="price">${{ .price }}</p>
      {{ if eq .status "low" }}
      <p class="low-note">Orders may take a bit longer to ship.</p>
      {{ end }}
      {{ if eq .status "out" }}
      <span class="buy-btn disabled">Out of Stock</span>
      {{ else if .stripe_payment_link }}
      <a class="buy-btn enabled" href="{{ .stripe_payment_link }}">Buy &mdash; ${{ .price }}</a>
      {{ else }}
      <span class="buy-btn disabled">Checkout coming soon</span>
      {{ end }}
    </div>
  </div>
  {{ end }}
</div>

<div class="reorder-box">
  <h2>Already ordered from us?</h2>
  <p>Enter your email to see what you got last time.</p>
  <form onsubmit="return false;">
    <input type="email" placeholder="you@example.com" disabled>
    <button type="submit" disabled>Look up my orders</button>
  </form>
  <p class="demo-note">This box is a preview &mdash; it'll work once checkout is connected, since it looks up real past orders.</p>
</div>
{{ end }}