{{ define "main" }}
{{ with .Params.section1}}
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
  <div class="title-div common-layout">
    <h1 class="title-h1">{{ .title }}</h1>
    <p class="common-p">{{ .content }}</p>
  </div>
</section>
{{ end }}

<section class="section-img">
  <img class="common-layout" src="{{ .Params.image }}" alt="{{ .Title }}">
  {{ if .Params.bg }}
  <img class="bg" src="{{ .Params.bg }}" alt="">
  {{ end }}
</section>

<section class="section-2">
  {{ with .Params.section2 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <ul>
      {{ range .list }}
      <li class="common-flex-layout">
        <div>
          <h3 class="title-black-h3">{{ .title }}</h3>
          {{ if .summary }}
          <p class="common-p">{{ .summary }}</p>
          {{ end }}
          {{ if .contentList }}
          <ul>
            {{ range .contentList}}
            <li class="common-li">{{ .content | safeHTML }}</li>
            {{ end }}
          </ul>
          {{ end }}
        </div>
        <img src="{{ .image }}" alt="{{ .title }}">
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class="section-3">
  {{ with .Params.section3 }}
  <img class="bg-left" src="{{ .bgLeft }}" alt="{{ i18n "background image" }}">
  <img class="bg-right" src="{{ .bgRight }}" alt="{{ i18n "background image" }}">
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    {{ if .videoLink }}
    <iframe 
        id='iframe-player' 
        src="{{ .videoLink }}" 
        width="900" 
        height="580" 
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
    {{ else }}
    <img src="{{ .image }}" alt="">
    {{ end }}
    <p class="common-p">{{ .content }}</p>
    <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
  </div>
  {{ end }}
</section>
{{ end }}