{% extends 'eshop/@layout.html.twig' %}

{% block title %}
    {% if product.translation(shop.currentLocale).title %}
        {{ product.translation(shop.currentLocale).title }}
    {% else %}
        {{ product.translation(shop.currentLocale).name }}
    {% endif %}
    - {{ parent() }}
{% endblock %}

{% block keywords %}
    {% if product.translation(shop.currentLocale).metaKeywords %}
        {{ product.translation(shop.currentLocale).metaKeywords }}
    {% endif %}
{% endblock %}

{% block description %}
    {% if product.translation(shop.currentLocale).metaDescription %}
        {{ product.translation(shop.currentLocale).metaDescription }}
    {% endif %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href=" https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css " rel="stylesheet">
{% endblock %}

{% block system_main %}
    <script>
        const variants = [];
        {% for variant in product.productVariants %}
        variants.push({
            'id': {{ variant.id }},
            'combination': '{{ variant.combinationsIds|join('-') }}',
            'price': '{{ variant.priceWithExtra }}',
            'inStock': '{{ variant.inStock }}',
            'unit': '{{ variant.unit ? variant.unit.translation(locale).name : '' }} ',
            'imageUrl': {{ variant.image ? ("'" ~ productImagePath(variant.image) ~ "'")|raw : 'null' }},
        });
        {% endfor %}
    </script>
    <section class="p-5" itemscope itemtype="http://schema.org/Product">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    {{ include('eshop/component/product_gallery.html.twig', {product}) }}
                </div>
                <div class="col-lg-6">
                    {{ include('eshop/component/product_params.html.twig', {product, form}) }}
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-8">
                    {{ include('eshop/component/product_content.html.twig', {product}) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}