{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}

<f:section name="leaflet">

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

    <f:asset.css identifier="ttaddress-leaflet" href="EXT:tt_address/Resources/Public/Contrib/leaflet-core-1.4.0.css" />
    <f:asset.css identifier="ttaddress" href="EXT:tt_address/Resources/Public/Styles/basic.css" />
    <f:asset.script identifier="ttaddress-leaflet-core" src="EXT:tt_address/Resources/Public/JavaScript/leaflet-core-1.4.0.js" />
    <f:asset.script identifier="ttaddress-leaflet" src="EXT:wseils/Resources/Public/JavaScript/Leaflet.js" />
</f:section>

<f:section name="googleMaps">
    <f:if condition="{settings.map.googleMaps.key}">
        <f:then>
            <f:render section="rendering" arguments="{_all}"/>

            <script src="https://maps.googleapis.com/maps/api/js?key={settings.map.googleMaps.key}"
                    type="text/javascript"></script>
            <script type="text/javascript" src="{f:uri.resource(path:'JavaScript/Frontend/GoogleMaps.js')}"></script>
        </f:then>
        <f:else>
            <div class="alert alert-danger">{f:translate(key:'no_google_maps_key')}</div>
        </f:else>
    </f:if>
</f:section>



<f:section name="rendering">
    <div class="btnMap">
        <div class="toggleView">
            <button id="showMap" type="button" class="btn btn-secondary" disabled>
                <svg id="map" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path id="basic_map" data-name="basic / map" d="M4.429,12.462h0L0,11V1.062L4.294,2.479,8.675,0l3.786,1.5v9.967L8.771,10,4.429,12.461ZM1.246,2.773v7.337l2.492.822V3.6ZM7.477,2.1,4.985,3.509v7.216l2.492-1.41Zm1.294-.732h0l-.048.027V8.656l2.492.988V2.335L8.771,1.367Z" transform="translate(2.769 2.769)"></path></svg>
                Affichage carte
            </button>
            <button id="showList" type="button" class="btn btn-default">
                <svg id="listing" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path id="edit_list_ul" data-name="edit / list_ul" d="M11.077,8.307H2.769V6.923h8.308V8.307Zm-9.693,0H0V6.923H1.384V8.307Zm9.693-3.461H2.769V3.462h8.308V4.846Zm-9.693,0H0V3.462H1.384V4.846Zm9.693-3.462H2.785V0h8.292V1.384Zm-9.693,0H0V0H1.384V1.384Z" transform="translate(3.462 4.846)"></path></svg>
                Affichage liste
            </button>
        </div>
    </div>

    <div id="ttaddress__map" data-default-lat="{settings.map.defaultPosition.lat}" data-default-lng="{settings.map.defaultPosition.lng}" ></div>
    <ul id="ttaddress__records">
        <f:for each="{addresses}" as="address">
            <f:if condition="{address.categories}">
                <f:for each="{address.categories}" as="categorie">
                    <f:switch expression="{categorie.uid}">
                        <f:case value="{settings.osad}">
                            <f:variable name="pathImg">/fileadmin/Icones/osad.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.fnosadMembre}">
                            <f:variable name="pathImg">/fileadmin/Icones/membreFnosad.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formateurs}">
                            <f:variable name="pathImg">/fileadmin/Icones/formateurs.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formationsInitiale}">
                            <f:variable name="pathImg">/fileadmin/Icones/formationsInitiales.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formationsContinue}">
                            <f:variable name="pathImg">/fileadmin/Icones/formationsContinues.svg</f:variable>
                        </f:case>
                        <f:defaultCase>
                            <f:variable name="pathImg">/fileadmin/Icones/osad.svg</f:variable>
                        </f:defaultCase>
                    </f:switch>
                </f:for>
            </f:if>
            <div id="ttaddress__record-{address.uid}" data-id="{address.uid}" data-lat="{address.latitude}" data-lng="{address.longitude}" data-icon="{pathImg}">
                <h6>{address.fullName}</h6>
                <f:if condition="{address.descriptionFormation}">
                    <f:format.html>{address.descriptionFormation}</f:format.html>
                </f:if>
                <div class="text-center">
                    <f:if condition="{settings.singlePid}">
                        <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn btn-sm btn-secondary"
                            pageUid="{settings.singlePid}">Voir détails
                        </f:link.action>
                    </f:if>
                </div>
            </div>
        </f:for>
    </ul>

    <ul class="list-group mapList">
        <f:for each="{addresses}" as="address" iteration="i">
            <f:if condition="{address.categories}">
                <f:for each="{address.categories}" as="categorie">
                    <f:switch expression="{categorie.uid}">
                        <f:case value="{settings.osad}">
                            <f:variable name="pathImg">/fileadmin/Icones/osad.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.fnosadMembre}">
                            <f:variable name="pathImg">/fileadmin/Icones/membreFnosad.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formateurs}">
                            <f:variable name="pathImg">/fileadmin/Icones/formateurs.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formationsInitiale}">
                            <f:variable name="pathImg">/fileadmin/Icones/formationsInitiales.svg</f:variable>
                        </f:case>
                        <f:case value="{settings.formationsContinue}">
                            <f:variable name="pathImg">/fileadmin/Icones/formationsContinues.svg</f:variable>
                        </f:case>
                        <f:defaultCase>
                            <f:variable name="pathImg">/fileadmin/Icones/osad.svg</f:variable>
                        </f:defaultCase>
                    </f:switch>
                </f:for>
            </f:if>
            <li id="ttaddress__label-{address.uid}" class="ttaddress__label list-group-item">
                <img loading="lazy" height="20" width="20" src="{pathImg}">
                <strong>{address.fullName}</strong><br>
                <f:render partial="Address" section="address" arguments="{_all}"/>
                <f:if condition="{settings.singlePid}">
                    <f:link.action action="show" arguments="{address : address}" title="{address.fullName}"
                        pageUid="{settings.singlePid}" class="btn btn-sm btn-secondary">Voir détails
                    </f:link.action>
                </f:if>
            </li>
        </f:for>
    </ul>
</f:section>