{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace e=Medienreaktor\Energize\ViewHelpers}
<f:layout name="Product" />

<f:section name="Main">

    <f:if condition="{productGroup}">
        <e:pageTitle title="{productGroup.name} {productGroup.subtitle}" />

        <f:render partial="Product/Header" section="Hero" arguments="{productGroup: productGroup}" />
        <f:render partial="Product/Header" section="Description" arguments="{productGroup: productGroup}" />

        <f:if condition="{productGroup.products}">
            <div class="variant-switch variant-switch-open">
                <div class="container-fluid">
                    <div class="variant-switch-toggle"><span><f:translate key="LLL:EXT:products/Resources/Private/Language/locallang_frontend.xlf:product.variants" /></span></div>
                </div>
                <f:render partial="Product/VariantSwitch" section="Body" arguments="{products: productGroup.products}" />
            </div>
        </f:if>
    </f:if>

    <div class="product-variant">
        <div class="product-variant-header">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-8">
                        <div class="h2">
                            <f:image src="EXT:products/Resources/Public/Images/PlaceholderHeadline.svg" class="img-responsive" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="product-images">
                            <f:image src="EXT:products/Resources/Public/Images/PlaceholderImage.svg" class="img-fullwidth" />
                        </div>
                    </div>
                    <div class="col-sm-7 col-sm-offset-1">
                        <div class="placeholders">
                            <f:image src="EXT:products/Resources/Public/Images/PlaceholderText.svg" class="img-responsive" />
                            <f:image src="EXT:products/Resources/Public/Images/PlaceholderBullets.svg" class="img-responsive" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</f:section>