{% 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-wrench"></i>
      {{ adminHeaderStopWords }}
    </h1>
  </div>

  {% if hasPermission %}
    <div class="row">
      <div class="col-lg-12">
        <p>
          {{ msgDescription }}
        </p>
        <form class="row row-cols-lg-auto g-3 align-items-center">
          {{ csrfToken | raw }}

          <div class="col-12">
            <label class="visually-hidden" for="pmf-stop-words-language-selector">
              {{ msgDescription }}
            </label>
            <select id="pmf-stop-words-language-selector" class="form-select">
              <option value="none">---</option>
              {% for key, value in sortedLanguageCodes %}
                <option value="{{ key | lower }}">{{ value }}</option>
              {% endfor %}
            </select>
            <span id="pmf-stop-words-loading-indicator"></span>
          </div>

          <div class="col-12">
            <button class="btn btn-primary" type="button" id="pmf-stop-words-add-input" disabled>
              <i aria-hidden="true" class="bi bi-plus"></i> {{ buttonAdd }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="mt-3" id="pmf-stopwords-content"></div>
      </div>
    </div>
  {% endif %}
{% endblock %}