{% load i18n %}
{% load rich_text %}
{% load static %}
<script src="{% static "prtx_faq/faq_search.js" %}"></script>

<input id="faqSearch" class="form-control" type="text" placeholder="{% trans "Search" %}">

<h1>{% trans "Frequently Asked Questions" %}</h1>

{% for category in categories %}
    {% if category.questions.exists %}
        <details id="faq-category-{{ category.pk }}" class="panel panel-default card question-category" open>
            <summary class="panel-heading card-header">
                <div class="panel-title">
                    <span class="fa fa-fw"></span>
                    {{ category }}
                </div>
            </summary>
            <ul class="list-group" id="q-{{ question.id }}">
                {% for question in category.questions.all %}
                    <li class="question list-group-item">
                        <div id="faq-{{ question.id }}" class="question-asked">
                            {{ question.question }}
                            <a href="#faq-{{ question.id }}">¶</a>
                        </div>
                        <div class="question-answered">{{ question.answer|rich_text }}</div>
                    </li>
                {% endfor %}
            </ul>
        </details>
    {% endif %}
{% endfor %}