{% extends "base.html" %}

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

{% block body %}

    <!-- 
        LINKS to easily open corresponding pads in new tabs 
    -->
    <header id="interface-header">
        <h2>page</h2>
        <p><a href="/{{page['request']}}" target="_blank">{{page['request']}}</a></p>
        <h2>links</h2>
        <a href="http://pads.osp.kitchen/p/mainz-global" target="_blank">global pad</a>
        <a href="http://pads.osp.kitchen/p/mainz-{{page['request']}}" target="_blank">specific pad</a>
        <a href="https://en.wikipedia.org/wiki/{{page['request']}}" target="_blank">wikipedia</a>
        <a href="#print" onclick="printExternal()">print</a>
    </header>
    
    <div id="interface-content">
        <iframe src="/{{page['request']}}--get"></iframe>
    </div>

    <script>
        // print the equivalent page with --get (without the interface)
        function printExternal(){
            let url = "/{{page['request']}}--get";
            let printWindow = window.open(url, 'Print');
            // once the pad styling are fully loaded (through custom event)
            printWindow.addEventListener("pad-loaded", function(){
                printWindow.print();
                printWindow.close();
            }, true);
        }
    </script>
    
{% endblock %}