{{ define "main" }}

<!-- banner -->
{{ if site.Data.homepage.banner.enable }}
{{ with site.Data.homepage.banner }}
<section class="section-sm">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-5 col-md-6 order-2 order-md-1">
        <h1>{{ .title | markdownify }}</h1>
        <p>{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link }}" class="btn btn-primary mr-3">{{ .label }}</a>
        {{ end }}
        {{ end }}

        {{ if .video.enable }}
        {{ with .video }}
        <a data-toggle="modal" data-src="{{ .videoURL | safeURL }}" data-target="#videoModal"
          class="text-color video-modal"><i
            class="ti-control-play bg-gradient hover-shadow btn-play mr-2"></i><span>Watch Video</span></a>
        {{ end }}
        <!-- Modal -->
        <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 rounded-0">
              <iframe width="560" height="315" src="" id="video" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
      <div class="col-lg-7 col-md-6 order-1 order-lg-2">
        <img src="{{ .image | absURL }}" class="img-fluid" alt="">
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /banner -->

<!-- about -->
{{ if site.Data.homepage.about.enable }}
{{ with site.Data.homepage.about }}
<section class="section">
  <div class="container">
    <div class="row justify-content-around align-items-center">
      <div class="col-lg-5 col-md-6">
        <img class="img-fluid" src="{{ .image | absURL }}" alt="">
      </div>
      <div class="col-md-6 col-lg-5">
        <h2>{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /about -->

{{ if site.Data.homepage.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}

<!-- material -->
{{ if site.Data.homepage.material.enable }}
{{ with site.Data.homepage.material }}
<section class="section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto text-center">
        <h2>{{ .title | markdownify }}</h2>
        <p>{{ .subtitle | markdownify }}</p>
      </div>
    </div>
    <div class="row">
      {{ range .materialItem }}
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="card border-0 text-center">
          <img src="{{ .image | absURL }}" alt="material" class="card-img-top border-0">
          <div class="card-body">
            <h4>{{ .title | markdownify }}</h4>
            <p>{{ .content | markdownify }}</p>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /material -->

<!-- advantage -->
{{ if site.Data.homepage.advantage.enable }}
{{ with site.Data.homepage.advantage }}
<section class="section pb-0">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h2>{{ .title | markdownify }}</h2>
        <p class="mb-4">{{ .subtitle | markdownify }}</p>
        <ul class="list-unstyled" style="columns: 2;">
          {{ range .advantageList }}
          <li class="mb-3"><i class="ti-arrow-circle-right text-primary mr-2"></i>{{ .listItem }}</li>
          {{ end }}
        </ul>
      </div>
      <div class="col-md-6">
        <img src="{{ .image | absURL}}" class="img-fluid" alt="">
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /advantage -->

<!-- promo video -->
{{ if site.Data.homepage.video.enable }}
{{ with site.Data.homepage.video }}
<section class="section pb-0">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-5 col-md-6">
        <div class="img-border rounded mb-5 mb-md-0">
          <img src="{{ .videoThumb | absURL }}" alt="video thumb" class="img-fluid rounded">
          <a data-toggle="modal" data-src="{{ .videoURL | safeURL }}" data-target="#videoModal2"
            class="text-color video-modal content-center"><i class="ti-control-play bg-gradient btn-play-lg"></i></a>
          <!-- Modal -->
          <div class="modal fade" id="videoModal2" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content border-0 rounded-0">
                <iframe width="560" height="315" src="" id="video2" frameborder="0"
                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <h2>{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /promo video -->

<!-- products -->
{{ if site.Data.homepage.products.enable }}
<section class="section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center mb-4">
        {{ with site.Data.homepage.products }}
        <h2>{{ .title | markdownify }}</h2>
        {{ end }}
      </div>
      {{ range first 6 (where site.RegularPages "Type" "products") }}
      <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>
{{ end }}
<!-- /products -->

<!-- testimonial -->
{{ if site.Data.homepage.testimonial.enable }}
{{ with site.Data.homepage.testimonial }}
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2>{{ .title | markdownify }}</h2>
      </div>
    </div>
    <div class="row testimonial-slider">
      {{ range .testimonialItem }}
      <div class="col-4">
        <div class="card border-primary text-center">
          <div class="card-body">
            <img src="{{ .image | absURL }}" class="client-img" alt="{{ .name | markdownify }}">
            <p class="quoted">{{ .content | markdownify }}</p>
            <h6 class="font-weight-medium">{{ .name | markdownify }}</h6>
            <small>{{ .designation | markdownify }}</small>
            <ul class="list-inline rating {{ .rating | lower }} mt-3">
              <li class="list-inline-item mx-0"><i class="ti-star"></i></li>
              <li class="list-inline-item mx-0"><i class="ti-star"></i></li>
              <li class="list-inline-item mx-0"><i class="ti-star"></i></li>
              <li class="list-inline-item mx-0"><i class="ti-star"></i></li>
              <li class="list-inline-item mx-0"><i class="ti-star"></i></li>
            </ul>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /testimonial -->

{{ if site.Data.homepage.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}

{{ end }}