{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}
{namespace vendeeenfance=Wseils\Vendeeenfance\ViewHelpers}

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

	<link rel="stylesheet" href="{f:uri.resource(path:'Contrib/leaflet-core-1.4.0.css')}"/>
	<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/leaflet-core-1.4.0.js')}"></script>
	<script
		type="text/javascript"
		src="{f:uri.resource(path:'EXT:vendee_enfance/Resources/Public/Js/libs/Leaflet.markercluster/dist/leaflet.markercluster.js')}"></script>
</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)}" alt=""/>
		</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:variable name="filterCity"><f:cObject typoscriptObjectPath="lib.content.searchMapCity"/></f:variable>
	<f:variable name="filterMapCount"><f:format.number decimals="0">{f:cObject(typoscriptObjectPath:"lib.filterMapCount", data:"{demand.categories}")}</f:format.number></f:variable>
	<f:variable name="filterAtypicalHours"><f:cObject typoscriptObjectPath="lib.content.searchMapAtypicalHours"/></f:variable>

	<f:variable name="countFilter">0</f:variable>
	<f:if condition="{filterCity}"> {f:variable(name: 'countFilter', value: '{countFilter + 1}')}</f:if>
	<f:if condition="{filterAtypicalHours}"> {f:variable(name: 'countFilter', value: '{countFilter + 1}')}</f:if>

	<div class="btnMap">
		<div class="btnFilter">
			<button
				id="map-filter-btn"
				type="button"
				data-bs-toggle="modal"
				data-bs-target="#modal-mapFilter"
				aria-label="Filtrer les points d'intérêtes"
				class="btn btn-white">
				<svg
					id="filtres"
					xmlns="http://www.w3.org/2000/svg"
					width="24"
					height="18"
					viewBox="0 0 24 18">
					<path
						id="ico-filtre"
						d="M6.462,10.22a.966.966,0,0,1,.978-.852l7.163,0a.994.994,0,0,1,1.09.856.967.967,0,0,1-.978.852l-7.164,0A.994.994,0,0,1,6.462,10.22ZM2.769,5.539a.967.967,0,0,1,.979-.852l14.548,0a.994.994,0,0,1,1.089.857.966.966,0,0,1-.978.852l-14.548,0A1,1,0,0,1,2.769,5.539ZM0,.857A.966.966,0,0,1,.978,0L21.064,0a1,1,0,0,1,1.09.857.966.966,0,0,1-.979.852l-20.086,0A.994.994,0,0,1,0,.857Z"
						transform="translate(0.923 3.462)"
						fill="#3e3e3e"></path>
				</svg>
				<f:if condition="{countFilter}">
					<span>{countFilter}</span>
				</f:if>
				Filtrer les points d'intérêts
			</button>
		</div>
		<div class="toggleView">
			<button
				id="showMap"
				type="button"
				aria-label="Afficher la vue carte"
				class="btn btn-white"
				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)"/>
				</svg>
				Affichage carte
			</button>
			<button id="showList" type="button" aria-label="Afficher la vue liste" class="btn btn-white">
				<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)"/>
				</svg>
				Affichage liste
			</button>
		</div>
		<f:if condition="{filterCity} || {filterAtypicalHours}">
			<div class="listTag">
				<f:if condition="{filterCity}">
					<span class="facet-use">{filterCity}</span>
				</f:if>
				<f:if condition="{filterAtypicalHours}">
					<span class="facet-use">Horaires atypiques</span>
				</f:if>
			</div>
		</f:if>
	</div>
	<div
		class="modal fade"
		role="dialog"
		id="modal-mapFilter"
		aria-labelledby="modal-mapFilter-title"
		aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div id="tx-solr-search-functions">
					<div class="header">
						<button
							id="close-modal-mapFilter"
							title="Fermer les filtres"
							type="button"
							data-bs-toggle="modal"
							data-bs-target="#modal-mapFilter"
							aria-label="Fermer les filtres">
							<span></span>
							<span></span>
						</button>
						<p id="modal-newsFilter-title">Filtrer les points d'intérêts</p>
						<f:link.page class="solr-ajaxified">Effacer</f:link.page>
					</div>
					<div id="tx-solr-faceting">
						<div class="checkboxArea">
							<f:if condition="{settings.cities}">
								<div class="accordion">
									<div class="accordion-item">
										<h4 class="accordion-header">
											<button
												class="accordion-button collapsed"
												type="button"
												data-toggle="collapse"
												data-target="#facetcitiesmap"
												data-parent="#accordion-citiesmap-item"
												data-bs-toggle="collapse"
												data-bs-target="#facetcitiesmap"
												aria-expanded="false"
												aria-controls="facetcitiesmap">
												Par commune
											</button>
										</h4>
									</div>
									<div
										id="facetcitiesmap"
										class="accordion-collapse collapse"
										data-parent="facetcitiesmap">
										<div class="accordion-body">
											<div class="accordion-content facetSelectAccordion">
												<select
													name="citiesmap"
													aria-label="Selectionner une commune"
													class="selectFacet">
													<option value="">Saisir un nom de commune</option>
													<f:cObject
														typoscriptObjectPath="lib.filterMapCities"
														data="{filterCity}"/>
												</select>
												<span class="selectFacetArrow"></span>
											</div>
										</div>
									</div>
								</div>
							</f:if>
							<f:if condition="{settings.atypicalHours}">
								<div class="accordion">
									<div class="accordion-item">
										<h4 class="accordion-header">
											<button class="accordion-button collapsed" type="button"
											        data-toggle="collapse" data-target="#facetavailabilitiesmmap"
											        data-parent="#accordion-availabilitiesmmap-item"
											        data-bs-toggle="collapse" data-bs-target="#facetavailabilitiesmmap"
											        aria-expanded="false" aria-controls="facetavailabilitiesmmap">
												Par disponibilités
											</button>
										</h4>
									</div>
									<div id="facetavailabilitiesmmap" class="accordion-collapse collapse"
									     data-parent="#facetavailabilitiesmmap">
										<div class="accordion-body">
											<div class="accordion-content">
												<ul role="list">
													<li>
														<input type="checkbox" id="input-atypical-hours"
														       name="atypical-hours">
														<label for="input-atypical-hours">Horaires atypiques</label>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</f:if>
						</div>

						<div id="btn-search-map-facet">
							<button
								title="Afficher les résultats"
								type="button"
								class="btn btn-white btn-big">
								Afficher les résultats
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="ttaddress__map" data-default-lat="{settings.map.defaultPosition.lat}"
	     data-default-lng="{settings.map.defaultPosition.lng}" style="width:100%;min-height:500px;">
		<f:cObject typoscriptObjectPath="lib.legendMap"/>
	</div>

	<f:variable name="sortedAddresses" value="{vendeeenfance:sortByName(arrayToBeSorted: addresses)}"/>

	<div>
		<ul id="ttaddress__records" style="display: none">
			<f:if condition="{filterCity} || {filterAtypicalHours}">
				<f:then>
					<f:for each="{sortedAddresses}" as="address">
						<f:if condition="
							({filterCity} && {address.city} == {filterCity} && !{filterAtypicalHours}) ||
							(!{filterCity} && {address.childrenatypicalhours} == 1 && {filterAtypicalHours}) ||
							({filterCity} && {address.city} == {filterCity} && {address.childrenatypicalhours} == 1 && {filterAtypicalHours})
						">
							<f:render section="itemMap" arguments="{_all}"/>
						</f:if>
					</f:for>
				</f:then>
				<f:else>
					<f:for each="{sortedAddresses}" as="address">
						<f:render section="itemMap" arguments="{_all}"/>
					</f:for>
				</f:else>
			</f:if>
		</ul>
	</div>
</f:section>

<f:section name="itemMap">
	<li
		id="ttaddress__record-{address.uid}"
		data-id="{address.uid}"
		data-lat="{address.latitude}"
		data-lng="{address.longitude}"
		data-icon="icon"
		data-availability="{address.available}">
		<div class="infos">
			<h3 class="title">{address.name}</h3>
			<f:if condition="{address.description}">
				<div class="description">
					<f:format.html>{address.description}</f:format.html>
				</div>
			</f:if>
			<f:render partial="Address" section="addressMap" arguments="{_all}"/>
			<f:if condition="{settings.singlePid}">
				<div class="d-flex justify-content-center py-2">
					<f:link.action
						class="btn btn-default"
						action="show"
						arguments="{address : address}"
						title="{address.fullName}"
						pageUid="{settings.singlePid}">
						Voir la fiche
					</f:link.action>
				</div>
			</f:if>
		</div>
	</li>
</f:section>