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

<f:section name="Main">

    <f:render section="Countries" arguments="{_all}" />

</f:section>

<f:section name="InfoWindow">
    <div class="infowindow">
        <h3>{location.name}</h3>
        <f:if condition="{location.contact}">
            <p>{location.contact}</p>
        </f:if>
        <p>
            {location.street}<br>
            {location.zip} {location.locality}<br>
            {location.country}
        </p>
        <p>
            <f:if condition="{location.phone}"><i class="fa fa-fw fa-phone"></i> <span>{location.phone}</span><br></f:if>
            <f:if condition="{location.phone2}"><i class="fa fa-fw fa-phone"></i> <span>{location.phone2}</span><br></f:if>
            <f:if condition="{location.fax}"><i class="fa fa-fw fa-fax"></i> <span>{location.fax}</span><br></f:if>
            <f:if condition="{location.email}"><i class="fa fa-fw fa-envelope"></i> <a href="mailto:{location.email}">{location.email}</a><br></f:if>
            <f:if condition="{location.website}"><i class="fa fa-fw fa-globe"></i> <a href="{location.website}" target="_blank">{location.website}</a><br></f:if>
        </p>
    </div>
</f:section>

<f:section name="Countries">
    <f:if condition="{countries}">
        <div class="panel-group" id="accordion-locations" role="tablist" aria-multiselectable="true">
            <f:for each="{countries}" as="value" key="key" iteration="iterator">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="accordion-locations-heading-{iterator.cycle}">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-locations" href="#accordion-locations-{iterator.cycle}" aria-expanded="false" aria-controls="accordion-locations-{iterator.cycle}">
                                <span>{key}</span>
                            </a>
                        </h4>
                    </div>
                    <div class="panel-collapse collapse" id="accordion-locations-{iterator.cycle}" role="tabpanel" aria-labelledby="accordion-locations-heading-{iterator.cycle}">
                        <div class="panel-body">
                            <div class="locations-list">
                                <div class="row">
                                    <f:for each="{value.locations}" as="location">
                                        <div class="col-sm-6 col-md-4">
                                            <f:render section="InfoWindow" arguments="{location: location}" />
                                        </div>
                                    </f:for>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </f:for>
        </div>
    </f:if>
</f:section>