<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-star"></i> {{ stickyFAQsHeader }}
  </h1>
</div>

{% if orderingStickyFaqsActivated == false %}
  <div class="alert alert-warning alert-dismissible fade show">{{ alertMessageStickyFaqsDeactivated | raw }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
{% endif %}

{% if stickyData is empty %}
  <div class="alert alert-danger alert-dismissible fade show">{{ alertMessageNoStickyRecords | raw }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
{% endif %}

{% if orderingStickyFaqsActivated != false %}
<div class="card shadow mt-5 ml-5" id="mainCardStickyFAQs">
  <div class="card-body">
    <ul class="list-group list-group-numbered {{ sortableDisabled }}" id="stickyFAQs" data-csrf="{{ csrfToken }}">
    {% for faq in stickyData %}
      <li class="list-group-item" data-pmf-faqid="{{ faq.id|e }}">
        <a href="{{ faq.url|e }}">{{ faq.question|e }}</a>
      </li>
    {% endfor %}
    </ul>
  </div>
</div>
{% endif %}
