{{ define "main" }}

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

<section class="section-2">
    {{ with .Params.section2 }}
    <div class="common-layout">
        <ul class="common-flex-layout">
        {{ range .topType }}
            <li>
                <div class='title'>
                    <img src="{{ .icon1 | relURL }}" alt="{{ .name }}">
                    <p>{{ .name }}</p>
                </div>
                <div class='line'></div>
                <ul>
                    {{ range .children }}
                    <li>
                        <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .content }}</a>
                    </li>
                    {{ end }}
                </ul>
                <img class='bottom-img' src="{{ .icon2 | relURL }}" alt="{{ i18n "background image"}}">
            </li>
        {{ end }}
        </ul>
        <div class='organization-div'>
            {{ with .organization }}
            {{ $topIcon := .topIcon }}
            <h2 class="title-black-h2">{{ .topic }}</h2>
            <div>
                <div class='top-div'>{{ .name }}</div>
                <img src="{{ .icon | relURL }}" alt="{{ .name }}">
                <ul class="common-flex-layout">
                    {{ range $index, $element := .type }}
                    <li>
                        <div>
                            <img src="{{ .icon | relURL }}" alt="{{ .name }}">
                            <span>{{ .name }}</span>
                        </div>
                        {{ if .children }}
                        <ul>
                            {{ range .children }}
                            <li class="">
                                <img src="{{ $topIcon | relURL }}" alt="{{ .name }}">
                                <div>{{ .name }}</div>
                                {{ if eq $index 1}}
                                <p class='left'>{{ .content }}</p>
                                {{ else if eq $index 2}}
                                <p class='right'>{{ .content }}</p>
                                {{ end }}
                                <p></p>
                            </li>
                            {{ end }}
                        </ul>
                        {{ end }}
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}
        </div>
    </div>
    {{ end }}
</section>

<section class='section-3 common-layout'>
    {{ with .Params.section3.interestGroup }}
    <h2 class="title-black-h2">{{ .title }}</h2>
    <p class="title-p">{{ .content }}</p>
    <div class="scroll">
        <ul class='interest-ul common-layout' data-index='0' data-length='{{ len .children }}'>
            {{ range $index, $element := .children }}
            {{ $active := "" }}
            {{ $icon := $element.icon }}
            {{ if eq $index 0 }}
            {{ $active = "active" }}
            {{ $icon = $element.iconActive }}
            {{ end }}
            <li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
                <img src="{{ $icon | relURL }}" alt="{{ .name }}">
                <p>{{ $element.name }}</p>
            </li>
            {{ end }}
        </ul>
    </div>
    <div class='bottom-div'>
        {{ with $first := index .children 0}}
        <div>
            <div class='btn-change btn-left' data-num='-1'></div>
            <img class='bottom-img' src="{{ .iconActive | relURL }}" alt="">
            <div class='btn-change btn-right' data-num='1'></div>
        </div>
        <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
        <p class="common-p">{{ .content }}</p>
        <ul>
            {{ range .children }}
            <li>
                <img src="{{ .icon | relURL }}" alt="">
            </li>
            {{ end }}
        </ul>
        {{ end }}
    </div>
    {{ end }}
</section>

<section class='section-calendar'>
    {{ with .Params.sectionCalendar }}
    <div>
        <div>
            <iframe src="{{ .iframeUrl }}" style="border: 0" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
    {{ end }}
</section>

<section class='section-4'>
    {{ with .Params.section4.involved }}
    <img src="/images/contribution/involve-bg.jpg" alt="{{ i18n "background image" }}">
    <h2 class="title-white-h2 ">{{ .title }}</h2>
    <div  class="common-flex-layout">
        {{ range .children}}
        <div>
            <img src="{{ .icon | relURL }}" alt="{{ .title }}">
            <h3 class="title-white-h3">{{ .title }}</h3>
            <p class="common-center-p">{{ .content }}</p>
            <div>
                <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
            </div>
        </div>
        {{ end }}
    </div>
    {{ end }}
</section>

<section class='section-5'>
    <div class="common-layout">
        {{ with .Params.section5 }}
        <h2 class="title-black-h2">{{ .title }}</h2>
        {{ $alt := .title }}
        <ul>
            {{ range .list }}
            <li>
                <img src="{{ .icon }}" alt="{{ $alt }}">
            </li>
            {{ end }}
        </ul>
        {{ end }}
    </div>
</section>

<script>
    var bindChangeIcon = function() {
        var length = Number($('.interest-ul').data('length'))
        $('.btn-change').click(function(event) {
            var index = Number($('.interest-ul').data('index'))
            var count = Number($(this).data('num'))
            var nextIndex = (index + count + length) % length
            $('.interest-ul').data('index', nextIndex)
            changeByIndex(nextIndex)
        })
    }

    var bindIconClick = function() {
        $('.interest-ul li').click(function(event) {
            var nextIndex = $(this).data('index')
            $('.interest-ul').data('index', nextIndex)
            changeByIndex(nextIndex)
        })
    }

    var changeByIndex = function(index) {
        changeCurrentElement()
        var nextElement = $('.interest-ul li').eq(index)
        changeNextElement(nextElement)
    }

    var changeCurrentElement = function() {
        var currentElement = $('.section-3 .active')
        var info = currentElement.data('info')
        var currentElementImage = currentElement.find('img')
        currentElementImage.attr({ src: info.icon })
        currentElement.removeClass('active')
    }

    var changeNextElement = function(nextElement) {
        var info = nextElement.data('info')
        var nextElementImage = nextElement.find('img')
        nextElementImage.attr({ src: info.iconActive })
        nextElement.addClass('active')
        changeBottomContentByInfo(info)
    }

    var changeBottomContentByInfo = function(info) {
        var bottomDiv = $('.section-3 .bottom-div')
        bottomDiv.find('.bottom-img').attr({ src: info.iconActive });
        bottomDiv.find('a').text(info.linkContent).attr({ href: info.link })
        bottomDiv.find('p').text(info.content)
        var ul = bottomDiv.find('ul')
        ul.empty()
        $.each(info.children, function( key, value ) {
            ul.append('<li><img src="' + value.icon + '" alt="" ></li>');
        });
    }

    bindIconClick()
    bindChangeIcon()
</script>
{{ end }}