{# @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"
                id="search-suggest-listbox"
                aria-label="{{ 'header.searchDropdownTitle'|trans|striptags }}"
                role="listbox">
                {% block layout_search_suggest_results %}
                    {% for product in page.searchResult %}
                        {% block layout_search_suggest_result_product %}
                            <li class="search-suggest-product js-result" role="option">
                                {% 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">
                                                    {% set attributes = {
                                                        class: 'search-suggest-product-image',
                                                        title: (product.cover.media.translated.title ?: '')
                                                    } %}

                                                    {% if product.cover.media.url and product.cover.media.isSpatialObject() == false %}
                                                        {% if product.cover.media.getMediaType().getName() === 'VIDEO' %}
                                                            {% sw_include '@Storefront/storefront/utilities/video.html.twig' with {
                                                                media: product.cover.media,
                                                                attributes: attributes
                                                            } %}
                                                        {% else %}
                                                            {% set attributes = attributes|merge({
                                                                alt: (product.cover.media.translated.alt ?: '')
                                                            }) %}

                                                            {% sw_thumbnails 'search-suggest-product-image-thumbnails' with {
                                                                media: product.cover.media,
                                                                sizes: {
                                                                    default: '100px'
                                                                },
                                                                attributes: attributes
                                                            } %}
                                                        {% endif %}
                                                    {% 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 }}

                                                    {% block layout_search_suggest_result_variation %}
                                                        {% if product.variation and config('core.listing.showVariantOptionInSearchSuggestionResult') %}
                                                            <div class="search-suggest-product-variation">
                                                                {% for variation in product.variation %}
                                                                    {{ variation.group }}: {{ variation.option }}
                                                                    {% if product.variation|last != variation %}
                                                                        /
                                                                    {% endif %}
                                                                {% endfor %}
                                                            </div>
                                                        {% endif %}
                                                    {% endblock %}
                                                </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 }}
                                                    </span>

                                                    {% if price.referencePrice is not null %}
                                                        <br><small class="search-suggest-product-reference-price">({{ price.referencePrice.price|currency }} / {{ 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 }) }}</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" id="search-suggest-result-info" role="option">
                                {{ 'header.searchNoResult'|trans|sw_sanitize }}
                            </li>
                        {% endblock %}
                    {% else %}
                        {% block layout_search_suggest_result_total_result %}
                            <li class="js-result search-suggest-total" role="option">
                                <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 }}"
                                               aria-label="{{ '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" id="search-suggest-result-info">
                                            {{ 'header.searchResults'|trans({
                                                '%count%': page.searchResult.total,
                                            })|sw_sanitize }}
                                        </div>
                                    {% endblock %}
                                </div>
                            </li>
                        {% endblock %}
                    {% endif %}
                {% endblock %}
            </ul>
        {% endblock %}
    </div>
{% endblock %}