{{ define "main" }}
{{ $data := index .Site.Data .Site.Language.Lang }}
<section class='section-1'>
  {{ with .Params.section1 }}
  <div class="common-layout">
    <div>
      <p class='p1'>{{ .title | safeHTML }}</p>
      <h1>{{ .topic | safeHTML }}</h1>
      <p class='p2'>{{ .content | safeHTML }}</p>
      <a href="{{ .downloadLink1 }}" target="_blank" rel="noopener noreferrer">
        <button class='btn1 common-btn'>{{ .btnContent1 }}</button>
      </a>
      <a href="{{ .downloadLink2 }}" target="_blank" rel="noopener noreferrer">
        <button class='btn2 common-btn'>{{ .btnContent2 }}</button>
      </a>
    </div>
    <img class='img1' src="/images/home/53.png" alt="{{ i18n "kubesphere console screenshot"}}">
    <img class='img2' src="/images/home/left.svg" alt="{{ i18n "background image"}}">
    <img class='img4' src="/images/home/46.svg" alt="{{ i18n "background image"}}">
  </div>
  <img class='img1' src="/images/home/bg.jpg" alt="{{ i18n "background image"}}">
  <img class='img2' src="/images/home/12-3.png" alt="{{ i18n "background image"}}">
  <img class='img3' src="/images/home/2.svg" alt="{{ i18n "background image"}}">
  {{ end }}
</section>

<section class="section-2">
  {{ with .Params.section2 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <ul>
      {{ range .children }}
      <li class="common-top-inline">
        <img src="{{ .icon }}" alt="{{ .name }}">
        <h3 class="title-black-h3 ">{{ .name | safeHTML }}</h3>
        <p class="common-center-p">{{ .content | safeHTML }}</p>
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class='section-3'>
  {{ with .Params.section3 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <div class='menu-div common-flex-layout'>
      <ul>
        {{ range $index, $element := .children }}
        <li class='{{ if eq $index 0 }} active {{ end }} left-li' data-index='{{ $index }}'>{{ .name }}</li>
        {{ end }}
      </ul>
      {{ range .children }}
      <div class='right-div'>
        <div class='top'>
          <h3>💁🏼‍♂️{{ .name }}</h3>
          <p>{{ .content | safeHTML }}</p>
        </div>
        <ul>
          {{ range .children }}
          <li>{{ .content | safeHTML }}</li>
          {{ end }}
        </ul>
        <img src="{{ .icon | relURL }}" alt="{{ .name }}">
      </div>
      {{ end }}

    </div>
  </div>
  {{ end }}
</section>

<section class='section-4'>
  {{ with .Params.section4 }}
  <img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n "background image"}}">
  <img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n "background image"}}">
  <div class="common-layout">
    <div>
      <h2>{{ .title }}</h2>
      <p class="common-p">{{ .content | safeHTML }}</p>
      <ul>
        {{ range .children }}
        <li>
          <img src="{{ .icon }}" alt="{{ .name }}">
          <div>
            <h3 class="title-white-h3">{{ .name }}</h3>
            <p class="common-p">{{ .content | safeHTML }}</p>
          </div>
        </li>
        {{ end }}
      </ul>
    </div>

    <ul>
      {{ range .features}}
      <li>
        <div>
          <div class='top-line {{ .color }}'></div>
          <div class='img-span-div'>
            <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
            <span class="common-middle-inline">{{ .name }}</span>
          </div>
          <p class="common-p">{{ .content | safeHTML }}</p>
        </div>
        <div class='middle-line'></div>
        {{ if .check }}
        <span class="common-green-a">{{ i18n "Coming Soon" }} →</span>
        {{ else }}
        <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More" }} →</a>
        {{ end }}
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class='section-5'>
  {{ with .Params.section5 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <div>
      {{ with .frontEnd }}
      <div class='front-div common-top-inline'>
        <h3 class="title-black-h3">{{ .title }}</h3>
        <p>{{ .project }}</p>
        {{ $alt := .project }}
        <ul>
          {{ range .children }}
          <li>
            <img src="{{ .icon }}" alt="{{ $alt }}">
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}
      {{ with .backEnd }}
      <div class='back-div common-top-inline'>
        <h3 class="title-black-h3">{{ .title}}</h3>
        <div class='group'>
          <p>{{ .project }}</p>
          <ul>
            {{ range .group }}
            <li>{{ .name }}</li>
            {{ end }}
          </ul>
        </div>
        <div class='image'>
          <img src="/images/home/applications.png" alt="{{ .project }}">
          <img src="/images/home/applications.png" alt="{{ .project }}">
        </div>
      </div>
      {{ end }}
    </div>
  </div>
  {{ end }}
</section>

<section class='section-6'>
  {{ with .Params.section6 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <ul class="common-flex-layout">
      {{ $alt := .title }}
      {{ range .children }}
      <li>
        <img src="{{ .icon }}" alt="{{ $alt }}">
      </li>
      {{ end }}
    </ul>
    <div>
      <a href="{{ .btnLink }}"><button>{{ .btnContent }}</button></a>
    </div>
    <div class='link-div'>
      <a class="common-black-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
    </div>
    <a class='join-div' href="{{ .joinLink }}">
      <p class='p1'>{{ .joinTitle }}</p>
      <p class='p2'>{{ .joinContent }}</p>
      <img src="/images/home/join-right.svg" alt="{{ i18n "background image"}}">
    </a>
    <img class='bottom-img' src="{{ .image }}" alt="cncf">
  </div>
  <img class='bg-1' src="/images/home/section6-left.svg" alt="{{ i18n "icon" }}">
  <img class='bg-2' src="/images/home/section6-right.svg" alt="{{ i18n "icon" }}">
  {{ end }}
</section>

<script>
  var bindMouseLeftLi = function() {
    $('.section-3 .left-li').mouseenter(function() {
      var index = Number($(this).data('index'))
      $('.left-li').removeClass('active')
      $(this).addClass('active')
      $('.section-3 .right-div').hide().eq(index).show()
    })
  }

  var bindResize = function() {
    var screenWidth = $(window).width()
    if (screenWidth <= 768) {
      $('.image').find('img').attr('src', "/images/home/applications2.png")
    } 
    $(window).resize(function() {
      var screenWidth = $(window).width()
      if (screenWidth <= 768) {
        $('.image').find('img').attr('src', "/images/home/applications2.png")
      } else {
        $('.image').find('img').attr('src', "/images/home/applications.png")
      }
    })
  }
  bindMouseLeftLi()
  bindResize()
</script>
{{ end }}