{namespace vendeemap=Wseils\Vendeemap\ViewHelpers}

<f:variable name="responsiveClass">frame-{data.tx_vendee_responsive}</f:variable>

<div class="frame-mdsfContent {responsiveClass}" id="c{data.uid}" {f:if(condition: '{data.layout} == 4', then: 'data-speed="10"')} {f:if(condition: '{data.layout} == 5', then: 'data-appear="true"')}>
    <vendeemap:GetCommune folder='{settings.folderCities}'/>
    <vendeemap:GetMdsf folder='{settings.folderMDSF}'/>
    <div class="mdsfContent">
        <f:if condition="{data.header}">
            <f:then>
                <header class="frame-header">
                    <h3>{data.header}</h3>
                </header>
            </f:then>
            <f:else>
                <header class="frame-header">
                    <h3>Maisons Départementales des Solidarités et de la Famille de la Vendée</h3>
                </header>
            </f:else>
        </f:if>
        <f:if condition="{data.bodytext}">
            <p>{data.bodytext}</p>
        </f:if>
        <div class="mdsfSearchDiv">
            <input class="form-control" placeholder="Recherchez un code postal" type="number" id="mdsfSearch">
        </div>
        <f:if condition="{listCommunes}">
            <ul id="mdsfSearchList" aria-hidden="true" class="rs_skip">
                <f:for each="{listCommunes}" as="commune">
                    <li><a href="#" data-mdsf="{commune.mdsf}" title="{commune.title}" class="selectMDSF">{commune.title}</a></li>
                </f:for>
            </ul>
        </f:if>
        <f:if condition="{listMDSF}">
            <ul id="mdsfList" aria-hidden="true" class="rs_skip">
                <f:for each="{listMDSF}" as="mdsf">
                    <li data-mdsf="{mdsf.id}">
                        <p class="title">{mdsf.name}</p>
                        <p>{mdsf.address}</p>
                        <p>{mdsf.zip} {mdsf.city}</p>
                        <f:if condition="{mdsf.phone}">
                            <p>Tél.: <a href="tel:{mdsf.phone}">{mdsf.phone}</a></p>
                        </f:if>
                        <f:if condition="{mdsf.email}">
                            <p>Mail: <a href="mailto:{mdsf.email}">{mdsf.email}</a></p>
                        </f:if>
                    </li>
                </f:for>
                <p class="mdsflink">{f:cObject(typoscriptObjectPath:'lib.mapMdsf')}</p>
            </ul>
        </f:if>
    </div>
</div>