{% extends 'index.twig' %}

{% block content %}
<section class="col-12">
  <h2 class="mb-4 border-bottom">{{ pageHeader }}</h2>

  {% set lastCategory = 0 %}
  {% for faq in faqOverview %}

    {% if (faq['category_id'] != null and faq['category_id'] != lastCategory) %}
      <header class="d-flex align-items-center justify-content-between mt-5 mb-2">
        <h3>
          <span class="badge bg-info shadow-info">{{ faq['category_id'] | categoryName }}</span>
        </h3>
        <a href="{{ categoryLink(faq['category_id']) }}" class="btn btn-outline-primary ms-4">
          {{ 'msgGoToCategory' | translate }}
          <i class="bi bi-arrow-right ms-1"></i>
        </a>
      </header>
    {% endif %}

    {% if (faq['category_id'] != null) %}
    <article class="card mb-4">
      <div class="card-body">
        <div class="d-flex justify-content-between mb-3">
          <a href="{{ faqLink(faq['category_id'], faq['id'], faq['lang']) }}"
             class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3"
             data-bs-toggle="tooltip" data-bs-placement="left" aria-label="{{ faq['id'] | faqQuestion }}"
             data-bs-original-title="{{ faq['id'] | faqQuestion }}">
            <i class="bi bi-link"></i>
          </a>
        </div>
        <h4 class="h4">
          {{ faq['title'] }}
        </h4>
        <p class="mb-4">
          {{ faq['content'] | raw }}
        </p>
        <div class="d-flex align-items-center text-muted border-top pt-2">
          <div class="border-end pe-3 me-3">
            <i class="bi bi-calendar-date"></i>
            {{ faq['updated'] | date('Y-m-d H:i') }}
          </div>
          <div class="d-flex align-items-center me-3">
            <i class="bi bi-person me-1"></i>
            {{ faq['author'] }}
          </div>
        </div>
      </div>
    </article>
    {% endif %}

    {% set lastCategory = faq['category_id'] %}
  {% endfor %}
</section>

{% endblock %}
