{% load i18n static %}
{% if cl.search_fields %}
<style>
    .search-block {
        display: flex;
        align-items: center;
    }

    .search-block input[type='text'] {
        max-width: 300px;
    }

    .search-box {
        position: relative;
        margin-right: 10px;
    }

    .search-box button {
        border: none;
        background-color: transparent;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        padding: 0 15px;
    }
</style>
<div id="toolbar">
    <form id="changelist-search" method="get" role="search">
        <div class="search-block"><!-- DIV needed for valid HTML -->
            <div class="search-box">
                <input type="text" placeholder="Search..." class="form-control" size="40" name="{{ search_var }}"
                    value="{{ cl.query }}" id="searchbar" {% if cl.search_help_text %}
                    aria-describedby="searchbar_helptext" {% endif %}>
                <button type="submit"><i class="ki-outline ki-magnifier text-gray-700 fs-2"></i></button>
            </div>

            {% if show_result_count %}
                <span class="quiet text-muted">{% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} (<a href="?{% if cl.is_popup %}{{ is_popup_var }}=1{% if cl.add_facets %}&{% endif %}{% endif %}{% if cl.add_facets %}{{ is_facets_var }}{% endif %}">{% if cl.show_full_result_count %}{% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} total{% endblocktranslate %}{% else %}{% translate "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>
        {% if cl.search_help_text %}
        <br class="clear">
        <div class="help" id="searchbar_helptext">{{ cl.search_help_text }}</div>
        {% endif %}
    </form>
</div>
{% endif %}