{% 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 <span class="new-moon-slanted-fvs">walks</span>
                        </h2>
        
                        <h2 class="phase-name font-big full-moon-fvs">
                            Full moon <span class="full-moon-slanted-fvs">walks</span>
                        </h2>

                        <div class="layer recto__drawing">
                            {% include 'inline-svg/bouleau-lune.svg' %}
                        </div>
                    </header>

                    <footer class="recto__footer mono">
                        <p>
                            an initiative by Anaïs Berck <br/>
                            complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
                        </p>
                    </footer>
    
                    <main class="text-content recto__langs">
                        <section class="recto__lang data-section" data-box-title="Sonian Forest walks">
                            <div class="progressive-fvs">
                                {{ page.sections["en"] }}
                            </div>
                        </section>
                        <section class="recto__lang data-section" data-box-title="Balades Forêt de Soignes">
                            <div class="progressive-fvs">
                                {{ page.sections["fr"] }}
                            </div>
                        </section>
                        <section class="recto__lang data-section" data-box-title="Zoniënwoud wandelingen">
                            <div class="progressive-fvs">
                                {{ page.sections["nl"] }}
                            </div>
                        </section>
                    </main>
    
                    <!-- <footer class="recto__footer mono">
                        <p>
                            an initiative by Anaïs Berck <br/>
                            complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
                        </p>
                    </footer> -->
                    <!-- &mdash; <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a>, -->
                    <!-- &nbsp;<span>•</span>&nbsp; -->
    
                </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">
                        Moon Phases for Brussels, generated on the <span class="generation-time"></span>
                    </header>#}
                    <section class="data-section calendar-content" data-box-title="Moon Phases for Brussels">
                        <header class="mono">generated on the <span class="generation-time"></span></header>
                        <template id="cal-entry__template">
                            <div class="flyer-cal-entry">

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

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

                                <h2 class="phase-name"></h2>

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

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

                                <h2 class="sunset-name">Sunset</h2>
                        
                                <div class="cal-entry__data mono">
                                    <span class="sunset-time"></span>
                                </div>

                            </div>
                        </template>
                    </section>
                    <footer class="verso__footer">
                        <p class="mono">
                            <!-- complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a> -->
                            <!-- <br/> reservation at <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</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();
          
          $('.generation-time').html(format_date_time(now)['date']);
        });
    </script>
{% endblock %}