<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{product.attributes}">

    <f:for each="{product.attributesGroupedBySets}" as="attributesGroupedBySet">


        <div class="product-attributeSet product-attributeSet--{v:format.sanitizeString(string: attributesGroupedBySet.name)}">
            <h3 class="attributeSetName">
                {attributesGroupedBySet.name}
            </h3>

            <f:render section="attributes" arguments="{attributes: attributesGroupedBySet.attributes}"/>
        </div>

    </f:for>

    <f:if condition="{product.attributesDescription}">
        <div class="attributes-description">
            <f:format.html>{product.attributesDescription}</f:format.html>
        </div>
    </f:if>

</f:if>

<f:section name="attributes">
    <div class="table table-product-attributes">
        <f:for each="{attributes}" as="attribute">
            <f:if condition="{attribute.showInAttributeListing}">
                <f:comment>Label need to output only value</f:comment>
                <f:switch expression="{attribute.type}">
                    <f:case value="8">
                        <f:if condition="{attribute.value}">
                            <tr>
                                <td colspan="2">
                                    <h4>{attribute.value}</h4>
                                </td>
                            </tr>
                        </f:if>
                    </f:case>
                    <f:defaultCase>
                        <div class="table-row product-attribute">
                            <div class="table-cell product-attributeName">
                                <f:if condition="{attribute.icon}">
                                    <f:image maxWidth="{settings.attributes.iconMaxSize}"
                                             maxHeight="{settings.attributes.iconMaxSize}"
                                             image="{attribute.icon}"
                                             class="{settings.attributes.iconClasses}"
                                             title="{f:if(condition: attribute.label, then: attribute.label, else: attribute.name)}"
                                             alt="{f:if(condition: attribute.label, then: attribute.label, else: attribute.name)}"/>
                                </f:if>
                                <f:if condition="{attribute.label}" then="{attribute.label}" else="{attribute.name}"/>
                            </div>
                            <div class="table-cell product-attributeValue">
                                <f:render partial="Product/Attribute/Type{attribute.type}"
                                          arguments="{attribute: attribute}"/>
                            </div>
                        </div>
                    </f:defaultCase>
                </f:switch>
            </f:if>
        </f:for>
    </div>
</f:section>
</html>
