{% extends "bases/app.html" %}
{% import "macros.html" as macros %}

{% block title %}{{ current_zone }} ⋅ Records ⋅ {% endblock title %}

{% block main %}
    <h1>Gestion de la zone {{ current_zone }}</h1>
    <nav aria-label="Secondaire">
        <ul>
            <li>
                {{ macros::nav_link(
                    content="Enregistrements",
                    href="/zone/" ~ current_zone ~ "/records",
                    current_page=nav_page,
                ) }}
            </li>
            <li>
                {{ macros::nav_link(
                    content="Membres",
                    href="/zone/" ~ current_zone ~ "/members",
                    current_page=nav_page,
                ) }}
            </li>
        </ul>
    </nav>
    <section>
        <h2>Enregistrements</h2>
        <zone-content>
        </zone-content>
    </section>
    <aside>
        <h2>Aide</h2>
    </aside>
{% endblock main %}

{% block scripts %}
    <script type="module">
        const zoneName = '{{ current_zone }}';

        import initRecordsComponent from '/scripts/records.js';

        initRecordsComponent(document.querySelector('zone-content'), { zone: zoneName });
    </script>
{% endblock scripts %}