{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load i18n %}
{% load extras %}

{% if tags %}
  <div class="container">
    <div class="dropdown searchable-dropdown">
      <div class="tag-input">
        <div id="selected-tags" class="d-flex align-items-center flex-wrap">
          {% for tag in tags %}
            <span class="btn btn-default rounded-pill tag d-flex align-items-center"
                  data-tag="{{ tag }}">
              {% trans tag %}
              <button class="btn btn-sm btn-default remove-tag">
                {% icon 'times' %}
              </button>
            </span>
          {% endfor %}
        </div>
        <input id="add-tag-input" type="search" class="form-control dropdown-toggle"
               data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
               autocomplete="off" placeholder="{% trans "Search with tags" %}">
        <div class="dropdown-menu" aria-labelledby="add-tag-input">
          <ul class="dropdown-items">
            {% for tag in all_tags %}
              {% if tag not in tags %}
                <li class="dropdown-item" data-tag="{{ tag }}"
                    data-tag_l10n="{% trans tag %}">
                  {% trans tag %}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
        <a href="{{ active_section_url }}" aria-label="{% trans 'Clear all tags' %}"
           class="btn-close" type="button"></a>
      </div>
    </div>
  </div>
{% endif %}
