{{ define "main" }}
{{ $language := .Site.Language.Lang }}
{{ $data := index .Site.Data .Site.Language.Lang }}
<div class="shadow"></div>
<section class='section-1'>
  {{ with .Params.section1 }}
  <div class="common-layout">
    <div>
      <h1>{{ .title | safeHTML }}</h1>
      <p class='p1'> {{ .topic | safeHTML }}</p>

      <p class='p2'>{{ .content | safeHTML }}</p>

      <!-- {{range .btns}}
      <a href="{{ .link }}" class="{{.class}}" target="_blank" rel="noopener noreferrer">
        <button class='download-btn download-btn2 common-btn'>{{ .content | safeHTML }}</button>
      </a>
      {{end}} -->
    </div>

    <div class="custom-vertical-carousel">
      <div class="carousel-inner">
        {{ range $index, $item := .carouselItems }}
        <div class="carousel-slide">
          <div class="slide-content">
            {{ if .image }}
            <img src="{{ .image }}" alt="{{ .title }}">
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>
    </div>


    <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.png" 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>
<div class="tabs">
  <div class="tab-div">
    {{ with .Params.tabs }}
    <ul>
      {{range .children}}
      <li>{{ .title | safeHTML }}</li>
      {{ end }}
    </ul>
    {{ end }}
  </div>
  <div class="content-section active ">
    <section class="section-2 {{ $language }}">
      {{ 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 }}
      <div class="section-7">
        {{ with .Params.section7 }}
        <div class="common-layout">
          <h2 class="title-black-h2">{{ .title }}</h2>
          <img src="{{ .image }}" alt="{{ .title }}">
        </div>
        {{end}}
      </div>
      <div 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 }}
      </div>
    </section>
  </div>
  <div class="content-section ">
    <section class="section-2 section-8 {{ $language }}">
      {{ with .Params.section8 }}
      <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>
  </div>

</div>


<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">

    <h2 class="title-white-h2">{{ .title }}</h2>


    <ul>
      {{ range .features}}
      <li>
        <div>
          <div class='top-line {{ .color }}'></div>
          <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
          <p class="common-content ">{{ .name }}</p>
          <p class="common-p content-p">{{ .content | safeHTML }}</p>
        </div>


        <a class="common-p green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More"
          }}
          →</a>

      </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-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>
        <a href="{{ .link}}" target="_blank" rel="noopener noreferrer">
          <img src="{{ .icon }}" alt="{{ $alt }}">
        </a>
      </li>
      {{ end }}
    </ul>
    <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>

<!-- {{ if eq .Site.Language.Lang "zh"}}
<div class="meet-div">
  <img class="close" src="/images/home/close.svg" alt="close">
  <img src="/images/home/group-18.svg" alt="{{ i18n "icon" }}">
  <img class="img-2" src="/images/home/group-16.svg" alt="{{ i18n "icon" }}">
  <p>12.19 北京 · aiospace机遇空间</p>
  <img class="img-3" src="/images/home/二维码.jpg" alt="二维码">
  <img class="img-4" src="/images/home/group-19.svg" alt="{{ i18n "icon" }}">
</div>
{{ end }} -->

<div class="join-us">
  <img class="close" src="/images/home/close.svg" alt="close">
  <img class="modalImage" src="/images/home/modal-content.svg" alt="icon"></img>
  <h2>{{ i18n "Join Us" }}</h2>
  <p>{{ i18n "Join Us Content" }}</p>
  <div>
    <div class="slack">
      <img src="/images/home/slack.svg" alt="slack"></img>
      <p>
        <a href="{{ .Site.Params.slackLink }}" target="_blank">
          {{ i18n "Join Slack" }}
        </a>
      </p>
    </div>
    <div class="wechat">
      <img src="/images/home/wechat.svg" alt="wechat"></img>
      <p>{{ i18n "Join Wechat" }}</p>
    </div>
  </div>
</div>

<div class="modal-for-video">
  <img class="close-video" alt="close icon" src="/images/videos/close.png">
  <div class="video-div" data-language='{{ .Site.Language.Lang }}'>
    <video class="start1" src="" poster="/images/home/poster.png" controls autoplay></video></video>
    <iframe title="video" class="start2" src=""></iframe>
  </div>

</div>






