{% extends "base.html" %}

{% block title %}{{super()}} - {{page['request']}}{% endblock%}

{% block css_pad %}
    <!--
        ETHERCSS
        By using `export/txt` we can export the content of a pad as a css stylesheet.
        The second - more specific pad - is automatically created according to the page id.
        See at the bottom of the page the used script to load them inside of the style tags.
    -->
    <style class="ether-styles" data-pad="http://pads.osp.kitchen/p/mainz-global/export/txt" ></style>
    <style class="ether-styles" data-pad="http://pads.osp.kitchen/p/mainz-{{page['request']}}/export/txt" ></style>
{% endblock %}

{% block body %}
    
    <!-- 
        CONTENT requested from the wikipage python module
    -->
    <main class="wiki-body">
        <h1>{{page['title']|safe}}</h1>

        {#<div class="wiki-categories">
            <ul>
                {% for cat in page['categories'] %}
                    <li>{{cat}}</li>
                {% endfor %}
            </ul>
        </div>#}

        {{page['cleaned_content']|safe}}

        {#<div class="wiki-links">
            <h2>Internal links</h2>
            <ul>
                {% for link in page['links'] %}
                    <li>{{link}}</li>
                {% endfor %}
            </ul>
        </div>#}

    </main>
    
    <!-- 
    SCRIPT is necessary as some browser (?) don't accept the `/export/txt` trick,
    so we load them into <style> tags through ajax 
    -->
    <script>
        const pad_loaded = new Event("pad-loaded");

        // load content from the data-pad attr from .ether-styles tag
        $(".ether-styles").each( function(){
            $(this).load($(this).attr("data-pad"), function(){
                // dispatch an event when pad styling has been fully loaded
                window.dispatchEvent(pad_loaded);
            });
        });
    </script>
    
{% endblock %}