{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / <a href="/apps/">Apps</a> / <a href="/apps/{{ app.slug }}/">{{ app.name }}</a> / FAQ</div>
    <div class="eyebrow">FAQ</div>
    <h1>{{ app.full_name }} — Frequently Asked Questions</h1>
  </div>
</section>
<section class="section--tight">
  <div class="container" style="max-width:820px;">
    {% for f in app.faqs %}
    <div class="accordion-item {% if loop.first %}open{% endif %}">
      <div class="accordion-q"><span>{{ f.q }}</span><span class="plus"></span></div>
      <div class="accordion-a"><div class="accordion-a-inner">{{ f.a }}</div></div>
    </div>
    {% endfor %}
    <div class="accordion-item">
      <div class="accordion-q"><span>What permissions does {{ app.name }} need?</span><span class="plus"></span></div>
      <div class="accordion-a"><div class="accordion-a-inner">
        {{ app.permissions|map(attribute='name')|join(', ') }}. Full explanations are on the <a href="/apps/{{ app.slug }}/support/" style="color:var(--c-secondary);">support page</a>.
      </div></div>
    </div>
    <div class="accordion-item">
      <div class="accordion-q"><span>Where can I read the full Privacy Policy and Terms?</span><span class="plus"></span></div>
      <div class="accordion-a"><div class="accordion-a-inner">
        See the <a href="/apps/{{ app.slug }}/privacy-policy/" style="color:var(--c-secondary);">Privacy Policy</a> and <a href="/apps/{{ app.slug }}/terms-and-conditions/" style="color:var(--c-secondary);">Terms &amp; Conditions</a> pages for {{ app.name }}.
      </div></div>
    </div>

    <div class="flex gap-12" style="flex-wrap:wrap; margin-top:36px;">
      <a href="/apps/{{ app.slug }}/" class="tag">← Back to {{ app.name }}</a>
      <a href="/apps/{{ app.slug }}/support/" class="tag">Support</a>
      <a href="/faq/" class="tag">General FAQ</a>
    </div>
  </div>
</section>
{% endblock %}