{% extends 'base.html.twig' %}

{% set seoTitle = (product.fullName ?: product.name) ~ ' | ' ~ 'site.name'|trans %}
{% set seoDescription = (product.description|default('')|striptags|trim)
    ?: 'shop.product.meta_description'|trans({ '%product%': product.fullName ?: product.name })
%}
{% set productUrl = absolute_url(path('shop_product', {
    categorySlug: category.slug,
    slug: product.slug
})) %}
{% set productImagePath = product.secondImage and product.secondImage.path
    ? product.secondImage.path
    : (product.image and product.image.path ? product.image.path : null)
%}
{% set contactBusinessName = contact_business_name() %}
{% set showPrices = config.shouldShowPrices(app.session.get('partnerCode')) %}
{% set schemaOffers = [] %}
{% set hasInStockOffer = false %}

{% for variant in product.variants %}
    {% set variantPrice = activePriceGroupId ? variant.getPriceByGroupId(activePriceGroupId) : null %}
    {% if showPrices and not variant.unPublished and variantPrice %}
        {% set isOfferOutOfStock = product.soldOut or variant.soldOut or not variant.available %}
        {% set schemaOffer = {
            '@type': 'Offer',
            url: productUrl,
            priceCurrency: 'EUR',
            price: (variantPrice.finalPrice / 100)|number_format(2, '.', ''),
            availability: 'https://schema.org/' ~ (isOfferOutOfStock ? 'OutOfStock' : 'InStock'),
            itemCondition: 'https://schema.org/NewCondition',
            name: variant.fullName,
            description: variant.label
        } %}
        {% if contactBusinessName %}
            {% set schemaOffer = schemaOffer|merge({ seller: {
                '@type': 'Organization',
                name: contactBusinessName
            } }) %}
        {% endif %}
        {% if product.sku %}
            {% set schemaOffer = schemaOffer|merge({ sku: product.sku }) %}
        {% endif %}
        {% if variant.stock is not null %}
            {% set schemaOffer = schemaOffer|merge({
                inventoryLevel: {
                    '@type': 'QuantitativeValue',
                    value: variant.stock
                }
            }) %}
        {% endif %}
        {% set schemaOffers = schemaOffers|merge([schemaOffer]) %}
        {% if not isOfferOutOfStock %}
            {% set hasInStockOffer = true %}
        {% endif %}
    {% endif %}
{% endfor %}

{% set schemaProduct = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.fullName ?: product.name,
    description: seoDescription,
    category: category.name,
    url: productUrl,
    availability: 'https://schema.org/' ~ (hasInStockOffer ? 'InStock' : 'OutOfStock'),
    sku: product.sku,
    offers: showPrices ? schemaOffers : []
} %}
{% if contactBusinessName %}
    {% set schemaProduct = schemaProduct|merge({ brand: {
        '@type': 'Brand',
        name: contactBusinessName
    } }) %}
{% endif %}
{% if productImagePath %}
    {% set schemaProduct = schemaProduct|merge({ image: asset_glide(productImagePath, 'image', {
        fm: 'jpg',
        q: 80,
        fit: 'contain',
        bg: 'ffffff',
        w: 1200,
        h: 1200
    }) }) %}
{% endif %}
{% set schemaAggregateRating = product_review_aggregate_rating(product) %}
{% if schemaAggregateRating %}
    {% set schemaProduct = schemaProduct|merge({ aggregateRating: schemaAggregateRating }) %}
{% endif %}

{% block title %}{{ seoTitle }}{% endblock %}

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'shop.title',
        description_key: 'shop.description',
        title: seoTitle,
        description: seoDescription,
        robots: 'index,follow'
    }) }}
    <script type="application/ld+json">{{ schemaProduct|json_encode|raw }}</script>
{% endblock %}

{% block body_attributes %}x-data="heritageLayout()" class="overflow-x-hidden bg-background font-body text-base text-primary selection:bg-secondary/20 selection:text-primary"{% endblock %}

{% block main %}
    <section class="relative overflow-hidden bg-background pt-34 pb-8 md:pt-40 md:pb-10">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[32rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.08),transparent_60%)]"></div>

        <div class="relative z-10 mx-auto w-full max-w-[1440px] px-4 md:px-16">
            {{ component('shop:ProductNavigation', { product: product }) }}
        </div>
    </section>

    <section class="mx-auto max-w-[1440px] px-4 md:px-16">
        {{ component('shop:ProductDetailForm', { product: product }) }}
    </section>

    <section class="mx-auto max-w-[1440px] px-4 md:px-16">
        <twig:marketing:ProductReviews :product="product" />
    </section>

    <section class="mx-auto max-w-[1440px] px-4 pb-16 md:px-16 md:pb-20">
        {{ component('shop:LegalNotice', { class: 'mt-10 md:mt-12' }) }}
    </section>
{% endblock %}
