{% 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 %}

{% embed 'partials/language-selector.html.twig' %}
    {% block polyglot_language_selector %}{% endblock %}
{% endembed %}

{% if related_lessons %}

{# We should have a <nav> somewhere, perhaps -- not 100% sure it's okay to use one here #}

<div {#id="lessons-navigation"#} class="dropdown-navigation lessons-dropdown-navigation">

{% if previous_lesson_slug %}
    <a
        class="dropdown-navigation-previous"
        href="/{{ language_selector.current }}/lessons/{{ previous_lesson_slug }}"
        title="Previous lesson"
    >
        &#8592;
    </a>
{% endif %}

{# We still define ids, yet there's no javascript attached.  CSS uses ids ; #pragma -- #wip, we're removing those #}
<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>

{% if next_lesson_slug %}
    <a class="dropdown-navigation-next"
       href="/{{ language_selector.current }}/lessons/{{ next_lesson_slug }}"
       title="Next lesson">
        &#8594;
    </a>
{% endif %}

</div>
{% endif %}

{% endblock %}
{# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #}
{#{% block header_language_selection_section %}{% endblock %}#}
