{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{# ThemeWare: Properties tab on product pages #}

{# ---------------- START: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: Set theme variables #}
{% set twtProductDetailTabPropertiesInfoShow = theme_config('twt-product-detail-tab-properties-info-show') %}

{# ---------------- END: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: Adjustments on offcanvas tab-content #}
{% block utilities_offcanvas_content %}
    {# ThemeWare: Show properties in individuell tab if configured (see. tabs.html.twig) #}
    {% block page_product_detail_properties_container %}
        {# ThemeWare: Add properties to offcanvas content #}
        <div class="twt-product-detail-properties tab-pane-container">
            {# ThemeWare: Add properties headline #}
            {% block page_product_detail_properties_title %}
                <div class="h3 twt-product-properties-description-title">
                    {{ "twt.detail.headlineProperties"|trans|sw_sanitize }} "{{ page.product.translated.name }}"
                </div>
            {% endblock %}

            {% block page_product_detail_properties_content %}
                {% block page_product_detail_properties_content_text %}
                    <div class="twt-product-detail-properties-text">
                        {% if page.product.sortedProperties|length > 0 %}
                            {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %}
                        {% endif %}
                    </div>
                {% endblock %}
            {% endblock %}

            {# ThemeWare: Add properties to offcanvas content #}
            {% if twtProductDetailTabPropertiesInfoShow == 2 %}
                {% block page_product_detail_properties_info %}
                    <div class="twt-product-detail-properties-info">
                        {{ "twt.detail.infoProperties"|trans|sw_sanitize }}
                    </div>
                {% endblock %}
            {% endif %}
        </div>
    {% endblock %}
{% endblock %}