{% extends 'layout.html.twig' %}

{% set seo_entity = product %}
{% set seo_fallback = {'og_image': product.heroImages[0]} %}

{% block scripts %}
    <script>var ProductEditorConfig = {{ editorConfig|json_encode|raw }}</script>
    <script>var CustomersCanvas = {{ customersCanvasConfig|json_encode|raw }}</script>
    <script src="https://cc-apps.aurigma.net/78/design-editor/6.0.4/Resources/Generated/IframeApi.js"></script>
    {#<script>CustomersCanvas.IframeApi.preload();</script>#}
    <script src="{{ asset('assets/scripts/product.js') }}"></script>
    <script id="__bs_script__">//<![CDATA[
    document.write('<script async src=\'http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7\'><\/script>'.replace('HOST', location.hostname));
    //]]></script>
{% endblock %}

{% block site_breadcrumbs %}
    <a href="{{ product_index_path(product.category.productType) }}" class="site-crumbs-item">
        <span class="site-crumbs-item-label">{{ product.category.productType.title }}</span>
        <span class="site-crumbs-item-divider"></span>
    </a>
    {% if product.category.countPublishedProducts > 1 %}
        <a href="{{ product_index_path(product.category) }}" class="site-crumbs-item">
            <span class="site-crumbs-item-label">{{ product.category.title }}</span>
            <span class="site-crumbs-item-divider"></span>
        </a>
    {% endif %}
    {{ parent() }}
{% endblock %}

{% block content %}
    <div class="page product container">
        <div class="page-content" role="main">
            <div class="page-title">
                {% if product.category.icon %}
                    <img src="{{ product.category.icon.publicUrl }}" width="46" height="40" alt="{{ product.category.icon.altText }}" role="presentation">
                {% endif %}
                <span>{{ product.title }}</span>
            </div>

            {% if product.shippingDays %}
                <div class="product-shipping">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="25" height="25">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ asset('assets/images/sprite.svg') }}#icon-box"></use>
                    </svg>
                    <span>{{ product.shippingDays }} - <a href="/shipping-guide">Shipping Guide</a></span>
                </div>
            {% endif %}

            <div class="product-details">
                <div class="product-details-gallery">
                    {% if product.heroImages is not empty %}
                        <div class="product-details-gallery-hero">
                            <a href="{{ product.heroImages[0].publicUrl }}" data-fancybox="gallery">
                                <img src="{{ product.heroImages[0].publicUrl }}" alt="{{ product.heroImages[0].altText }}">
                            </a>
                        </div>
                    {% endif %}
                    {% if product.heroImages|length > 1 %}
                        <div class="product-details-gallery-thumbs">
                            {% for image in product.heroImages|slice(1) %}
                                <div class="product-details-gallery-thumbs-item">
                                    <a href="{{ image.publicUrl }}" data-fancybox="gallery">
                                        <img src="{{ image.publicUrl }}" alt="{{ image.altText }}">
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="product-details-content">
                    <div id="product-editor"></div>
                </div>
            </div>

            {{ product.description|raw }}
        </div>
    </div>
{% endblock %}