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

{% set heroPath = product.backgroundImage and product.backgroundImage.path ? product.backgroundImage.path : 'images/header/shop.jpg' %}
{% set heroWidth = product.backgroundImage and product.backgroundImage.width ? product.backgroundImage.width : 1800 %}
{% set heroHeight = product.backgroundImage and product.backgroundImage.height ? product.backgroundImage.height : 1177 %}
{% set seoTitle = (product.fullName ?: product.name) ~ ' - ' ~ ('shop.title'|trans({}, 'menu')) %}
{% set seoDescription = (product.description|default('')|striptags|trim) ?: ('shop.description'|trans({}, 'meta')) %}
{% set productImagePath = product.secondImage and product.secondImage.path
    ? product.secondImage.path
    : (product.image and product.image.path ? product.image.path : 'images/logo-meta.jpg')
%}
{% set schemaOffers = [] %}
{% set hasInStockOffer = false %}
{% for variant in product.variants %}
    {% set variantPrice = activePriceGroupId ? variant.getPriceByGroupId(activePriceGroupId) : null %}
    {% if not variant.unPublished and variantPrice %}
        {% set isOfferOutOfStock = product.soldOut or variant.soldOut or not variant.available %}
        {% set schemaOffer = {
            '@type': 'Offer',
            url: app.request.uri,
            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,
            seller: {
                '@type': 'Organization',
                name: 'Champagne Saint-Réol'
            }
        } %}
        {% 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 %}

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

{% block meta %}
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/favicon/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/favicon/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicon/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ absolute_url('site.webmanifest') }}">
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}" content="{{ seoDescription }}">
    <meta property="og:site_name" content="Champagne Saint-Réol">
    <meta property="og:title" content="{{ seoTitle }}">
    <meta property="og:type" content="product">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url(asset('images/logo-meta.jpg')) }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description" content="{{ seoDescription }}">
    <script type="application/ld+json">{{ {
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: product.fullName ?: product.name,
        description: seoDescription,
        category: category.name,
        url: app.request.uri,
        image: absolute_url(asset(productImagePath)),
        availability: 'https://schema.org/' ~ (hasInStockOffer ? 'InStock' : 'OutOfStock'),
        brand: {
            '@type': 'Brand',
            name: 'Champagne Saint-Réol'
        },
        sku: product.sku,
        offers: schemaOffers
    }|json_encode|raw }}</script>
{% endblock meta %}

{% block header_top %}
    <twig:Image
        mapping="public"
        class="peer dark fixed -z-20 h-[100vh] max-h-[100svh] w-full overflow-hidden bg-transparent"
        img:class="min-safe-h-screen min-h[100vh] h-[100vh] w-full object-cover"
        lazy="{{ false }}"
        quality="{{ 60 }}"
        responsive="{{ true }}"
        path="{{ heroPath }}"
        imageWidth="{{ heroWidth }}"
        imageHeight="{{ heroHeight }}" />
{% endblock %}

{% block main %}
    <div class="relative -z-10 mt-[-60px] min-h-[18rem] sm:min-h-[20rem]"></div>

    <div class="bg-light max-w-large large:mx-auto relative mx-2 flex flex-col lg:mx-8">
        <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 pt-10 pb-2 md:px-10 lg:px-16 lg:pt-16">
            <a
                href="{{ path('shop', { slug: category.slug }) }}"
                class="text-dark/70 inline-flex w-fit items-center gap-2 text-sm tracking-[0.16em] uppercase transition hover:text-dark"
            >
                <span aria-hidden="true">&larr;</span>
                {{ 'shop.product.back_to_shop'|trans }}
            </a>
            <div class="max-w-3xl">
                <div class="text-sm tracking-[0.18em] uppercase text-dark/50">{{ category.name }}</div>
                <h1 class="mt-4 font-serif text-3xl tracking-[0.08em] uppercase text-dark sm:text-4xl lg:text-5xl">{{ product.name|raw }}</h1>
                {% if product.quality %}
                    <div class="mt-3 text-lg tracking-[0.16em] uppercase text-gold">{{ product.quality|raw }}</div>
                {% endif %}
            </div>
        </div>

        <div class="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 py-10 md:px-10 lg:px-16 lg:py-16">
            {{ component('shop:ProductDetailForm', { product: product }) }}
            {{ component('shop:LegalNotice', { class: 'max-w-none pt-2' }) }}
        </div>
    </div>
{% endblock %}
