{% load i18n static %}
{% if cl.search_fields %}
    <div class="{{ direction.panel }}">
        <form id="changelist-search" method="get">
            <div class="row">
                <div class="input-group me-2 me-lg-3 fmxw-400">
                    <span class="input-group-text">
                      <svg class="icon icon-xs" x-description="Heroicon name: solid/search"
                           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                           aria-hidden="true">
                          <path fill-rule="evenodd"
                                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                clip-rule="evenodd"></path>
                      </svg>
                    </span>
                    <input type="text" class="form-control" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Search' %}">
                </div>
                <div class="col-md-3 pl-md-1">
                    <div class="form-group">
                        {% if show_result_count %}
                            <span class="small quiet">
                                {% blocktrans count counter=cl.result_count %}
                                    {{ counter }} result
                                {% plural %}
                                    {{ counter }} results
                                {% endblocktrans %} (<a
                                    href="?{% if cl.is_popup %}_popup=1{% endif %}">{% if cl.show_full_result_count %}
                                {% blocktrans with full_result_count=cl.full_result_count %}
                                    {{ full_result_count }} total
                                {% endblocktrans %}
                            {% else %}
                                {% trans "Show all" %}
                            {% endif %}</a>)
                            </span>
                        {% endif %}
                        {% for pair in cl.params.items %}
                            {% if pair.0 != search_var %}
                                <input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endif %}
