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


{% block page_product_detail_properties_container %}
    <div class="row product-detail-properties-container">
        <div class="col-md-12 col-lg-9">
            {% block page_product_detail_properties_table %}
                <table class="table is-data">
                    <tbody>
                    {# @var product \Shopware\Core\Content\Product\SalesChannel\SalesChannelProductEntity #}
                    {% for group in page.product.sortedProperties %}
                        {% block page_product_detail_properties_table_row %}
                            <tr>
                                {% block page_product_detail_properties_item_label %}
                                    <th>{{ group.translated.name|e }}:</th>
                                {% endblock %}
                                {% block page_product_detail_properties_item_value %}
                                    <td>
                                        {% apply spaceless %}
                                            {% for option in group.options %}
                                                {% set i = ( i|default(0) ) + 1 %}
                                                <span>{% if i > 1 %}, {% endif %}{{ option.translated.name|e }}</span>
                                            {% endfor %}
                                        {% endapply %}
                                    </td>
                                {% endblock %}
                            </tr>
                        {% endblock %}
                    {% endfor %}

                    {% if page.product.productNumber %}
                        <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>
                    {% endif %}
                    </tbody>
                </table>
            {% endblock %}
        </div>
    </div>
{% endblock %}