{# @var product \Shopware\Core\Content\Product\SalesChannel\SalesChannelProductEntity #}

{% block layout_search_suggest %}
    <div class="search-suggest js-search-result">
        {% block layout_search_suggest_container %}
            <ul class="search-suggest-container">
                {% block layout_search_suggest_results %}
                    {% for product in page.searchResult %}
                        {% block layout_search_suggest_result_product %}
                            <li class="search-suggest-product js-result">
                                {% block layout_search_suggest_result_link %}
                                    <a href="{{ seoUrl('frontend.detail.page', {'productId': product.id}) }}"
                                       title="{{ product.translated.name }}"
                                       class="search-suggest-product-link">
                                        <div class="row align-items-center g-0">
                                            {% block layout_search_suggest_result_image %}
                                                <div class="col-auto search-suggest-product-image-container">
                                                    {% if product.cover.media.url and product.cover.media.isSpatialObject() == false %}
                                                        {% 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 %}
                                                <div class="col search-suggest-product-name">
                                                    {{ product.translated.name }}
                                                </div>
                                            {% endblock %}

                                            {% block layout_search_suggest_result_price %}
                                                <div class="col-auto search-suggest-product-price">
                                                    {% set price = product.calculatedPrice %}
                                                    {% if product.calculatedPrices.count > 0 %}
                                                        {% set price = product.calculatedPrices.last %}
                                                    {% endif %}

                                                    {% if product.variantListingConfig.displayParent and product.parentId === null %}
                                                        {% set displayFromVariants = price.unitPrice !== product.calculatedCheapestPrice.unitPrice %}
                                                        {% set price = product.calculatedCheapestPrice %}
                                                    {% endif %}

                                                    {% set referencePrice = price.referencePrice %}

                                                    {% if product.calculatedPrices.count > 1 or displayFromVariants %}
                                                        {{ "listing.listingTextFrom"|trans|sw_sanitize }}
                                                    {% endif %}
                                                    <span class="search-suggest-product-price">
                                                        {{ price.unitPrice|currency }}{{ "general.star"|trans|sw_sanitize }}
                                                    </span>

                                                    {% if price.referencePrice is not null %}
                                                        <br><small class="search-suggest-product-reference-price">({{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }}&nbsp;{{ price.referencePrice.unitName }})</small>
                                                    {% endif %}

                                                    {% if price.regulationPrice.price is not null %}
                                                        <small class="search-suggest-product-list-price">{{ "general.listPricePreviously"|trans({'%price%': price.regulationPrice.price|currency }) }}{{ "general.star"|trans|sw_sanitize }}</small>
                                                    {% endif %}
                                                </div>
                                            {% endblock %}
                                        </div>
                                    </a>
                                {% endblock %}
                            </li>
                        {% endblock %}
                    {% endfor %}
                {% endblock %}

                {% block layout_search_suggest_result_total %}
                    {% if page.searchResult.total == 0 %}
                        {% block layout_search_suggest_no_result %}
                            <li class="search-suggest-no-result">
                                {{ "header.searchNoResult"|trans|sw_sanitize }}
                            </li>
                        {% endblock %}
                    {% else %}

                        {% block layout_search_suggest_result_total_result %}
                            <li class="js-result search-suggest-total">
                                <div class="row align-items-center g-0">
                                    {% block layout_search_suggest_result_total_link %}
                                        <div class="col">
                                            <a href="{{ path('frontend.search.page') }}?search={{ page.searchTerm }}"
                                               title="{{ "header.searchAllResults"|trans|striptags }}"
                                               class="search-suggest-total-link">
                                                {% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}
                                                {{ "header.searchAllResults"|trans|sw_sanitize }}
                                            </a>
                                        </div>
                                    {% endblock %}

                                    {% block layout_search_suggest_result_total_count %}
                                        <div class="col-auto search-suggest-total-count">
                                            {{ "header.searchResults"|trans({
                                                '%count%': page.searchResult.total,
                                            })|sw_sanitize }}
                                        </div>
                                    {% endblock %}
                                </div>
                            </li>
                        {% endblock %}
                    {% endif %}
                {% endblock %}
            </ul>
        {% endblock %}
    </div>
{% endblock %}
