{% load wagtailcore_tags i18n %}

{% if page.footnotes_list %}
    <div class="footnotes" id="footnotes">
        <h2 id="footnote-label">
            {% translate "Footnotes" %}
        </h2>
        <ol>
            {% for footnote in page.footnotes_list %}
                {% with footnote_index=forloop.counter %}
                <li id="footnote-{{ footnote_index }}">
                    {% if footnote.references|length == 1 %}
                        {# If there is only a single reference, link the return icon back to it #}
                        <a href="#footnote-source-{{ footnote_index }}-{{ footnote.references.0 }}" aria-label="{% translate "Back to content" %}">
                            ↩
                        </a>
                    {% else %}
                        ↩
                        {% for reference_index in footnote.references %}
                            {# If there are multiple references, generate unique links per reference #}
                            <a href="#footnote-source-{{ footnote_index }}-{{ reference_index }}" aria-label="{% translate "Back to content" %}">
                                <sup>{# Display a 1-indexed counter for each of the references to this footnote #}
                                    {{ forloop.counter }}
                                </sup>
                            </a>
                        {% endfor %}
                    {% endif %}
                    {{ footnote.text|richtext }}
                </li>
                {% endwith %}
            {% endfor %}
        </ol>
    </div>
{% endif %}