{% load i18n %}
{% if panels %}
    <div class="mt-4" id="snippet-panels">
        <h5><i class="fa-solid fa-code" aria-hidden="true"></i> {% translate "The code behind this page" %}</h5>
        <div class="accordion" id="snippetAccordion">
            {% for panel in panels %}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#{{ panel.id }}" aria-expanded="false" aria-controls="{{ panel.id }}">
                            {{ panel.title }}
                        </button>
                    </h2>
                    <div id="{{ panel.id }}" class="accordion-collapse collapse" data-bs-parent="#snippetAccordion">
                        <div class="accordion-body overflow-auto">{{ panel.html }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
        {% if docs %}
            <h5 class="mt-3" id="doc-refs"><i class="fa-solid fa-book" aria-hidden="true"></i> {% translate "References to documentation" %}</h5>
            <ul>
                {% for ref in docs %}
                    <li>
                        <a href="{{ ref.url }}" target="_blank" rel="noopener">{{ ref.label }}
                            <i class="fa-solid fa-arrow-up-right-from-square small" aria-hidden="true"></i><span class="visually-hidden">{% translate "(opens in a new tab)" %}</span></a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endif %}