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

{# Feature: View all translations of a specific course in synchronized columns. #}

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


{% block stylesheets %}
    <style>
        .language-banner {
            position: absolute;
            mask-repeat: no-repeat;
            {#mask-image: url("/{{ grav.locator.findResource('plugin://m3-p2/flags/mask.png', false) }}") ;#}
            right: 0.333em;
            opacity: 0.42;
        }
        .claude-column {
            position: relative;
            padding-top: 0 !important;
        }
    </style>
    {% 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_page | translations %}
        <section id="{{ column.slug }}" class="claude-column syncscroll" data-name="language">
            <div class="language-banner">
                <img alt="{{ column.language|capitalize }}" src="{{ path_flags ~ column.language }}.png" />
            </div>
            {{ column.content | raw }}
            {#{% include 'partials/contributions-incentive.html.twig' with {page: column} %}#}
        </section>
    {% endfor %}
    </div>
{% endblock %}


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