{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-markercluster" src="EXT:wseils/Resources/Public/Libs/Leaflet.markercluster/dist/leaflet.markercluster.js" />
    <f:asset.script identifier="ttaddress-leaflet" src="EXT:wseils/Resources/Public/Libs/Leaflet-ttaddress.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="staticGoogleMaps">
    <f:if condition="{settings.map.staticGoogleMaps.parameters.key}">
        <f:then>
            <img src="{ttaddr:staticGoogleMaps(parameters:settings.map.staticGoogleMaps.parameters,addresses:addresses)}" />
        </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">
    <f:if condition="{settings.allowOverride} && {filters}">
		<div class="accordion" id="accordionAddressForm">
			<div class="accordion-item">
                <h2 class="accordion-header" id="headingFilterAddress">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFilterAddress" aria-expanded="false" aria-controls="collapseFilterAddress">
                        <f:if condition="{settings.filter}">
                            <f:then>{settings.filter}</f:then>
                            <f:else>Filtrer</f:else>
                        </f:if>
                    </button>
                </h2>
			    <div id="collapseFilterAddress" class="accordion-collapse collapse" aria-labelledby="headingFilterAddress" data-bs-parent="#accordionAddressForm">
                    <div class="accordion-body">
                        <f:form section="accordionAddressForm"  name="tx_ttaddress_listview" method="post" action="list" object="{override}" objectName="override" extensionName="TtAddress" pluginName="ListView" controller="Address">
                            <f:form.textfield type="hidden" property="categories" value="{demand.categories}" id="accordionAddressFormCat" /> 
                            <div class="row">
                                <f:for each="{filters}" as="filter">
                                    <f:if condition="{filter.child}">
                                        <div class="col-md-4">
                                            <select id="select-{filter.uid}" class="form-control" title="{filter.title}">
                                                <option value="" selected>{filter.title}</option>
                                                <f:for each="{filter.child}" as="children">
                                                    <option value="{children.uid}">
                                                        {children.title}
                                                    </option>		
                                                </f:for>
                                            </select>                                    
                                            <ul class="tags"></ul>
                                        </div>
                                    </f:if>
                                </f:for>                        
                            </div>
                                
                            <a href="{f:uri.page(pageUid:'{contentObjectData.pid}', absolute:1)}" class="btn btn-dark">Effacer</a>
    
                            <f:form.button class="btn btn-default" type="submit">Filtrer</f:form.button>
                        </f:form> 
                    </div>
                </div>
			</div>
		</div>
    </f:if>

    <ul class="nav nav-tabs tabMaps" id="tabMaps-{contentObjectData.uid}" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link {f:if(condition: '{settings.showMapFirst} != 1', then: ' active')} list-tab" id="list-tab-{contentObjectData.uid}" data-bs-toggle="tab" data-bs-target="#listView-{contentObjectData.uid}" type="button" role="tab" aria-controls="listView-{contentObjectData.uid}" aria-selected="{f:if(condition: '{settings.showMapFirst} != 1', then: 'true', else:'false')}">Vue liste</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link {f:if(condition: settings.showMapFirst , then: ' active')} map-tab" id="map-tab-{contentObjectData.uid}" data-bs-toggle="tab" data-bs-target="#mapView-{contentObjectData.uid}" type="button" role="tab" aria-controls="mapView-{contentObjectData.uid}" aria-selected="{f:if(condition: settings.showMapFirst , then: 'true', else:'false')}">Vue carte</button>
        </li>
    </ul>
    <div class="tab-content tabMapsContent" id="tabMapsContent-{contentObjectData.uid}">
        <div class="tab-pane fade {f:if(condition: '{settings.showMapFirst} != 1', then: ' show active')} listView" id="listView-{contentObjectData.uid}" role="tabpanel" aria-labelledby="list-tab-{contentObjectData.uid}">

            <ul class="list-group {f:if(condition: '{settings.pages} == {settings.zonesActivites}' , then: ' list-group-card')}">
                <f:for each="{addresses}" as="address" iteration="i">
                    <li id="ttaddress__label-{address.uid}" class="ttaddress__label list-group-item">
                        <f:switch expression="{settings.pages}">
                            <f:case value="{settings.zonesActivites}">
                                <f:render partial="AddressZoneActivites" section="address" arguments="{_all}"/>
                            </f:case>
                            <f:defaultCase>
                                <strong>{address.fullName}</strong><br>
                                <p class="tt_address_date">
                                    Mis à jour le <f:render section="dateFormatRules" arguments="{date: address.tstamp}" /> <f:format.date format="Y">{address.tstamp}</f:format.date>
                                </p>
                                <div>
                                    <div>
                                        <f:format.html>{address.description}</f:format.html>

                                        <f:if condition="{settings.showMap} && {address.latitude} && {address.longitude}">
                                            <f:variable name="icon"></f:variable>
                                            <f:if condition="{address.icon -> f:count()} > 0">
                                                <f:for each="{address.icon}" as="img" iteration="iterator">
                                                    <f:variable name="icon">{f:uri.image(image: '{img}', minWidth: 30, maxWidth: 40)}</f:variable>                            
                                                </f:for>
                                            </f:if>
                                            <div id="map-{address.uid}" class="mapListViewItem" data-lat="{address.latitude}"
                                            data-lng="{address.longitude}" data-icon="{icon}"></div>
                                        </f:if>
                                    </div>
                                    <f:render partial="Address" section="address" arguments="{_all}"/>
                                </div>
                                <f:if condition="{address.detailview}">
                                    <f:then>
                                        <f:link.typolink parameter="{address.detailview}" title="{address.fullName}" class="btn btn-dark">
                                            <f:if condition="{address.detailtext}">
                                                <f:then>
                                                    {address.detailtext}
                                                </f:then>
                                                <f:else>
                                                    <f:switch expression="{settings.pages}">
                                                        <f:case value="{settings.residence}">Voir la résidence</f:case>
                                                        <f:case value="{settings.dechetterie}">Voir la déchetterie</f:case>
                                                        <f:defaultCase>Voir en détail</f:defaultCase>
                                                    </f:switch>
                                                </f:else>
                                            </f:if>
                                        </f:link.typolink>
                                    </f:then>
                                    <f:else>
                                        <f:if condition="{settings.singlePid}">
                                            <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn btn-dark"
                                                pageUid="{settings.singlePid}">
                                                <f:if condition="{address.detailtext}">
                                                    <f:then>
                                                        {address.detailtext}
                                                    </f:then>
                                                    <f:else>
                                                        <f:switch expression="{settings.pages}">
                                                            <f:case value="{settings.residence}">Voir la résidence</f:case>
                                                            <f:case value="{settings.dechetterie}">Voir la déchetterie</f:case>
                                                            <f:defaultCase>Voir en détail</f:defaultCase>
                                                        </f:switch>
                                                    </f:else>
                                                </f:if>
                                            </f:link.action>
                                        </f:if>
                                    </f:else>
                                </f:if>
                            </f:defaultCase>
                        </f:switch>
                    </li>
                </f:for>
            </ul>
        </div>
        <div class="tab-pane fade {f:if(condition: settings.showMapFirst , then: ' show active')} mapView" id="mapView-{contentObjectData.uid}" role="tabpanel" aria-labelledby="map-tab-{contentObjectData.uid}">
            <div class="ttaddress__map" id="ttaddress__map-{contentObjectData.uid}" data-default-lat="{settings.map.defaultPosition.lat}"
                 data-default-lng="{settings.map.defaultPosition.lng}"></div>
            <ul class="ttaddress__map-{contentObjectData.uid}" id="ttaddress__records">
                <f:for each="{addresses}" as="address">

                    <f:if condition="{address.longitude} && {address.latitude}">
                        <f:variable name="icon"></f:variable>
                        <f:if condition="{address.icon -> f:count()} > 0">
                            <f:for each="{address.icon}" as="img" iteration="iterator">
                                <f:variable name="icon">{f:uri.image(image: '{img}', minWidth: 30, maxWidth: 40)}</f:variable>                            
                            </f:for>
                        </f:if>
                        <div id="ttaddress__record-{address.uid}" data-id="{address.uid}" data-lat="{address.latitude}"
                             data-lng="{address.longitude}" {f:if(condition: '{address.polygon}', then: ' data-polygon="{address.polygon}"')} data-icon="{icon}">
                            <h4>{address.fullName}</h4>
                            <ul class="maps">
                                <li>
                                    <svg id="contact-adresse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                        <rect id="ICONS_ALL_contact-adresse_background" data-name="ICONS/ALL/contact-adresse background" width="24" height="24" fill="none"/>
                                        <path id="Combined_Shape" data-name="Combined Shape" d="M6.182,15.555l-.421-.306-.17-.129-.349-.273A23.318,23.318,0,0,1,3.186,13,14.567,14.567,0,0,1,1.05,10.328,7.25,7.25,0,0,1,.066,7.781,5.127,5.127,0,0,1,0,6.971a6.887,6.887,0,0,1,.548-2.7A7.036,7.036,0,0,1,2.034,2.057,6.95,6.95,0,0,1,4.226.553a6.692,6.692,0,0,1,5.329,0,6.952,6.952,0,0,1,2.192,1.5,7.036,7.036,0,0,1,1.486,2.218,6.887,6.887,0,0,1,.548,2.7,5.089,5.089,0,0,1-.066.809,7.243,7.243,0,0,1-.984,2.548A14.567,14.567,0,0,1,10.6,13a23.319,23.319,0,0,1-2.058,1.845l-.184.145-.338.259-.162.121-.268.192a1.211,1.211,0,0,1-.69.215A1.254,1.254,0,0,1,6.182,15.555ZM.8,6.971a4.32,4.32,0,0,0,.056.682,9.438,9.438,0,0,0,2.9,4.788,22.442,22.442,0,0,0,1.983,1.777l.341.267.159.121.405.3a.442.442,0,0,0,.251.079.4.4,0,0,0,.231-.071l.256-.184.153-.113.329-.252.178-.141a22.481,22.481,0,0,0,1.986-1.779,9.438,9.438,0,0,0,2.9-4.788,4.32,4.32,0,0,0,.056-.682A6.214,6.214,0,0,0,6.891.8,6.214,6.214,0,0,0,.8,6.971Zm3.409,0A2.683,2.683,0,1,1,6.891,9.683,2.7,2.7,0,0,1,4.208,6.972Zm.8,0A1.883,1.883,0,1,0,6.891,5.06,1.9,1.9,0,0,0,5.008,6.972Z" transform="translate(4.776 4.109)" fill="#fff"/>
                                    </svg>
                                    <address>
                                        <span itemprop="streetAddress">{address.address}</span>&nbsp;
                                        <f:if condition="{address.cities}">
                                            <f:for each="{address.cities}" as="addressCity">    
                                                <span itemprop="postalCode">{addressCity.zip} </span><span itemprop="addressLocality">{addressCity.title}</span>
                                            </f:for>
                                        </f:if>
                                    </address>
                                </li> 
                                <f:if condition="{settings.pages} == {settings.dechetterie}">
                                    <li class="dechetterie">
                                        <f:format.html>{address.description}</f:format.html>
                                    </li>
                                </f:if>  
                                <f:if condition="{settings.pages} == {settings.residence}"> 
                                    <f:if condition="{address.www}">
                                        <meta itemprop="url" content="{f:uri.typolink(parameter:address.www)}"/>
                                        <li>
                                            <svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><path d="M12,21a9,9,0,1,1,9-9" fill="none" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M20.46462,17.2266l-1.94928.81938a.874.874,0,0,0-.46695.46682l-.82108,1.952a.87465.87465,0,0,1-1.64518-.09276l-1.54539-5.2499a.87413.87413,0,0,1,1.08557-1.08542L20.372,15.5816A.87445.87445,0,0,1,20.46462,17.2266Z" fill="none" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line x1="3.51401" y1="9" x2="20.48707" y2="9" fill="none" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line x1="11" y1="15" x2="3.51404" y2="15" fill="none" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M15.98877,11.5C15.87286,6.76343,14.13416,3,12,3,9.79086,3,8,7.02944,8,12s1.79086,9,4,9" fill="none" stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                            <f:link.typolink parameter="{address.www}" >Voir le site internet</f:link.typolink>
                                        </li>
                                    </f:if>
                                    <f:if condition="{address.phone}">
                                        <li>
                                            <svg id="contact-telephone" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                                <rect id="ICONS_ALL_contact-telephone_background" data-name="ICONS/ALL/contact-telephone background" width="24" height="24" fill="none"/>
                                                <path id="Path" d="M12.3,13.891a12.224,12.224,0,0,1-4.788-.967A12.26,12.26,0,0,1,3.6,10.288,12.262,12.262,0,0,1,0,1.59,1.592,1.592,0,0,1,1.59,0H4.14a.4.4,0,0,1,.333.178l1.87,2.805a.4.4,0,0,1-.05.5L4.815,4.966a.4.4,0,0,0-.1.448A7.318,7.318,0,0,0,6.287,7.591,9.442,9.442,0,0,0,8.467,9.147a.368.368,0,0,0,.17.041.441.441,0,0,0,.311-.136L10.4,7.6a.4.4,0,0,1,.5-.05l2.805,1.87a.4.4,0,0,1,.178.333V12.3A1.592,1.592,0,0,1,12.3,13.891ZM1.59.8a.791.791,0,0,0-.79.79,11.514,11.514,0,0,0,11.5,11.5.791.791,0,0,0,.79-.79V9.965l-2.354-1.57L9.514,9.618a1.236,1.236,0,0,1-.877.37,1.162,1.162,0,0,1-.473-.1L8.1,9.858A10.235,10.235,0,0,1,5.734,8.17,8.121,8.121,0,0,1,3.991,5.757,1.186,1.186,0,0,1,4.249,4.4L5.5,3.154,3.926.8Z" transform="translate(5.418 5.418)" fill="#fff"/>
                                            </svg>      
                                            <a href="tel:{address.cleanedPhone}">
                                                <span itemprop="telephone">{address.phone}</span>
                                            </a>
                                        </li>
                                    </f:if>     
                                    <f:if condition="{address.email}">
                                        <li>
                                            <svg id="contact-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect id="ICONS_ALL_contact-mail_background" data-name="ICONS/ALL/contact-mail background" width="24" height="24" fill="none"></rect><path id="mail" d="M2.356,13.164A2.37,2.37,0,0,1,0,10.786V2.378A2.37,2.37,0,0,1,2.356,0h10.27a2.37,2.37,0,0,1,2.356,2.378v8.407a2.37,2.37,0,0,1-2.356,2.378ZM.8,2.378v8.407a1.569,1.569,0,0,0,1.556,1.578h10.27a1.569,1.569,0,0,0,1.556-1.578V2.378a1.586,1.586,0,0,0-.217-.8L7.758,7.127a.4.4,0,0,1-.5.029l-.036-.029L1.017,1.574A1.586,1.586,0,0,0,.8,2.378ZM7.491,6.292,13.4,1.008A1.529,1.529,0,0,0,12.626.8H2.356a1.53,1.53,0,0,0-.772.208Z" transform="translate(4.691 5.418)" fill="#fff"></path></svg>
                                            <span><f:link.email email="{address.email}" /></span>
                                        </li>
                                    </f:if> 
                                </f:if>   
                                <div>  
                                    <f:if condition="{address.detailview}">
                                        <f:then>
                                            <f:link.typolink parameter="{address.detailview}" title="{address.fullName}" class="btn btn-dark">
                                                <f:if condition="{address.detailtext}">
                                                    <f:then>
                                                        {address.detailtext}
                                                    </f:then>
                                                    <f:else>
                                                        <f:switch expression="{settings.pages}">
                                                            <f:case value="{settings.residence}">Voir la résidence</f:case>
                                                            <f:case value="{settings.dechetterie}">Voir la déchetterie</f:case>
                                                            <f:defaultCase>Voir en détail</f:defaultCase>
                                                        </f:switch>
                                                    </f:else>
                                                </f:if>
                                            </f:link.typolink>
                                        </f:then>
                                        <f:else>
                                            <f:if condition="{settings.singlePid}">
                                                <f:link.action action="show" arguments="{address : address}" title="{address.fullName}" class="btn btn-dark"
                                                    pageUid="{settings.singlePid}">
                                                    <f:if condition="{address.detailtext}">
                                                        <f:then>
                                                            {address.detailtext}
                                                        </f:then>
                                                        <f:else>
                                                            <f:switch expression="{settings.pages}">
                                                                <f:case value="{settings.residence}">Voir la résidence</f:case>
                                                                <f:case value="{settings.dechetterie}">Voir la déchetterie</f:case>
                                                                <f:defaultCase>Voir en détail</f:defaultCase>
                                                            </f:switch>
                                                        </f:else>
                                                    </f:if>
                                                </f:link.action>
                                            </f:if>
                                        </f:else>
                                    </f:if>
                                    <f:if condition="{address.linkmap}">
                                        <f:link.typolink parameter="{address.linkmap}" class="btn btn-light link-external">Je m'y rends</f:link.typolink>
                                        <meta itemprop="url" content="{f:uri.typolink(parameter:address.linkmap)}"/>
                                    </f:if>
                                </div>
                            </ul>
                        </div>
                    </f:if>
                    

                </f:for>
            </ul>
        </div>
    </div>
</f:section>
<f:section name="dateFormatRules">
    <f:format.date format="d">{date}</f:format.date>
    <f:switch expression="{f:format.date(date: date, format: 'm')}">
        <f:case value="01">Janvier</f:case>
        <f:case value="02">Février</f:case>
        <f:case value="03">Mars</f:case>
        <f:case value="04">Avril</f:case>
        <f:case value="05">Mai</f:case>
        <f:case value="06">Juin</f:case>
        <f:case value="07">Juillet</f:case>
        <f:case value="08">Août</f:case>
        <f:case value="09">Septembre</f:case>
        <f:case value="10">Octobre</f:case>
        <f:case value="11">Novembre</f:case>
        <f:case value="12">Décembre</f:case>
    </f:switch>
</f:section>