{% load i18n %}
{% comment %}
Reusable storefront toolbar: instant-filter search + grid/table view toggle.
Params: search_placeholder, search_width (Tailwind width class), table_search.
In grid view the shared [data-search] filter (storefront/base.html) owns search;
in table view (table_search=True) the [data-table] enhancer owns it instead, so
pagination sees the matched set — the two never both touch the rows.
{% endcomment %}
<div class="flex items-center justify-between gap-3"{% if not table_search %} data-search{% endif %}>
    <input type="search" autocomplete="off" {% if table_search %}data-table-search{% else %}data-search-input{% endif %}
           placeholder="{{ search_placeholder }}"
           class="w-full {{ search_width }} rounded-lg bg-base-200 border border-base-300 px-3 py-2 text-sm placeholder:text-base-content/40 focus:outline-none focus:border-primary/60">
    <div class="inline-flex rounded-lg border border-base-content/15 overflow-hidden shrink-0">
        <a href="?view=grid" aria-label="{% trans 'Grid view' %}"
           class="px-3 py-2 flex items-center text-lg {% if view == 'grid' %}bg-base-300 text-base-content{% else %}text-base-content/40 hover:text-base-content{% endif %}">
            <i class="ti ti-layout-grid"></i>
        </a>
        <a href="?view=table" aria-label="{% trans 'Table view' %}"
           class="px-3 py-2 flex items-center text-lg {% if view == 'table' %}bg-base-300 text-base-content{% else %}text-base-content/40 hover:text-base-content{% endif %}">
            <i class="ti ti-list"></i>
        </a>
    </div>
</div>