{% sw_extends '@Storefront/storefront/page/search/index.html.twig' %}

{% block page_search_headline %}
    <div class="rz-search-head">
        <span class="rz-search-label">Suche</span>
        <h1 class="search-headline rz-search-title">„{{ page.searchTerm }}“</h1>
        <span class="rz-search-count">{{ page.listing.total }} {{ page.listing.total == 1 ? 'Treffer' : 'Treffer' }}</span>
    </div>

    {% if page.listing.total == 0 %}
        <div class="rz-empty">
            <span class="rz-empty-word" aria-hidden="true">Hmm?</span>
            <h2>Dazu haben wir nichts gefunden.</h2>
            <p>Prüfe die Schreibweise oder stöbere nach Geschmack – vielleicht ist deine neue Lieblingssorte dabei.</p>
            <div class="rz-empty-flavors">
                {% for f in [
                    { cls: 'frucht', label: 'Frucht', q: 'Frucht' },
                    { cls: 'kuehl', label: 'Frisch & Kühl', q: 'Kühle' },
                    { cls: 'suess', label: 'Süß & Dessert', q: 'Vanille' },
                    { cls: 'getraenk', label: 'Getränke', q: 'Limonade' }
                ] %}
                    <a class="rz-flavor rz-flavor--{{ f.cls }}" href="{{ path('frontend.search.page', { search: f.q }) }}"><strong>{{ f.label }}</strong></a>
                {% endfor %}
            </div>
            <div class="rz-empty-actions">
                <a class="btn btn-primary" href="/Liquids/">Alle Liquids</a>
                <a class="btn btn-light" href="/E-Zigaretten/">Alle Geräte</a>
            </div>
        </div>
    {% endif %}
{% endblock %}