{% extends "jinja/types/page.html" %}

{% set title %}{{ page.get_title() }}{% endset %}

{% block content %}
    <div class="row text-center mb-2">
        <h1 class="text-primary display-1">
            {{ page.get_title() }}
        </h1>
    </div>

    <div class="d-grid gap-3 btn-group-vertical" role="group" id="faq-group">
    {% for faq in page.get_content() %}
        <button class="btn btn-secondary text-light text-center"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#{{ page.get_content()[faq]['tag'] }}"
                aria-expanded="true"
                aria-controls="{{ page.get_content()[faq]['tag'] }}">
            <h2 class="accordion-header">
                {{ faq }}
            </h2>
        </button>

        <div class="collapse" id="{{ page.get_content()[faq]['tag'] }}">
            <div class="card card-body text-center text-secondary">
                {{ page.get_content()[faq]['answer']|safe }}
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}