{% import '@CoreShopFrontend/Common/Macro/currency.html.twig' as currency %}
{% import '@CoreShopFrontend/Common/Macro/product_price.html.twig' as product_price %}

{% extends '@CoreShopFrontend/layout-column.html.twig' %}

{% block center %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('coreshop_index') }}">{{ 'coreshop.ui.home'|trans }}</a></li>
            {% if product.categories|length > 0 %}
                {% for cat in product.categories|first.hierarchy %}
                    <li class="breadcrumb-item"><a href="{{ pimcore_object_path(cat) }}">{{ cat.name }}</a></li>
                {% endfor %}
            {% endif %}
            <li class="breadcrumb-item active">{{ product.name }}</li>
        </ol>
    </nav>

    <div class="row product-info">

        <div class="col-sm-5 images-block">
            {% if product.image is pimcore_asset_image %}
                {{ product.image|pimcore_image_thumbnail_html("coreshop_productDetail", {'imgAttributes': {'class': 'img-fluid img-thumbnail'}}) }}
            {% endif %}

            {% if product.images|length > 0 %}
                <div class="row">
                    {% for image in product.images %}
                        <div class="col-12 col-sm-6">
                            {{ image|pimcore_image_thumbnail_html("coreshop_productDetailThumbnail", {'imgAttributes': {'class': 'img-fluid img-thumbnail'}}) }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="col-sm-7 product-details">
            <h2 {{ coreshop_test_html_attribute('product-name', product.name) }}>{{ product.name }}</h2>
            <hr/>

            {% if product.shortDescription|length > 0 %}
                <div class="description">
                    {{ product.shortDescription }}
                </div>
                <hr/>
            {% endif %}

            <ul class="list-unstyled manufacturer">
                {% if product.manufacturer %}
                    <li>
                        <span>{{ 'coreshop.ui.brand'|trans }}:</span> {{ product.manufacturer.name }}
                    </li>
                {% endif %}

                {% if product.ean %}
                <li><span>{{ 'coreshop.ui.ean'|trans }}:</span> {{ product.ean }}
                    {% endif %}
                <li>
                    <span>{{ 'coreshop.ui.availability'|trans }}:</span>
                    {% if product.isTracked %}
                        {% if coreshop_inventory_is_available(product) %}
                            <strong class="label label-success"> {{ 'coreshop.ui.in_stock'|trans }}</strong>
                        {% else %}
                            <span {{ coreshop_test_html_attribute('product-out-of-stock') }}>
                                {{ 'coreshop.ui.out_of_stock'|trans }}
                            </span>
                        {% endif %}
                    {% else %}
                        <strong class="label label-success"> {{ 'coreshop.ui.in_stock'|trans }}</strong>
                    {% endif %}
                </li>
            </ul>
            <hr/>

            {% include '@CoreShopFrontend/Product/_variants.html.twig' %}

            {% if product.hasUnitDefinitions == true %}
                <div class="unit-prices">
                    {{ product_price.display_product_unit_prices(product) }}
                </div>
            {% else %}
                <div class="price">
                    <span class="price-head">{{ 'coreshop.ui.price'|trans }}:</span>
                    {{ product_price.display_product_price(product) }}
                </div>
                <div class="tax">
                    <span {{ coreshop_test_html_attribute('product-tax-rate', product|coreshop_product_tax_rate(coreshop.context)) }}>
                        {{ 'coreshop.ui.product.tax.inc'|trans|format(product|coreshop_product_tax_rate(coreshop.context)) }}
                    </span>

                    <span {{ coreshop_test_html_attribute('product-tax', currency.convertAndFormat(product|coreshop_product_tax_amount(coreshop.context))) }}>
                        ({{ currency.convertAndFormat(product|coreshop_product_tax_amount(coreshop.context)) }})
                    </span>
                </div>
            {% endif %}

            <hr/>

            {% if coreshop_quantity_price_rule_ranges_available(product, coreshop.context) %}
                {% set rule = coreshop_quantity_price_rule(product, coreshop.context) %}
                {% include '@CoreShopFrontend/ProductQuantityPriceRanges/quantity_price_ranges_' ~ rule.calculationBehaviour ~'.html.twig' with { rule: rule, product: product } only %}
                <hr/>
            {% endif %}

            {% set cart_allowed = is_granted('CORESHOP_CART') and is_granted('CORESHOP_CART_ADD_ITEM') %}
            {% set wishlist_allowed = is_granted('CORESHOP_WISHLIST') and is_granted('CORESHOP_WISHLIST_ADD_ITEM') %}

            {% if coreshop_add_to_cart_available(product) and (cart_allowed or wishlist_allowed) %}
                <div class="options">
                    <div class="cart-button btn-group">
                        {% if wishlist_allowed %}
                            {{ render(url('coreshop_partial_wishlist_add', {'product': product.id|coreshop_string})) }}
                        {% endif %}

                        {% if cart_allowed %}
                            {{ render(url('coreshop_partial_cart_add', {'product': product.id|coreshop_string})) }}
                        {% endif %}
                    </div>
                </div>
                <hr/>
            {% endif %}

        </div>
    </div>

    <div class="tabs-panel card-smart">
        <ul class="nav nav-tabs">
            <li class="nav-item active">
                <a class="nav-link" href="#tab-description">{{ 'coreshop.ui.description'|trans }}</a>
            </li>
        </ul>

        <div class="tab-content clearfix">
            <div class="tab-pane active" id="tab-description">
                {% if product.description|length > 0 %}
                    {{ product.description|raw }}
                {% else %}
                    {{ 'coreshop.ui.no_description_available'|trans }}
                {% endif %}
            </div>
        </div>
    </div>

    <br/>
{% endblock %}
