{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/flyer.css" />

{% endblock %}

{% block scroll_content %}

    <article class="flyer">

        <div class="page recto">
            <div class="page-content">

                <div class="layer recto__back bleeds"></div>

                <div class="layer recto__text pad">
                    
                    <header class="recto__title">
                        <h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
                        <h2 class="font-big new-moon-slanted-fvs">walks</h2>
        
                        <h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2>
                        <h2 class="font-big full-moon-slanted-fvs">walks</h2>

                        {#<div class="layer recto__drawing">
                            {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
                        </div>#}
                    </header>
    
                    <main class="text-content recto__langs">
                        <div class="recto__lang">
                            <p class="font-up">en</p>
                            <div class="progressive-fvs">
                                {{ page.sections["en"] }}
                            </div>
                        </div>
                        <div class="recto__lang">
                            <p class="font-up">fr</p>
                            <div class="progressive-fvs">
                                {{ page.sections["fr"] }}
                            </div>
                        </div>
                        <div class="recto__lang">
                            <p class="font-up">nl</p>
                            <div class="progressive-fvs">
                                {{ page.sections["nl"] }}
                            </div>
                        </div>
                    </main>
    
                    <footer class="recto__footer">
                        <p class="mono">
                            walks calendar at <a href="http://moonwalks.be">moonwalks.be</a>
                        </p>
                        <p class="mono">
                            an initiative by Anaïs Berck
                        </p>
                    </footer>
    
                </div>
            </div>
        </div>

        <div class="page verso">
            <div class="page-content">
                <div class="layer verso__back bleeds"></div>

                <div class="layer recto__drawing">
                    {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
                </div>


                <div class="layer verso__calendar pad">
                        <header class="date-time-info mono">
                            Dates and times are given in <span class="timezone"></span>
                        </header>
                        <div class="calendar-content">
                            <template id="cal-entry__template">
                                <div class="flyer-cal-entry">

                                    <div class="date mono"></div>

                                    <div class="day"></div>

                                    <div class="cal-entry__moon">
                                        <div class="moon-drawing"></div>
                                    </div>
                            
                                    <h2 class="phase-name"></h2>

                                    <div class="cal-entry__time mono">
                                        <span class="moon-time"></span>
                                    </div>
                            
                                    <div class="cal-entry__data mono">
                                        sunset <span class="sunset-time"></span>
                                    </div>

                                </div>
                            </template>
                        </div>
                        <footer class="verso__footer">
                            <!-- <p class="mono">
                                walks calendar at <a href="http://moonwalks.be">moonwalks.be</a>
                            </p> -->
                            <!-- <p class="mono">
                                reservations at <a class="mail"></a>
                            </p> -->
                        </footer>
                </div>
            </div>
        </div>
        
    </article>

    <!-- <template id="leaf-element">
        <div class="leaf">
        </div>
    </template>

    <template id="moon-element">
        <div class="moon">
        </div>
    </template> -->

{% endblock %}

{% block js_body %}
    {{ super() }}

    <script>
        // progressive text
        let prog_fvs = document.getElementsByClassName("progressive-fvs");

        for (let div of prog_fvs) {
            // separate every words in the p as a span
            let ps = div.getElementsByTagName("p");

            for (let p of ps){
                p.innerHTML = p.innerHTML.split(" ").map(x => "<span class='prog-fvs__span'>" + x + "</span>").join(" ");
            }
        }

        for (let div of prog_fvs) {
            let prog_spans = div.getElementsByClassName("prog-fvs__span");

            let i = 0;
            for (let prog_span of prog_spans){
                let value = (i / (prog_spans.length - 1)) / 2;
                //console.log(value);
                updateAxis($(prog_span), value, secondAxis=false);
                i = i + 1;
            }
        }
    </script>

    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/moon-calendar.js"></script>
    <script>
        let now = new Date();
        let months_ahead = 12;
        let month_to_get = now;
        let queue = [];

        window.is_flyer = true;
    
        $(document).ready(function(){
          createCalendar(months_ahead);
          writeTimezone();        
        });
    </script>
{% endblock %}