{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}


{% block page_product_detail_tabs_inner %}
    <div class="">
        <a class="d-none" data-bs-toggle="tab"></a>

        {% block page_product_detail_tabs_navigation %}
            <div class="product-detail-tab-navigation">
                {% block page_product_detail_tabs_navigation_container %}
                    <ul class="nav nav-tabs product-detail-tab-navigation-list"
                        id="product-detail-tabs"
                        role="tablist">

                        {% block page_product_detail_tabs_navigation_description %}
                            <li class="nav-item">
                                <a class="nav-link {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %}"
                                   id="eigenschaften-tab"
                                   data-bs-toggle="tab"
                                        {% if feature('v6.6.0.0') %}
                                            data-off-canvas-tabs="true"
                                        {% else %}
                                            data-offcanvas-tabs="true"
                                        {% endif %}
                                   href="#eigenschaften-tab-pane"
                                   role="tab"
                                   aria-controls="eigenschaften-tab-pane"
                                   aria-selected="true">
                                    <span>Eigenschaften</span>
                                    <span class="product-detail-tab-navigation-icon">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</span>
                                </a>
                            </li>



                            {% if page.product.customFields.custom_wine_attributes_Ingredients_url %}
                                <li class="nav-item">
                                    <a class="nav-link"
                                       id="zutaten-tab"
                                       data-bs-toggle="tab"
                                            {% if feature('v6.6.0.0') %}
                                                data-off-canvas-tabs="true"
                                            {% else %}
                                                data-offcanvas-tabs="true"
                                            {% endif %}
                                       href="#zutaten-tab-pane"
                                       role="tab"
                                       aria-controls="zutaten-tab-pane"
                                       aria-selected="true">
                                        <span>Zutaten & Nährwerte</span>
                                        <span class="product-detail-tab-navigation-icon">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</span>
                                    </a>
                                </li>
                            {% endif %}

                            {#
                            <li class="nav-item">
                            <a class="nav-link"
                               id="naehrwerte-tab"
                               data-bs-toggle="tab"
                                    {% if feature('v6.6.0.0') %}
                                        data-off-canvas-tabs="true"
                                    {% else %}
                                        data-offcanvas-tabs="true"
                                    {% endif %}
                               href="#naehrwerte-tab-pane"
                               role="tab"
                               aria-controls="naehrwerte-tab-pane"
                               aria-selected="true">
                                <span>Nährwerte</span>
                                <span class="product-detail-tab-navigation-icon">{% sw_icon 'arrow-head-right' style { 'size': 'sm' } %}</span>
                            </a>
                        </li>
                            #}

                        {% endblock %}
                        {% block page_product_detail_tabs_navigation_review %}{% endblock %}
                    </ul>
                {% endblock %}
            </div>
        {% endblock %}

        {% block page_product_detail_tabs_content %}
            <div class="product-detail-tabs-content">
                {% block page_product_detail_tabs_content_container %}

                    <div class="tab-content">

                        <!-- Eigenschaften-Tab -->
                        <div class="tab-pane fade show {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %}"
                             id="eigenschaften-tab-pane"
                             role="tabpanel"
                             aria-labelledby="eigenschaften-tab">

                            <div class="offcanvas-header">
                                <button class="btn btn-primary offcanvas-close js-offcanvas-close d-sm-none">
                                    {% sw_icon 'x' style { 'size': 'sm' } %}
                                    Eigenschaften
                                </button>
                            </div>

                            <div class="offcanvas-body">
                                <div class="tab-pane-container">
                                    {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %}
                                </div>
                            </div>
                        </div>

                        {% if page.product.customFields.custom_wine_attributes_Ingredients_url %}
                            <!-- Zutaten-Tab -->
                            <div class="tab-pane fade show"
                                 id="zutaten-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="zutaten-tab">

                                <div class="offcanvas-header">
                                    <button class="btn btn-primary offcanvas-close js-offcanvas-close d-sm-none">
                                        {% sw_icon 'x' style { 'size': 'sm' } %}
                                        Zutaten & Nährwerte
                                    </button>
                                </div>

                                <div class="offcanvas-body">
                                    <div class="tab-pane-container">
                                        <div class="row product-detail-properties-container">
                                            <div class="col-md-12 col-lg-9">


                                                <a title="Zutaten & Nährwerte als PDF herunterladen" class="btn btn-primary" target="_blank" href="{{ page.product.customFields.custom_wine_attributes_Ingredients_url }}">Zutaten
                                                    & Nährwerte als PDF herunterladen</a>


                                                {# <table class="table is-data">
                                                    <tr>
                                                        <th>{{ "detail.productNumberLabel"|trans|sw_sanitize }}</th>
                                                        <td>
                                                            <meta itemprop="productID" content="{{ page.product.id }}">
                                                            <span itemprop="sku">{{ page.product.productNumber }}</span>
                                                        </td>
                                                    </tr>
                                                </table>
                                                #}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        {#
                        <!-- Nährwerte-Tab -->
                        <div class="tab-pane fade show"
                             id="naehrwerte-tab-pane"
                             role="tabpanel"
                             aria-labelledby="naehrwerte-tab">

                            <div class="offcanvas-header d-sm-none">
                                <button class="btn btn-primary offcanvas-close js-offcanvas-close">
                                    {% sw_icon 'x' style { 'size': 'sm' } %}
                                    Nährwerte
                                </button>
                            </div>

                            <div class="offcanvas-body">
                                <div class="tab-pane-container">
                                    <div class="row product-detail-properties-container">
                                        <div class="col-md-12 col-lg-9">
                                            <table class="table is-data">
                                                <tr>
                                                    <th>{{ "detail.productNumberLabel"|trans|sw_sanitize }}</th>
                                                    <td>
                                                        <meta itemprop="productID" content="{{ page.product.id }}">
                                                        <span itemprop="sku">{{ page.product.productNumber }}</span>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        #}

                        {% block page_product_detail_tabs_content_description %}{% endblock %}
                        {% block page_product_detail_tabs_content_review %}{% endblock %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}










