digitalfabrik/integreat-cms

{% load i18n %}
<div id="table-search" class="flex">
    <div class="relative">
        <input {% if related_form %}form="{{ related_form }}"{% endif %}
               {% if search_query %}value="{{ search_query }}"{% endif %}
               data-default-value=""
               type="search"
               name="query"
               autocomplete="off"
               id="table-search-input"
               placeholder="{% translate "Search" %}"
               class="default-value rounded-r-none"
               data-url="{% if region_slug and language_slug %}{% url 'search_content_ajax' region_slug language_slug %}{% elif region_slug %}{% url 'search_content_ajax' region_slug %}{% else %}{% url 'search_content_ajax' %}{% endif %}"
               data-object-type="{{ object_type }}"
               data-archived="{% if object_archived %}true{% else %}false{% endif %}" />
        <div id="table-search-suggestions"
             class="absolute hidden shadow rounded-b top-full bg-graz-200 w-full z-10 max-h-60 overflow-y-auto cursor-pointer">
        </div>
    </div>
    {% if search_query %}
        <button id="search-reset-btn"
                title="{% translate "Reset search" %}"
                class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-3">
            <i icon-name="x" class="w-5"></i>
        </button>
    {% endif %}
    <button id="search-submit-btn"
            title="{% translate "Search" %}"
            {% if related_form %}form="{{ related_form }}"{% endif %}
            class="bg-blue-500 hover:bg-blue-600 text-white rounded-r py-2 px-3">
        <i icon-name="search" class="w-5"></i>
    </button>
</div>