{{ define "main" }}
  <main>
    <section class='entries'>
      <div class="timeline-feed">
        <div class="timeline-tags">
            <div class="timeline-tags-headline">Hashtags:</div>  
            <ul><li class="timeline-tag"><a href="/timeline">all</a></li>{{ range .Site.Taxonomies.timelines }}<li class="timeline-tag"><a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a></li>{{ end }}
            </ul>
        </div>

        <div class="timeline-container">         
            <div class="timeline-start"><span>Digital Harvest Timeline</span></div>
            <div class="timeline-events">
                {{ range .Pages.ByDate }}
                    {{- partial "timeline_event.html" . -}}
                {{ end }}
            </div>
            <div class="timeline-end"></div>
            <div class="timeline-line">
                <div class="timeline-line-head"></div>
                <div class="timeline-line-body"></div>
            </div>
        </div>
    </div>
        
    <script>
        function scrollToEvent(){
            var anchor = document.body.querySelector('.timeline-url[data-title="meydan-I"]');
            if (typeof(anchor) != 'undefined' && anchor != null) {
                anchor.scrollIntoView({ 
                    block: 'center',
                    inline: 'center',
                    behavior: 'smooth' 
                });
            }
        }

        setTimeout(function(){
            if (window.performance && window.performance.navigation.type !== window.performance.navigation.TYPE_BACK_FORWARD) {
                scrollToEvent();
            }
        }, 800);

        var events = document.querySelectorAll(".timeline-event");
        window.addEventListener('scroll', fadeIn ); 
        function fadeIn() {
            for (var i = 0; i < events.length; i++) {
                var event = events[i]
                var distInView = event.getBoundingClientRect().top - window.innerHeight + 20;
                if (distInView < 0) {
                    event.classList.add("inView");
                } else {
                    event.classList.remove("inView");
                }
            }
        }
        fadeIn();

        function popupOpen() {
            var popup = document.getElementById("popup");
            popup.classList.add("view");
        }

        function popupClose() {
            var popup = document.getElementById("popup");
            popup.classList.remove("view");
        }

        setTimeout(function(){
            if (window.performance && window.performance.navigation.type !== window.performance.navigation.TYPE_BACK_FORWARD) {
                popupOpen();
            }
        }, 2200);
    </script>
        
    <div id="popup" class="popup-container">
        <div class="popup">
            <div class="popup-header">
                <h3>Welcome to the Digital Harvest Timeline</h3>
                <button class="popup-close" onclick="popupClose()"></buttonv>
            </div>
            <div class="popup-content">
                <p>Harvest refers to artistic recordings of discussions and meetings. Harvesters listen, reflect, and depict this process from their own perspectives, forms, and artistic practices. Harvesting can be seen as a way of collective writing that enables continuous collective learning, from different sensory experiences.</p>
                <p>Here you can find a timeline of harvests to inform our continuous collective learning process.</p>
            </div>
            <div class="popup-footer"><svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z"></path>
            </svg></div>
        </div>
        <div class="popup-bg" onclick="popupClose()"></div>
    </div>        

  </main>
{{ end }}