{% extends "public/base.html" %}
{% load i18n %}

{% block content %}

{% include 'public/partials/page_header.html' with title=group.heading|default:group.name eyebrow=site_settings.site_name lead=group.intro deco='grid' deco_edge='wave' %}

<section class="band">
  <div class="wrap max-w-3xl">
    {% if items %}
      <div class="divide-y divide-site-border border-y border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
        {% for item in items %}
          {% if group.collapsed %}
            <details class="group py-5">
              <summary class="flex cursor-pointer list-none items-start justify-between gap-4 font-semibold marker:hidden [&::-webkit-details-marker]:hidden">
                <span>{{ item.question }}</span>
                <span class="mt-1 shrink-0 text-brand-600 group-open:rotate-45" aria-hidden="true">+</span>
              </summary>
              <p class="mt-3 whitespace-pre-line leading-relaxed text-site-muted dark:text-site-muted-dark">{{ item.answer }}</p>
            </details>
          {% else %}
            <div class="py-5">
              <h2 class="font-semibold">{{ item.question }}</h2>
              <p class="mt-3 whitespace-pre-line leading-relaxed text-site-muted dark:text-site-muted-dark">{{ item.answer }}</p>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <p class="text-site-muted dark:text-site-muted-dark">{% trans "Ten zestaw nie ma jeszcze żadnego pytania." %}</p>
    {% endif %}
  </div>
</section>

{% endblock %}