{% load i18n static %}
{% if cl.search_fields %}

    <div class=" items-center sm:w-80 w-full">

        <div {% if cl.search_help_text %} data-tip="{{ cl.search_help_text|default:"" }}" {% endif %}
                id="changelist-search" role="search"
                class="flex {% if cl.search_help_text %} tooltip tooltip-bottom {% endif %} items-center w-full">
            <div  class="form-control  flex flex-row items-center rounded-sm border border-base-content/20 ps-3 w-full">
                <label for="searchbar" class="flex items-center">
                    <i class="fa fa-search text-gray-400"></i>
                </label>
                <input
                        type="text"
                        size="40"
                        name="{{ search_var }}"
                        value="{{ cl.query }}"
                        id="searchbar"
                        {% if cl.search_help_text %}
                        placeholder="{{ cl.search_help_text }}"
                        {% else %}
                        placeholder="{% trans "Search along" %} {{ cl.opts.verbose_name_plural }}"
                        {% endif %}
                        class="input w-full border-0 focus:border-transparent focus:outline-0 transition-all input-sm focus:outline-offset-0"
                        {% if cl.search_help_text %} aria-describedby="searchbar_helptext"{% endif %}
                >
                <input type="button" value="{% translate 'Search' %}" class="rounded search-submit btn btn-sm">
            </div>

            {% for pair in cl.params.items %}
                {% if pair.0 != search_var %}
                    <input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">
                {% endif %}
            {% endfor %}

        </div>

    </div>

{% endif %}
