{{ define "main" }}

<!-- banner 第一塊-->
{{ with .Params.banner }}
<section class="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto text-center">
        <h1 class="mb-3">{{ .title | markdownify }}</h1>
        <p class="mb-4 banner__p">{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <div><a href="{{ .link | safeURL }}" class="btn btn-primary">{{ .label }}</a></div>
        {{ end }}
        {{ end }}

        <!-- {{with .image}}<img src="{{ . | absURL }}" class="img-fluid mt-5" width="750px">{{end}} -->
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /banner -->

<!-- feature (section of background light) 主要服務-->
{{ if .Params.feature.enable }}
{{ with .Params.feature }}
<section class="section bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 text-center">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
      </div>
      {{ range .feature_item }}
      <div class="col-md-4 col-sm-6 mb-4">
        <div class="feature-card text-center">
          <i class="{{.icon}} mb-3"></i>
          <h4 class="mb-2">{{ .name | title }}</h4>
          <p>{{ .content | markdownify }}</p>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /feature -->

<!-- service (without background section)-->
{{ 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 }}
<!-- /service -->

<!-- screenshot  廣告數據動量行銷-->
{{ if site.Data.homepage.screenshot.enable }}
{{ with site.Data.homepage.screenshot }}
<section class="section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto text-center">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
      </div>
    </div>
    <div class="mx-auto text-center mb-5">
      {{ with .image }} <img src="{{ . | absURL }}" class="mb-4 img-fluid">{{ end }}
      {{ if .button.enable }}
      {{ with .button }}
      <div>
        <a href="{{ .link | absURL }}" class="btn btn-primary btn-sm font-weight-bold">{{ .label }}</a>
      </div>
      {{ end }}
      {{ end }}
      </div>
  </div>  
</section>
{{ end }}
{{ end }}
<!-- /screenshot -->

<!-- call to action 無用-->
{{ if .Params.call_to_action.enable }}
{{ with .Params.call_to_action }}
<section class="section">
  <div class="container section shadow_action 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 }}