<script>

  var controlVideo = function () {

    var startVideo = $('div.img1-div')
    var shadow = $('div.shadow')
    var video = $('div.modal-for-video')
    var start1 = $('video.start1')
    var start2 = $('iframe.start2')
    var closeVideo = $('img.close-video')
    var language = $('div.video-div').data('language')
    var height = document.body.scrollHeight + 'px'

    let openVideo = function () {
      if (language == 'zh') {
        start2.css('display', 'none')
        start1.attr('src', "https://kubesphere-community.pek3b.qingstor.com/videos/kubesphere-demo-cn.mp4")
        video.css('height', 'auto')

      }
      else if (language == 'en') {
        start1.css('display', 'none')
        start2.attr('src', "https://www.youtube.com/embed/YxZ1YUv0CYs")
      }

      shadow.show()
      shadow.css('height', `${height}`)

      video.show();
      closeVideo.show();

    }

    let endVideo = function () {
      closeVideo.hide()
      start1.attr('src', '')
      start2.attr('src', '')
      shadow.hide()
      video.hide()
    }

    shadow.hide();

    startVideo.click(function () {
      openVideo()
    })

    closeVideo.click(function () {
      endVideo()
    }
    )
    shadow.click(function () {
      endVideo()
    })

  }

  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")
      }
    })
  }

  var bindCount = function () {
    setTimeout(function () {
      $('.join-us').fadeIn()
    }, 10000)
  }

  var bindClose = function () {
    $('.join-us .close').click(function (e) {
      e.stopPropagation()
      $('.join-us').fadeOut()
    })
  }

  var bindMeet = function () {
    $('.meet-div').click(function () {
      window.open('https://ask.kubesphere.io/forum/d/2712-meetup-topic')
    })
  }


  var tabCarousel = function () {
    var tabs = $('.tab-div li');
    var sections = $('.content-section');

    var toggleBtn = $('#toggleBtn');
    var countdownEl = $('#countdown');

    var currentTab = 0;
    var autoPlayInterval;
    var countdownInterval;
    var countdown = 10;
    var isAutoPlay = true;


    var showTab = function (index) {

      sections.hide().removeClass('active');

      tabs.removeClass('active');

      sections.eq(index).show().addClass('active');

      tabs.eq(index).addClass('active');

      currentTab = index;

      resetCountdown();
    };

    var switchTab = function () {
      var nextIndex = currentTab === 0 ? 1 : 0;
      showTab(nextIndex);
    };

    var resetCountdown = function () {
      countdown = 10;
      countdownEl.text(countdown);
    };

    tabs.click(function () {
      var index = $(this).index();
      showTab(index);
    });

  };

  $(document).ready(function () {
    if ($('.tab-div li.active').length === 0) {
      $('.tab-div li:first').addClass('active');
    }

    if ($('.content-section.active').length === 0) {
      $('.content-section:first').addClass('active').show();
    }

    tabCarousel();
  });


  $(document).ready(function () {
    var $carousel = $('.custom-vertical-carousel');
    var $slides = $carousel.find('.carousel-slide');
    var currentIndex = 0;
    var totalSlides = $slides.length;
    var autoPlayInterval;

    function updateSlides() {
      $slides.removeClass('active prev next hidden');

      $slides.eq(currentIndex).addClass('active');

      var prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
      $slides.eq(prevIndex).addClass('prev');


      var nextIndex = (currentIndex + 1) % totalSlides;
      $slides.eq(nextIndex).addClass('next');

      $slides.not('.active, .prev, .next').addClass('hidden');
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % totalSlides;
      updateSlides();
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
      updateSlides();
    }

    // auto play
    function startAutoPlay() {
      stopAutoPlay();
      autoPlayInterval = setInterval(nextSlide, 3000);
    }

    function stopAutoPlay() {
      if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
        autoPlayInterval = null;
      }
    }

    // go to slide
    function goToSlide(index) {
      if (index >= 0 && index < totalSlides) {
        currentIndex = index;
        updateSlides();
      }
    }

    // init
    updateSlides();
    startAutoPlay();

    // hover
    $carousel.hover(
      function () { stopAutoPlay(); },
      function () { startAutoPlay(); }
    );

    // keyboard control
    $(document).on('keydown', function (e) {
      if (e.key === 'ArrowDown') {
        nextSlide();
        stopAutoPlay();
        startAutoPlay();
      } else if (e.key === 'ArrowUp') {
        prevSlide();
        stopAutoPlay();
        startAutoPlay();
      }
    });

  });

  controlVideo()
  bindMouseLeftLi()
  bindResize()
  bindCount()
  bindClose()
  bindMeet()
</script>

<script src="//cbe.huiju.cool/cbe/collect?tid=23555798970015596&at=0&h=web"></script>
<script>        clab_tracker.ready(function () { this.push({ "pageType": "web" }); this.track("open_page", {}); });      </script>

{{ end }}