{{ define "main" }}

{{ partial "page-title.html" . }}

<section class="section pt-0">
  <div class="container">
    <div class="row">
      {{ range .Data.Pages }}
      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card border-0 text-center">
          <a href="{{ .Permalink }}">
            {{ range first 1 .Params.Images }}
            <img src="{{ .image | absURL }}" alt="{{ .Title }}" class="card-img-top">
            {{ end }}
          </a>
          <div class="card-body">
            <a href="{{ .Permalink }}" class="h4">{{ .Title }}</a>
            <p>{{ .Params.Description }}</p>
            <div class="mb-4">
              {{ if .Params.PriceBefore }}
              <s>{{ site.Params.currencySymbol }}{{ .Params.PriceBefore }}</s>
              {{ end }}
              <span class="lead text-primary">{{ site.Params.currencySymbol }}{{ .Params.Price }}</span>
            </div>
            <button class="snipcart-add-item btn btn-sm btn-outline-primary" data-item-id="{{ .Params.ProductID }}"
              data-item-name="{{ .Title }}" {{ range first 1 .Params.Images }} data-item-image="{{ .image | absURL }}"
              {{ end }} data-item-price="{{ .Params.Price }}" data-item-url="{{ .Permalink }}" data-item-description="{{ .Description }}">
              Add to cart
            </button>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>

{{ partial "cta.html" . }}

{{ end }}