{% sw_extends '@Storefront/storefront/layout/header/search-suggest.html.twig' %}
{% import '@RiccardoTheme/storefront/rz/flavor.html.twig' as rz %}

{# Produktbild auf Sortenfarbe #}
{% block layout_search_suggest_result_image %}
    {% set rzColor = rz.color(product)|trim %}
    <div class="col-auto search-suggest-product-image-container rz-suggest-img{% if rzColor %} has-flavor{% endif %}"{% if rzColor %} style="--flavor: {{ rzColor }}"{% endif %}>
        {% if product.cover.media.url %}
            {% sw_thumbnails 'search-suggest-product-image-thumbnails' with {
                media: product.cover.media,
                sizes: { default: '100px' },
                attributes: { class: 'search-suggest-product-image', alt: (product.cover.media.translated.alt ?: ''), title: (product.cover.media.translated.title ?: '') }
            } %}
        {% else %}
            {% sw_icon 'placeholder' style { size: 'lg' } %}
        {% endif %}
    </div>
{% endblock %}

{% block layout_search_suggest_result_name %}
    {% set rzColor = rz.color(product)|trim %}
    {% set rzName = rz.nameParts(product, rzColor is not empty or product.translated.name matches '/Nikotinsalz Liquid|Longfill|E-Liquid/i')|trim|split('|') %}
    <div class="col search-suggest-product-name">
        {% if rzName[0] %}<span class="rz-suggest-line">{{ rzName[0]|raw }}</span>{% endif %}
        <span class="rz-suggest-name{% if rzColor %} is-flavor{% endif %}">{{ rzName[1]|raw }}</span>
        {% set notes = rz_noten(product) %}
        {% if notes|length %}<span class="rz-suggest-notes">{{ notes|slice(0, 3)|join(' · ') }}</span>{% elseif rzName[2] %}<span class="rz-suggest-notes">{{ rzName[2]|raw }}</span>{% endif %}
    </div>
{% endblock %}