{% extends 'shop/shop.html.twig' %}

{% block title %}{{ product.title }}{% endblock %}

{% block content %}
<div class="col-12 col-lg-9">

    <hr class="line line--gray">

    {% set BreadCrumbsCat = product.categoryProducts[0].category %}
    {% set BreadCrumbsArr = [] %}

    {% set BreadCrumbsArr = get_breadcrumbs_array(BreadCrumbsCat) %}
    {% if BreadCrumbsCat.id > 1 %}
        {% set BreadCrumbsArr = BreadCrumbsArr|merge([{name: 'Publikace a e-shop', slug:''}]) %}
    {% endif %}

    {% if BreadCrumbsArr|length > 0 %}
        <ul class="shop-breadcrumbs">
            {% for BreadCrumbsItem in BreadCrumbsArr|reverse %}
                <li>
                    <a href="/{{ app.request.locale }}/publikace/{{ BreadCrumbsItem.slug }}" class="shop-breadcrumbs__link">{{ BreadCrumbsItem.name }}</a>
                </li>
            {% endfor %}
            <li>
                <a href="/{{ app.request.locale }}/publikace/{{  product.categoryProducts[0].category.slug }}" class="shop-breadcrumbs__link">{{  product.categoryProducts[0].category.name }}</a>
            </li>
            <li class="shop-breadcrumbs__current">
                {{ product.name }}
            </li>
        </ul>
    {% endif %}

    <div id="product-details-vue" data-product-id={{ product.id }}></div> {# ProductDetails vue component #}

</div>

{{ encore_entry_script_tags('mount-product-details') }}
{% endblock %}