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

{% block bodyClass %}product-page{% endblock %}

{% block content %}
    <div class="container">
        {% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}

        <div class="product-show-container">
            <div class="row">
                <div class="col-md-6 col-lg-6">
                    {{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}
                </div>

                <div class="col-md-6 col-lg-6 product-resume-info-container">
                    {{ sylius_template_event('sylius.shop.product.show.right_sidebar', _context) }}
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <section class="product-description-container" id="product-description">
                    <h2 class="h2">{{ 'sylius.ui.description'|trans }}</h2>
                    {{ sylius_template_event('sylius.shop.product.show.tab_details', _context) }}
                </section>

                {% if product.attributes|length > 0 %}
                    <section class="product-attributes-container" id="product-attributes">
                        <h2 class="h2">{{ 'sylius.ui.attributes'|trans }}</h2>
                        {{ sylius_template_event('sylius.shop.product.show.tab_attributes', _context) }}
                    </section>
                {% endif %}

                <section class="product-reviews-container" id="product-reviews">
                    <h2 class="h2">{{ 'sylius.ui.reviews'|trans }}</h2>
                    {{ sylius_template_event('sylius.shop.product.show.tab_reviews', _context) }}
                </section>
            </div>
        </div>

        {% include '@SyliusShop/Product/Show/_associations.html.twig' %}
    </div>



{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        lightbox.option({
            'albumLabel': '{{ 'sylius.lightbox.image_album_label'|trans|escape('js') }}'
        });
    </script>
{% endblock %}
