{% extends '@SyliusShop/layout.html.twig' %}
{% block title %}{{ product.name }} | {{ parent() }}{% endblock %}
{% block content %}
<div class="container-h">
{% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}
{# <div class="ui hidden divider"></div>#}
{% if product.images.toArray()|length > 1%}
<div class="header-product-info">
{{ sylius_template_event('sylius.shop.product.show.before.content', _context) }}
</div>
<div class="mobile-version-gallery">
{% include '@SyliusShop/Product/Show/_image_mobile.html.twig' %}
</div>
<div class="ui two column stackable grid" id="destock-version-gallery">
<div class="column" id="column-left">
{{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}
</div>
<div class="column" id="column-right">
{{ sylius_template_event('sylius.shop.product.show.right_sidebar.images', _context) }}
</div>
</div>
{% else %}
<div class="ui two column stackable grid" id="gallery-main-and-secondary">
<div class="column" id="column-left">
{{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}
</div>
<div class="header-product-info column">
{{ sylius_template_event('sylius.shop.product.show.before.content', _context) }}
</div>
</div>
{% endif %}
</div>
{{ sylius_template_event('sylius.shop.product.show.content', _context) }}
<style>
#main-container {
padding-bottom: 0;
}
#box-product-card{
display: none;
width: 100% !important;
margin: 0 !important;
}
#box-product-card:nth-child(1){
display: flex;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
lightbox.option({
'albumLabel': '{{ 'sylius.lightbox.image_album_label'|trans|escape('js') }}'
});
</script>
{% endblock %}