{{ define "main" }}

<section class="section-1">
    <div class="common-layout">
        <span><a href='{{( .GetPage "/learn").RelPermalink}}'>← {{ i18n "Cloud Native Technology Class"}}</a></span> / <span>{{ .CurrentSection.LinkTitle }}</span>
    </div>
</section>

<section class="section-2">
    <div class="common-layout">
        <div class="left">
            {{ with .Params.video }}
            <video id="lesson-video" src="{{ .videoUrl }}" poster="{{ .snapshot }}" controls onplaying="handlePlayVideo()" onpause="handlePauseVideo()"></video>
            {{ end }}

            {{ with .Params.time }}
            <p class="date"><span class="time"></span>{{ . }}</p>
            {{ else }}
            <p class="date"><span class="time"></span>{{ .CurrentSection.Params.time }}</p>
            {{ end }}

            {{ with .Params.pdfUrl }}
                <div class="pdf-div">
                    <iframe src="{{ . }}" frameborder="0"></iframe>
                </div>
            {{ end }}
        </div>
        <div class="right" id="lesson">
            {{ $relPermalink := .RelPermalink }}

            {{ with .Site.GetPage "/learn" }}
            {{ range .Sections }}
            <div class="sections">
                <div class="sectionFolder">
                    <span class="text">{{ .LinkTitle }}</span>
                    <span class="icon"></span>
                </div>
                <ul id="list" class="hideLesson">
                    {{ range .Sections}}
                    <li class="{{ if eq (.GetPage " video").RelPermalink $relPermalink }}activeLine{{ end }}">
                        <a class="textLink" href='{{ (.GetPage "video").RelPermalink }}'>
                            <span class="videoIcon"></span>
                            <span class="text" title="{{ .LinkTitle }}">{{ .LinkTitle }}</span>
                        </a>
                        <div class="actions">
                            {{ with .GetPage "content" }}
                            <a class="picture {{ if eq .RelPermalink $relPermalink }} activePicture {{ end }}"
                                href="{{ .RelPermalink }}">
                                <div class="tooltip">{{ i18n "warnGraphic explanation" }}</div>
                            </a>
                            {{ end }}

                            {{/*  The follows function has not yet been activated  */}}
                            {{/*  and styles need update  */}}
                            {{ with .GetPage "courseware" }}
                            <a class="ppt {{ if eq .RelPermalink $relPermalink }} activeCourseware {{ end }}"
                                href="{{ .RelPermalink }}">
                                <div class="tooltip">{{ i18n "PPT courseware" }}</div>
                            </a>
                            {{ end }}

                            {{ with .GetPage "examination" }}
                            <a class="download {{ if eq .RelPermalink $relPermalink }} activeExamination {{ end }}"
                                href="{{ .RelPermalink }}">
                                <div class="tooltip">{{ i18n "Self-test" }}</div>
                            </a>
                            {{ end }}
                        </div>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}
            {{ end }}
        </div>
    </div>
</section>
<script>
    var icon = $("#play-icon")

    var handlePlayVideo = function() {
        icon.addClass('playing')
    }

    var handlePauseVideo = function() {
        icon.removeClass('playing')
    }

    var autoOpenFolder = function () {
        const lessonList = $('#lesson').children()
        lessonList.each((index, item) => {
            const sectionFolder = $(item).children('.sectionFolder')
            const activeVideo = $(item).find('li.activeLine')
            const isPicture = $(item).find('.activePicture')
            // open menu folder
            if (activeVideo.length > 0 || isPicture.length > 0) {
                sectionFolder.addClass('active')
                sectionFolder.next().removeClass('hideLesson')
            }
            if (isPicture.length > 0) {
                $(isPicture[0]).parents('li').removeClass('pptActive').addClass('pptActive')
            }
            // control menu opening and closing 
            sectionFolder.on('click', function () {
                sectionFolder.toggleClass('active')
                const ulList = sectionFolder.next()
                ulList.toggleClass('hideLesson')
            })
        })
    }

    autoOpenFolder()
</script>
{{ end }}