{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Faq" />

<f:section name="Main">
    <div class="page-hero faq-hero">
        <div class="container-fluid">
            <h1><f:translate key="LLL:EXT:products/Resources/Private/Language/locallang_frontend.xlf:faq.heading" /></h1>
            <form class="form-inline form-faq-search">
                <input type="text" class="form-control input-lg faq-search-query" name="q" placeholder="{f:translate(key: 'LLL:EXT:products/Resources/Private/Language/locallang_frontend.xlf:search.placeholder')}" autocomplete="off">
                <input type="submit" value="{f:translate(key: 'LLL:EXT:products/Resources/Private/Language/locallang_frontend.xlf:search.button')}" class="btn btn-default btn-lg">
            </form>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-8">
                <f:for each="{productGroups}" as="productGroup">
                    <f:if condition="{productGroup.faq}">
                        <div class="faq-group">
                            <h3>{productGroup.name}</h3>
                            <f:render partial="Faq/Items" section="Items" arguments="{faqs: productGroup.faq, uid: productGroup.uid}" />
                        </div>
                    </f:if>
                </f:for>
            </div>
        </div>
        <div class="alert alert-danger alert-no-results" role="alert">
    		<f:translate key="LLL:EXT:products/Resources/Private/Language/locallang_frontend.xlf:faq.no_result" />
    	</div>
    </div>
</f:section>