{% load i18n %}
<form method="get" class="d-flex gap-2 align-items-center">
    <div class="input-group flex-grow-1" style="max-width: 300px;">
        <span class="input-group-text bg-white border-end-0">
            <svg class="heroicon icon-sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>
        <input type="text" name="search"
               class="form-control border-start-0"
               placeholder="{% trans 'Search...' %}"
               value="{{ search_query }}"
               aria-label="{% trans 'Search' %}">
    </div>
    {% comment %} <button type="submit" class="btn btn-primary">
        <svg class="heroicon icon-sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        {% trans "Search" %}
    </button> {% endcomment %}
</form>
