{% extends 'layouts/public.html' %}
{% load static %}

{% block title %}Perguntas Frequentes{% endblock title %}

{% block extrahead %}
<link type="text/css" href="{% static 'css/public_faq.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container mt-5 mb-5">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="mb-4 text-center">
        <h2 class="fw-bold" style="color: var(--gold);">Perguntas Frequentes</h2>
        <p class="text-muted">Veja abaixo as dúvidas mais comuns da comunidade.</p>
      </div>

      <div class="accordion" id="faqAccordionPublic">
        {% if public_faqs %}
          {% for faq in public_faqs %}
            <div class="accordion-item mb-3 bg-dark border border-secondary rounded">
              <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                <button class="accordion-button {% if not forloop.first %}collapsed{% endif %} bg-dark text-light" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse{{ forloop.counter }}"
                        aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                        aria-controls="collapse{{ forloop.counter }}">
                  {{ faq.question }}
                </button>
              </h2>
              <div id="collapse{{ forloop.counter }}"
                   class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
                   aria-labelledby="heading{{ forloop.counter }}"
                   data-bs-parent="#faqAccordionPublic">
                <div class="accordion-body text-light">
                  {{ faq.answer|safe }}
                </div>
              </div>
            </div>
          {% endfor %}
        {% else %}
          <p class="text-center text-muted">Nenhuma pergunta frequente disponível no momento.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}