{% extends 'partials/base.html.twig' %}

{# `page` is irrelevant here #}
{# use `target_pages`, injected by m3-p2 plugin #}

{% block stylesheets %}
    {% do assets.addCss('theme://css/columns.css') %}
    {{ parent() }}
{% endblock %}

{#{% block javascripts %}#}
    {#{% do assets.addJs('theme://js/syncscroll.js', {group:'bottom'}) %}#}
    {#{{ parent() }}#}
{#{% endblock %}#}


{% block body %}

    <div class="claude-columns">
    {% for column in target_pages %}
        <section id="{{ column.slug }}" class="claude-column" name="language">
            {{ column.content | raw }}
            {% include 'partials/contributions-incentive.html.twig' with {page: column} %}
        </section>
    {% endfor %}
    </div>

{% endblock %}

{# Disable the language selector. #}
{# We also do this procedurally in user/plugins/m3-p2/m3-p2.php #}
{% block header_language_selection %}
{% if related_lessons %}

<div id="lesson-selector" class="dropdown-selector">
    <button id="lesson-selector-button" class="btn dropdown-menu-button" type="button">
        📚 {{ related_lessons | length }}
        <i class="fa fa-caret-down"></i>
    </button>
    <ul id="lesson-selector-dropdown" class="dropdown-menu lesson-list">
{% for related_lesson_slug, related_lesson in related_lessons %}
        <li>
            <a href="/{{ language_selector.current }}/lessons/{{ related_lesson.slug }}">
                {{ related_lesson.name ? related_lesson.name : related_lesson.slug }}
            </a>
        </li>
{% endfor %}
    </ul>
</div>
{% endif %}
{% endblock %}
{# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #}
{#{% block header_language_selection_section %}{% endblock %}#}
