{{ define "main" }}

{{ partial "page-header.html" . }}
{{ if .Params.service.enable }}
{{ with .Params.service }}
{{ range $i,$p := .service_item }}
{{if modBool $i 2}}
<section class="section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 order-2 order-md-1">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absURL }}" class="btn-link">{{ .label }} <i class="ti-arrow-right"></i></a>
        {{ end }}
        {{ end }}
      </div>
      <div class="col-md-6 order-1 order-md-2 mb-4 mb-md-0">
        {{ if .youtube.enable }}
        {{ with .youtube }}
        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
          <iframe src="{{ .link | absURL }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
        </div>
        {{ end }}
        {{ else }}
        <div {{if gt (len .images) 1}}class="slider" {{end}}>
          {{ range .images }}
          <img src="{{ . | absURL }}" class="img-fluid">
          {{ end }}
        {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ else }}
<!-- service (with background section)-->
<section class="section bg-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 mb-4 mb-md-0">
        {{ if .youtube.enable }}
        {{ with .youtube }}
        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
          <iframe src="{{ .link | absURL }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
        </div>
        {{ end }}
        {{ else }}
        <div {{if gt (len .images) 1}}class="slider" {{end}}>
          {{ range .images }}
          <img src="{{ . | absURL }}" class="img-fluid">
          {{ end }}
        </div>
        {{ end }}
      </div>
      <div class="col-md-6">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absURL }}" class="btn-link">{{ .label }} <i class="ti-arrow-right"></i></a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{ end }}
{{ end }}

<!-- call to action -->
{{ if .Params.call_to_action.enable }}
{{ with .Params.call_to_action }}
<section class="section">
  <div class="container section shadow rounded-lg px-4">
    <div class="row align-items-center justify-content-center text-center text-md-left">
      <div class="col-lg-4 col-md-5 mb-4 mb-md-0">
        <img src="{{ .image | absURL }}" class="img-fluid">
      </div>
      <div class="col-lg-5 col-md-6">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        {{with .content }}<p class="mb-4">{{ . | markdownify }}</p>{{ end }}
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absURL }}" class="btn btn-primary">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /call to action -->

{{ end }}