<!DOCTYPE html>
<html lang="{{ (grav.language.getActive ?: grav.config.site.default_lang)|e }}">
<head>
{% block head %}
    <meta charset="utf-8" />
    <title>{% if header.title %}{{ header.title|e }} | {% endif %}{{ site.title|e }}</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include 'partials/metadata.html.twig' %}

    <link rel="icon" type="image/png" href="{{ url('theme://images/logo.png')|e }}" />
    <link rel="canonical" href="{{ page.canonical(true)|e }}" />
    {# <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> #}
{% endblock head %}

{% block stylesheets %}
    {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}
    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
    {% do assets.addCss('theme://css/pagedjs.css', 98) %}
    {% do assets.addCss('theme://css/custom.css', 97) %}
    {% do assets.addCss('theme://fonts/fonts.css', 96) %}
    {% do assets.addCss('theme://css/mep_carnet.css', 95) %}
{% endblock %}

{% block javascripts %}
    {% do assets.addJs('jquery', 100) %}
    {% do assets.addJs('theme://js/parsing.js', { group: 'bottom' }) %}
    {% do assets.addJs('theme://js/paged.polyfill.js', { group: 'bottom' }) %}
    {% do assets.addJs('theme://js/layout.js', { group: 'bottom' }) %}
{% endblock %}

{% block assets deferred %}
    {{ assets.css()|raw }}
    {{ assets.js()|raw }}
{% endblock %}
</head>
<body id="top" class="{{ page.header.body_classes|e }}">

        {% block body %}
            <section id="body">
                <div>
                {% block content %}{% endblock %}
                </div>
            </section>
        {% endblock %}


{% block bottom %}
    {{ assets.js('bottom')|raw }}
{% endblock %}
{#
<script>
    // transformer les balises [...] en <div class="...">
	let content = document.getElementById('body');

        content = content.innerHTML.replaceAll(/\[([^\/\]]+)\]/g, '<div class="$1">');
        content = content.replaceAll(/\[\/([^\]]+)\]/g, '</div>');

        document.getElementById("body").innerHTML = content;
    
    // isoler les chiffres des titres
    let moments = document.getElementsByClassName("moment");

    for(let i = 0; i < moments.length; i++) {
        moments[i].innerHTML = "<span class='first-letter'>" + moments[i].innerHTML.substring(0, moments[i].innerHTML.indexOf('—')) + "</span>" + moments[i].innerHTML.slice(moments[i].innerHTML.indexOf(' —'));
    }

    // cleaner le balisage des éléments contenant plusieurs paragraphes
    let contentToParse = [];
    let labeurs = document.getElementsByClassName("labeur");
    for(let i = 0; i < labeurs.length; i++) {
        contentToParse.push(labeurs[i]);
    }
    let latours = document.getElementsByClassName("latour");
    for(let i = 0; i < latours.length; i++) {
        contentToParse.push(latours[i]);
    }
    let lampes = document.getElementsByClassName("lampe");
    for(let i = 0; i < lampes.length; i++) {
        contentToParse.push(lampes[i]);
    }

    for(let i = 0; i < contentToParse.length; i++) {
        if (contentToParse[i].childNodes.length == 1) {
            contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
        } else {
            contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
        }
        // headers latour / lampe
        if (contentToParse[i].classList.contains("latour")) {
            contentToParse[i].childNodes[0].innerHTML = "<div class='latour-header'><div><img src='{{ url('theme://assets/map.png') }}' alt='carte'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
        } else if (contentToParse[i].classList.contains("lampe")) {
            contentToParse[i].childNodes[0].innerHTML = "<div class='lampe-header'><div><img src='{{ url('theme://assets/lampe.png') }}' alt='lampe'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
        }
        // micro-typo
        for(j = 0; j < contentToParse[i].childNodes.length; j++) {
            let contentHTML = contentToParse[i].childNodes[j].innerHTML;
            if (contentHTML != undefined) {
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' :', '&nbsp;:');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' ?', '&nbsp;?');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' !', '&nbsp;!');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('« ', '«&nbsp;');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', '&nbsp;»');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '«&nbsp;');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', '&nbsp;»');
                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
            }
        }
    }  

    // fonction s'éxecute après le rendu de pagedJS
    // cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
    class setMarginTexts extends Paged.Handler {
        constructor(chunker, polisher, caller) {
            super(chunker, polisher, caller);
        }

        afterPreview(pages) {
            // afficher correctement les éléments en marge
            let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
            for (let i = 0; i < topLeftBoxes.length; i++) {
                topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
            }
            let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
            for (let i = 0; i < bottomLeftBoxes.length; i++) {
                bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
            }

            // cleaner pour que les paragraphes tombent sur la marge haute
            for(let i = 0; i < labeurs.length; i++) {
                if (labeurs[i] == labeurs[i].parentNode.firstElementChild
                    && !labeurs[i].firstElementChild.hasAttribute("data-split-from")) {
                    labeurs[i].firstElementChild.style.marginTop = "0px";
                }
            }
            // pareil pour les titres temps
            for (let i = 0; i < moments.length; i++) {
                if (moments[i].previousElementSibling?.tagName === "P"
                    && moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
                        moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
                }
            }
            // enlever les paragraphes vides
            let paragraphes = document.querySelectorAll("p");
            for (let i = 0; i < paragraphes.length; i++) {
                if (paragraphes[i].innerHTML == "") {
                    paragraphes[i].remove();
                }
            }
            // images collées en bas
            let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
            for (let i = 0; i < bottomImgs.length; i++) {
                let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
                bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
            }
            // éléments justifiés pas nécessaires
            let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
            for (let i = 0; i < justifiedSplitEl.length; i++) {
                for (let j = 0; j < justifiedSplitEl[i].childNodes.length; j++) {
                    let elStyle = justifiedSplitEl[i].childNodes[j].style;
                    if (elStyle != undefined) {
                        elStyle.textAlignLast = "left";
                    }
                }
            }
            // images fullspread
            let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed');
            for (let i = 0; i < fullspreadEl.length; i++) {
                let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
                let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
                let imgOverflowEl = document.createElement('div');
                if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
                    imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
                } else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
                    imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
                } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) {
                    imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
                } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
                    imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
                }
                let imgOverflow = document.createElement('img');
                imgOverflow.src = imgSrc;
                imgOverflowEl.append(imgOverflow);
                nextPage[0].append(imgOverflowEl);
                if (fullspreadEl[i].classList.contains('imgfullspreadright')
                || fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
                || fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
                    let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
                    fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
                }
            }
            // fullpage img page gauche
            let fullPageImg = document.getElementsByClassName('fullpageimage');
            for (let i = 0; i < fullPageImg.length; i++) {
                if (fullPageImg[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                .classList.contains('pagedjs_left_page')) {
                    fullPageImg[i].style.marginLeft = '-22mm';
                }
            }
            // encarts bleed
            let encarts = document.querySelectorAll('.latour, .lampe')
                for (let i = 0; i < encarts.length; i++) {
                    if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                    .classList.contains('pagedjs_right_page')) {
                        encarts[i].style.marginRight = '-22mm';
                        encarts[i].style.paddingRight = '22mm';
                    }
                if (encarts[i].hasAttribute('data-split-original')) {
                    let plainColor = document.createElement('div');
                    let plainHeight = encarts[i]
                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                    .getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
                    plainColor.setAttribute('class', 'encart-split');
                    if (encarts[i]
                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                    .classList.contains('pagedjs_right_page')) {
                        plainColor.style.width = "149mm";
                    } else {
                        plainColor.style.width = "129mm";
                    }
                    plainColor.style.height = plainHeight + "px";
                    encarts[i].parentNode.append(plainColor);
                } else if (encarts[i].hasAttribute('data-split-from')) {
                    let plainColor = document.createElement('div');
                    plainColor.setAttribute('class', 'encart-split');
                    if (encarts[i]
                    .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                    .classList.contains('pagedjs_right_page')) {
                        plainColor.style.width = "149mm";
                    } else {
                        plainColor.style.width = "129mm";
                    }
                    plainColor.style.height = "22mm";
                    plainColor.style.top = "-22mm";
                    encarts[i].parentNode.prepend(plainColor);
                }
            }
        }
    }
    Paged.registerHandlers(setMarginTexts);
 
</script>
#}
</body>
</html>
