{% set productTranslation = product.translation(shop.currentLocale) %}
<main>
    {{ component('flash_messages') }}
    {{ form_start(form) }}
    <article class="ps-lg-3">
        <h1 class="title text-dark" itemprop="name">
            {{ productTranslation.name }}
        </h1>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currentCurrency }}">
            <div class="mb-3">
                {% if product.productDefaultVariant.priceWithExtra %}
                    <span class="price h5">
                {{ 'price'|translate }}:
                    <span class="price-amount"
                          itemprop="price"
                          content="{{ (product.productDefaultVariant.priceWithExtra / 100)|number_format(2, '.', '') }}"
                          data-default-price="{{ product.productDefaultVariant.priceWithExtra }}">
                        {{ product.productDefaultVariant.priceWithExtra|money }}
                    </span>
            </span>
                {% else %}
                    <span class="price h5" itemprop="price">
                {{ 'price'|translate }}: {{ 'free'|translate }}
            </span>
                {% endif %}
                {% if product.productDefaultVariant.unit %}
                    <span class="text-muted">&nbsp;/&nbsp;{{ product.productDefaultVariant.unit.translation(shop.currentLocale).name }}</span>
                {% endif %}
            </div>
            {% if product.code %}
                <dl class="row">
                    <dt class="col-3">{{ 'product_code'|translate }}:</dt>
                    <dd class="col-9">{{ product.code }}</dd>
                </dl>
            {% endif %}
            {% if productTranslation.tax %}
                <dl class="row">
                    <dt class="col-3">{{ 'tax'|translate }}:</dt>
                    <dd class="col-9">{{ productTranslation.tax.taxValue }}&nbsp;%</dd>
                </dl>
            {% endif %}
            {% if product.productDefaultVariant.inStock %}
                <dl class="row stock-amount">
                    <dt class="col-3">{{ 'in_stock'|translate }}:</dt>
                    <dd class="col-9 value">
                        <link itemprop="availability" href="http://schema.org/InStock"/>
                        {% set inStockText = product.productDefaultVariant.inStock %}
                        {% if product.productDefaultVariant.unit %}
                            {% set inStockText = inStockText ~ '&nbsp;' ~ product.productDefaultVariant.unit.translation(shop.currentLocale).name %}
                        {% endif %}
                        {{ inStockText|raw }}
                    </dd>
                </dl>
            {% endif %}
            {% if product.productParameters|length %}
                {% for productParameter in product.productParameters %}
                    <dl class="row parameter"
                        itemprop="exifData" itemscope itemtype="https://schema.org/PropertyValue"
                    >
                        <dt class="col-3">
                            <meta itemprop="name"
                                  content="{{ productParameter.parameterValue.parameter.translation(shop.currentLocale).name }}">
                            {{ productParameter.parameterValue.parameter.translation(shop.currentLocale).name }}:
                        </dt>
                        <dd class="col-9 value">
                            <meta itemprop="value"
                                  content="{{ productParameter.parameterValue.translation(shop.currentLocale).name }}">
                            {{ productParameter.parameterValue.translation(shop.currentLocale).name }}
                        </dd>
                    </dl>
                {% endfor %}
            {% endif %}

            {% if productTranslation.shortDescription %}
                <div class="card">
                    <div class="tab-content">
                        <article class="tab-pane show active card-body">
                            <div itemprop="shortDescription">
                                {{ productTranslation.shortDescription|raw }}
                                {% if productTranslation.description %}
                                    <div>
                                        <a href="#product-description">{{ 'show_more'|translate }}</a>
                                    </div>
                                {% endif %}
                            </div>
                        </article>
                    </div>
                </div>
            {% endif %}
            <hr>
            <div class="row mb-4" data-controller="product-form">
                {% if product.productVariants.count > 1 %}
                    <div class="col-md-6 col-6 mb-2 variant ">
                        <div>
                            {{ render(controller('App\\Controller\\Shop\\VariantController::renderVariants', {
                                product: product
                            })) }}
                        </div>
                    </div>
                {% endif %}
                <div class="col-md-6 col-6 mb-3 quantity">
                    {{ _self.showQuantityPicker(product.productDefaultVariant, form) }}
                </div>
            </div>
            {% if product.toSell %}
                <button type="submit" class="btn  btn-primary">
                    <i class="me-1 fa fa-shopping-basket"></i>
                    {{ 'button_add_product_to_cart'|translate }}
                </button>
            {% else %}
                <twig:alert type="warning" message="{{ 'alert_product_is_not_sellable'|translate }}"/>
            {% endif %}
        </div>
    </article>
    {{ form_end(form) }}
</main>

{% macro showQuantityPicker(defaultVariant, form) %}
    <label class="form-label d-block required" for="add_product_to_basket_quantity">{{ 'quantity'|translate }}</label>
    <div class="quantity-wrap">
        <div class="amount">
            <div class="input-group input-spinner">
                <button class="btn btn-icon btn-light" type="button"
                        data-action="shop-product-detail#quantityDecrease">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#999"
                         viewBox="0 0 24 24">
                        <path d="M19 13H5v-2h14v2z"></path>
                    </svg>
                </button>
                {{ form_widget(form.quantity) }}
                <button class="btn btn-icon btn-light" type="button"
                        data-action="shop-product-detail#quantityIncrease">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#999"
                         viewBox="0 0 24 24">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="unit">
            {% if defaultVariant.unit %}
                {{ defaultVariant.unit.translation(shop.currentLocale).name }}
            {% endif %}
        </div>
    </div>
{% endmacro %}