{% load i18n %}

{% if texts %}
    <div id="alignments-tabs" data-controller="tabs">
        <div class="content">
            <h2 class="mt-8">
                {% if texts|length > 2 %}
                    {% translate "Alignments" %}
                {% else %}
                    {% translate "Alignment" %}
                {% endif %}
            </h2>
        </div>

        <div class="tab-container tabs-fill mb-3">
            <ul role="tablist"
                data-action="keydown->tabs#keyboardA11Y"
                aria-label="{% translate 'Alignments tabs' %}">
                {% for text in texts %}
                    {% for alignment in text.meleager_alignment_text_1.all %}
                        <li {% if forloop.first %}class="selected"{% endif %}>
                            <a role="tab"
                                id="alignment-tab-{{ forloop.counter }}-{{ alignment.text_2.language }}"
                                aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                                aria-controls="alignment-content-{{ forloop.counter }}-{{ alignment.text_2.language }}"
                                data-target="tabs.link"
                                data-action="tabs#switch"
                                href="#alignment-content-{{ forloop.counter }}-{{ alignment.text_2.language }}"
                                tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
                                >{{ alignment.text_2.language }}</a>
                        </li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>

        {% for text in texts %}
            {% for alignment in text.meleager_alignment_text_1.all %}
                <div role="tabpanel"
                    id="alignment-content-{{ forloop.counter }}-{{ alignment.text_2.language }}"
                    aria-labelledby="alignment-tab-{{ forloop.counter }}-{{ alignment.text_2.language }}"
                    data-controller="alignments"
                    data-target="alignments.alignment tabs.content"
                    tabindex="0"
                    {% if not forloop.first %}hidden{% endif %}
                    class="row">
                    <div id="align-original-{{ forloop.counter }}" class="col-6">
                        <blockquote class="bg-orange-100 border-orange-300">
                            {% for items in alignment.alignment_data.0 %}
                                {% for item in items %}
                                    {% if item.t %}
                                        <span
                                            data-action="mouseover->alignments#highlight mouseout->alignments#lowlight"
                                            data-id="align-{{ forloop.parentloop.parentloop.counter }}-{{ item.h.0 }}">{{ item.t }}</span>
                                    {% endif %}
                                    {% if item.p %} {{ item.p }}{% endif %}
                                {%endfor%}
                                <br>
                            {%endfor%}
                        </blockquote>
                    </div>
                    <div id="align-translation-{{ forloop.counter }}" class="col-6">
                        <blockquote class="bg-orange-100 border-orange-300">
                            {% for items in alignment.alignment_data.1 %}
                                {% for item in items %}
                                    {% if item.t %}
                                        <span
                                            data-action="mouseover->alignments#highlight mouseout->alignments#lowlight"
                                            data-id="align-{{ forloop.parentloop.parentloop.counter }}-{{ item.h.0 }}">{{ item.t }}</span>
                                    {% endif %}
                                    {% if item.p %} {{ item.p }}{% endif %}
                                {%endfor%}
                                <br>
                            {%endfor%}
                        </blockquote>
                    </div>
                </div>
            {% endfor %}
        {% endfor %}
    </div>
{% endif %}