{% set productColor = product.color ?: '#d3ad74' %}
{% set shopHref = product.category and product.category.slug and product.slug
    ? path('shop_product', { categorySlug: product.category.slug, slug: product.slug })
    : path('shop') ~ (product.slug ? '#' ~ product.slug : '')
%}

<article id="{{ product.slug }}" class="theme-cuvee-detail">
    <div class="theme-cuvee-detail__content">
        <div class="theme-cuvee-detail__body">
            <h2>{{ product.name|raw }}</h2>
            {% if product.quality %}
                <span class="theme-cuvee-detail__quality">{{ product.quality|raw }}</span>
            {% endif %}

            {% if product.description %}
                <div class="theme-cuvee-detail__description">
                    {{ product.description|raw }}
                </div>
            {% endif %}

            {% if product.tasting or product.assemblages is not empty or product.winemaking is not empty or product.dosage %}
                <div class="theme-cuvee-detail__technical">
                    {% if product.tasting %}
                        <div class="theme-cuvee-detail__technical-row">
                            <span>{{ 'cuvee.detail.tasting'|trans }}</span>
                            <div>{{ product.tasting|raw }}</div>
                        </div>
                    {% endif %}

                    {% if product.assemblages is not empty %}
                        <div class="theme-cuvee-detail__technical-row">
                            <span>{{ 'cuvee.detail.assemblage'|trans }}</span>
                            <div>
                                {% for assemblage in product.assemblages %}
                                    <div>{{ assemblage|raw }}</div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if product.winemaking is not empty %}
                        <div class="theme-cuvee-detail__technical-row">
                            <span>{{ 'cuvee.detail.winemaking'|trans }}</span>
                            <div>
                                {% for winemaking in product.winemaking %}
                                    <div>{{ winemaking|raw }}</div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if product.dosage %}
                        <div class="theme-cuvee-detail__technical-row">
                            <span>{{ 'cuvee.detail.dosage'|trans }}</span>
                            <div>{{ product.dosage|raw }}</div>
                        </div>
                    {% endif %}
                </div>
            {% endif %}

            {% if product.awards|length > 0 %}
                <div class="theme-cuvee-detail__awards">
                    {% for award in product.awards %}
                        {% if award.image and award.image.path %}
                            <twig:Image
                                path="{{ award.image.path }}"
                                alt="{{ award.title ?? product.name|striptags }}"
                                class="theme-cuvee-detail__award"
                                img:class="theme-cuvee-detail__award-image"
                                responsive="{{ false }}"
                                imageWidth="120"
                                imageHeight="120"
                            />
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}

            <div class="theme-cuvee-detail__actions">
                <a class="theme-button-fill theme-hover-link-effect"
                   href="{{ path('cuvees') }}"
                   data-turbo-frame="cuvees-content"
                   title="{{ 'cuvee.button_return'|trans }}">
                    {{ 'cuvee.button_return'|trans }}
                </a>
                <a class="theme-button-stroke theme-hover-link-effect"
                   style="border-color: {{ productColor }}"
                   href="{{ shopHref }}"
                   data-turbo-frame="_top"
                   title="{{ 'cuvee.button_order'|trans }}">
                    {{ 'cuvee.button_order'|trans }}
                </a>
            </div>
        </div>

        <div class="theme-cuvee-detail__media">
            {% if product.image and product.image.path %}
                <twig:Image
                    path="{{ product.image.path }}"
                    alt="{{ product.fullName ?: product.name|striptags }}"
                    class="theme-cuvee-detail__picture"
                    img:class="theme-cuvee-detail__image"
                    responsive="{{ false }}"
                    imageWidth="520"
                    imageHeight="760"
                />
            {% endif %}
            <span class="theme-cuvee-detail__square" style="background-color: {{ productColor }}"></span>
        </div>
    </div>
</article>
