{{ define "main" }}

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

<section class="section pt-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 mb-4 mb-lg-0">
        <!-- product image slider -->
        <div class="product-slider">
          {{ range .Params.Images }}
          <div data-image="{{ .image | absURL }}">
            <img class="img-fluid w-100" src="{{ .image | absURL }}" alt="product-img">
          </div>
          {{ end }}
        </div>
      </div>
      <div class="col-lg-5 offset-lg-1">
        <h4 class="font-weight-medium">{{ .Title }}</h4>
        <!-- rating star -->
        {{ if site.Params.rating.enable }}
        <div class="rw-ui-container"></div>
        {{ end }}
        <div class="my-4">
          {{ if .Params.PriceBefore }}
          <s>{{ site.Params.currencySymbol }}{{ .Params.PriceBefore }}</s>
          {{ end }}
          <span class="lead text-primary font-weight-medium">{{ site.Params.currencySymbol }}{{ .Params.Price }}</span>
        </div>
        <h5>Short Description</h5>
        <p>{{ .Params.ShortDescription | markdownify }}</p>
        <button class="snipcart-add-item btn btn-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 class="col-12 mt-5">
        <ul class="nav nav-tabs border-bottom-0" id="myTab" role="tablist">
          <li class="nav-item mr-3">
            <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab"
              aria-controls="description" aria-selected="true">Description</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews"
              aria-selected="false">Reviews</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
            <div class="content">{{ .Content }}</div>
          </div>
          <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
            {{ template "_internal/disqus.html" . }}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{ partial "cta.html" . }}

{{ end }}