{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "FAQ" %}{% endblock %}

{% block content %}
<h1 class="h3 mb-3 text-center">{% trans "Frequently Asked Questions" %}</h1>

{% if faqs %}
  <div class="accordion" id="faqAccordion">
  {% for f in faqs %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading-{{ f.id }}">
        <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-{{ f.id }}"
                aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                aria-controls="collapse-{{ f.id }}">
          {{ f.question }}
        </button>
      </h2>

      <div id="collapse-{{ f.id }}"
           class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
           aria-labelledby="heading-{{ f.id }}"
           data-bs-parent="#faqAccordion">
        <div class="accordion-body">
          {{ f.answer|linebreaksbr }}
        </div>
      </div>
    </div>
  {% endfor %}
</div>

{% else %}
  {% if request.user.is_authenticated and request.user.is_staff %}
<div class="alert alert-info">
 {% url 'dashboard:faq_new' as faq_url %}
{% blocktrans with url=faq_url %}Add <a href="{{ url }}">FAQ items</a> in the dashboard to display them here.{% endblocktrans %}
</div>
  {% endif %}
{% endif %}

<div class="mt-4 p-4 border rounded nebsy-tertiary">
  <div class="row align-items-center">
    <div class="col-md-8 d-flex justify-content-left">
      <div class="text-white">{% trans "Got questions?" %} {% trans "Send us a message and we’ll get back to you quickly." %}</div>
    </div>
    <div class="col-md-4 text-md-right mt-3 mt-md-0 justify-content-end d-flex">
      <a href="{% url 'website:contact' %}" class="btn btn-primary ">
        {% trans "Contact us" %}
      </a>
    </div>
  </div>
</div>
{% endblock %}