{% extends '@admin/index.twig' %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 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 %}
{% endblock %}