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

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

<h2>{% trans "Frequently Asked Questions" %}</h2>
<label for="faqSearch"><i class="fa fa-search"></i>
  <input id="faqSearch" class="form-control" type="text" placeholder="{% trans "Search" %}">
</label>

<div id="faq-searchfor" class="faq-res hidden">{% trans "Results for" %}: <strong><span></span></strong></div>
<div id="faq-result" class="faq-res hidden"><span></span> {% trans "Hits" %}</div>
{% for category in categories %}
    {% if category.questions.exists %}
        <details id="faq-category-{{ category.pk }}" class="panel panel-default card question-category">
            <summary class="panel-heading card-header">
                <h3 class="panel-title">
                  <strong>{{ category }}</strong>
                  <i class="fa fa-fw collapse-indicator" aria-hidden="true"></i>
                </h3>
            </summary>
            <ul class="list-group" id="q-{{ question.id }}">
                {% for question in category.questions.all %}
                    {% if not question.hidden %}
                        <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>
                    {% endif %}
                {% endfor %}
            </ul>
        </details>
    {% endif %}
{% endfor %}