{% extends "layout.html" %}

{% block title %}{{ name }}{% endblock %}

{% block content %}
<nav>
    <ul>
        {% for page in pages %}
        <li class="l{{page.level}}{% if page.is_error %} -error{% endif %}"><a href="{{ page.relative_path|urlencode }}" target="content" title="{{ page.name }}">{{ page.name }}</a></li>
        {% endfor %}
    </ul>
</nav>
<iframe src="" frameborder="0" name="content" class="content"></iframe>

<style>
    .l2 { padding: 10px 20px 10px 40px }
    .l3 { padding: 10px 20px 10px 60px }
    .l4 { padding: 10px 20px 10px 80px }
    .l5 { padding: 10px 20px 10px 100px }
    li.-error a { color: #C11; font-weight: bold; }
</style>
<script>
    document.addEventListener('click', function (event) {
        // If the clicked element doesn't have the right selector, bail
        if (!event.target.matches('nav a')) return;
        for (const child of event.target.parentElement.parentElement.children) {
            child.classList.remove('active');
        }
        event.target.parentElement.classList.add('active');

    }, false);

    window.addEventListener('message', (event) => {
        const activeTarget = event.data;

        for (const link of document.querySelectorAll('nav ul li a')) {
            if (link.href === activeTarget) {
                link.parentElement.classList.add('active');
            }
        }
    });

    if (window.parent !== null) {
        window.parent.postMessage(window.location.href, '*');
    }
</script>
{% endblock %}