{namespace events=GeorgRinger\Eventnews\ViewHelpers}
{namespace n=GeorgRinger\News\ViewHelpers}
{namespace vhwseils=Wseils\Wseils\ViewHelpers}
<f:layout name="General" />

<f:section name="content">
	<div class="news-search-form">
		<div class="accordion" id="accordionNewsForm">
			<div class="accordion-item">
			  <h2 class="accordion-header" id="headingOne">
				<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
				  Rechercher un événement
				</button>
			  </h2>
			  <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionNewsForm">
				<div class="accordion-body">
					<f:form noCache="true" method="post" action="fullSearch" object="{search}" name="search" arguments="{overwriteDemand:overwriteDemand}">
						<fieldset>
							<input type="hidden" name="id" value="{currentPageId}" />

							<div class="form-group">
								<f:form.textfield id="news-subject" property="subject" class="form-control" placeholder="Mot-clés" title="Mot clés"/>
							</div>

							<div class="row">
								<vhwseils:CatList pid="{settings.PidTypeEvent}"/>

								<f:if condition="{settings.enableCommunes}">
									<f:then>
										<f:if condition="{categories}">
											<f:then>
												<div class="col-md-6">
													<div class="form-group">
														<f:for each="{categories}" as="category">
															<f:if condition="{category.children}">
																<select id="select-{category.uid}" class="form-control" title="Quoi ?">
																	<option value="" selected>{category.title}</option>
																	<f:for each="{category.children}" as="children">
																		{n:category.count(categoryUid:children.uid) -> f:variable(name: 'categoryUsageCount')}
																		<f:if condition="{categoryUsageCount}">
																			<option value="{children.uid}">
																				{children.title}
																			</option>				
																		</f:if>					
																	</f:for>
																</select>
																<ul class="tags"></ul>
																<div class="listCheckbox hide" id="listCheckbox-{category.uid}">
																	<f:for each="{category.children}" as="children">
																		{n:category.count(categoryUid:children.uid) -> f:variable(name: 'categoryUsageCount')}
																		<f:if condition="{categoryUsageCount}">  
																			<f:form.checkbox property="categories.{children.uid}" value="{children.uid}" title="{children.title}" />
																		</f:if>	
																	</f:for>
																</div>
															</f:if>
														</f:for>
													</div>			
												</div>							
											</f:then>
										</f:if>
										<div class="col-md-6">
											<div class="form-group">
												<f:form.textfield id="news-date" class="form-control" title="Quand ?" additionalAttributes="{placeholder:'Quand ?'}"/>
												
												<f:form.textfield type="date" class="form-control hide" id="fromDate" property="searchDateFrom"/>
												<f:form.textfield type="date" class="form-control hide" id="toDate" property="searchDateTo"/>
											</div>
										</div>
									</f:then>
									<f:else>
										<f:if condition="{categories}">
											<f:then>
												<div class="col-md-4">
													<div class="form-group">
														<f:for each="{categories}" as="category">
															<f:if condition="{category.children}">
																<select id="select-{category.uid}" class="form-control" title="Quoi ?">
																	<option value="" selected>{category.title}</option>
																	<f:for each="{category.children}" as="children">
																		{n:category.count(categoryUid:children.uid) -> f:variable(name: 'categoryUsageCount')}
																		<f:if condition="{categoryUsageCount}">
																			<option value="{children.uid}">
																				{children.title}
																			</option>				
																		</f:if>					
																	</f:for>
																</select>
																<ul class="tags"></ul>
																<div class="listCheckbox hide" id="listCheckbox-{category.uid}">
																	<f:for each="{category.children}" as="children">
																		{n:category.count(categoryUid:children.uid) -> f:variable(name: 'categoryUsageCount')}
																		<f:if condition="{categoryUsageCount}">  
																			<f:form.checkbox property="categories.{children.uid}" value="{children.uid}" title="{children.title}" />
																		</f:if>	
																	</f:for>
																</div>
															</f:if>
														</f:for>
													</div>			
												</div>							
											</f:then>
										</f:if>
										<div class="col-md-4">
											<div class="form-group">
												<f:form.textfield id="news-date" class="form-control" title="Quand ?" additionalAttributes="{placeholder:'Quand ?'}"/>
												
												<f:form.textfield type="date" class="form-control hide" id="fromDate" property="searchDateFrom"/>
												<f:form.textfield type="date" class="form-control hide" id="toDate" property="searchDateTo"/>
											</div>
										</div>

										<f:if condition="{allCities}">
											<f:then>
												<div class="col-md-4">
													<div class="form-group">
														<select id="select-0" class="form-control" title="Où ?">
															<option value="" selected>Où ?</option>
															<f:for each="{allCities}" as="location">
																<f:if condition="{location.uid} == {search.location}">
																	<f:then>
																		<option value="{location.uid}" selected>
																			{location.title}
																		</option>
																	</f:then>
																	<f:else>
																		<option value="{location.uid}">
																			{location.title}
																		</option>
																	</f:else>
																</f:if>	
															</f:for>
														</select>
														<ul class="tags"></ul>
														<div class="listCheckbox hide" id="listCheckbox-0">
															<f:for each="{allCities}" as="location">
																<f:form.checkbox property="locations.{location.uid}" value="{location.uid}" title="{location.title}" />			
															</f:for>
														</div>
													</div>			
												</div>									
											</f:then>
										</f:if>
									</f:else>
								</f:if>
							</div>
							<div class="filterbtn row">
								<div class="col-md-6">
									<f:form.textfield type="text" id="loc-lat" property="latitude" class="hide" title="Latitude"/>
									<f:form.textfield type="text" id="loc-lng" property="longitude" class="hide" title="Longitude"/>


									<label class="inputSwitch">
										<input id="id-switch-loc" type="checkbox" role="switch" aria-label="Autour de moi" {f:if(condition: search.longitude, then: 'checked')}
										>
										<span class="switch">
											<span></span>
										</span>
										<span class="label">Autour de moi</span>
									</label>
									<f:if condition="{settings.filter.catFree}">
										<label class="inputSwitch">
											<f:form.checkbox id="id-switch-free" property="categories.{settings.filter.catFree}" value="{settings.filter.catFree}" title="Gratuit" aria-label="Gratuit" />
											<span class="switch">
												<span></span>
											</span>
											<span class="label">Gratuit</span>
										</label>
									</f:if>
								</div>
								<div class="col-md-6">
									<f:if condition="{settings.filter.catChild}">
										<label class="inputSwitch">
											<f:form.checkbox id="id-switch-children" property="categories.{settings.filter.catChild}" value="{settings.filter.catChild}" title="Avec les enfants (jusqu'à 12ans)" aria-label="Avec les enfants (jusqu'à 12ans)" />
											<span class="switch">
												<span></span>
											</span>
											<span class="label">Avec les enfants (jusqu'à 12ans)</span>
										</label>
									</f:if>
									<f:if condition="{settings.filter.catAdo}">
										<label class="inputSwitch">
											<f:form.checkbox id="id-switch-ado" property="categories.{settings.filter.catAdo}" value="{settings.filter.catAdo}" title="Avec les adolescents" aria-label="Avec les adolescents" />
											<span class="switch">
												<span></span>
											</span>
											<span class="label">Avec les adolescents</span>
										</label>
									</f:if>
								</div>
							</div>

							<f:link.page pageUid="{currentPageId}" additionalParams="{no_cache:'1'}" class="btn btn-dark">Effacer</f:link.page>

							<f:form.submit value="Filtrer" class="btn btn-default"/>
						</fieldset>
					</f:form>
				</div>
			  </div>
			</div>
		</div>
	</div>
	<div class="listTagActif">
		<ul>
			<f:if condition="{search.subject}">
				<li>{search.subject}</li>
			</f:if>
			<f:if condition="{actCat}">
				<f:for each="{actCat}" as="cat">
					<li>{cat}</li>
				</f:for>                
			</f:if>
			<f:if condition="{search.searchDateFrom} && {search.searchDateTo}">
				<f:if condition="{search.searchDateFrom} == {search.searchDateTo}">
					<f:then>
						<li>Le <f:format.date pattern="dd MMMM yyyy" locale="fr-FR">{search.searchDateFrom}</f:format.date></li>
					</f:then>
					<f:else>
						<li>Du <f:format.date pattern="dd MMMM yyyy" locale="fr-FR">{search.searchDateFrom}</f:format.date> au <f:format.date pattern="dd MMMM yyyy" locale="fr-FR">{search.searchDateTo}</f:format.date></li>
					</f:else>
				</f:if>
			</f:if>
			<f:if condition="{actLoc}">
				<f:for each="{actLoc}" as="loc">
					<li>{loc}</li>
				</f:for>                
			</f:if>
			<f:if condition="{search.latitude}">
				<li>Autour de moi</li>
			</f:if>
		</ul>
	</div>
	<div class="news-search-result">
		<f:if condition="{news}">
			<f:then>
				<f:if condition="{search}">
					<div class="count-msg">
						{f:count(subject:news)} résultat(s)
					</div>
				</f:if>
				<ul class="nav nav-tabs" id="tabNews" role="tablist">
					<li class="nav-item" role="presentation">
					  <button class="nav-link active" id="list-tab" data-bs-toggle="tab" data-bs-target="#listView" type="button" role="tab" aria-controls="listView" aria-selected="true">Vue liste</button>
					</li>
					<li class="nav-item" role="presentation">
					  <button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#mapView" type="button" role="tab" aria-controls="mapView" aria-selected="false">Vue carte</button>
					</li>
				</ul>
				<div class="tab-content" id="tabNewsContent">
					<div class="tab-pane fade show active" id="listView" role="tabpanel" aria-labelledby="list-tab">
						<f:if condition="{settings.hidePagination}">
                            <f:then>
                                <f:for each="{news}" as="newsItem" iteration="iterator">
                                    <f:render partial="List/ItemAgenda" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
                                </f:for>
                        	</f:then>
                            <f:else>
                                <f:if condition="{settings.list.paginate.insertAbove}">
                                    <f:render partial="List/Pagination" arguments="{pagination: pagination.pagination, paginator: pagination.paginator}" />
                                </f:if>
                                <div id="newsList" role="list">
                                    <f:for each="{pagination.paginator.paginatedItems}" as="newsItem" iteration="iterator">
										<f:render partial="List/ItemAgenda" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
                                    </f:for>
                                </div>
								<f:if condition="{settings.list.paginate.insertBelow}">
									<f:render partial="List/Pagination" arguments="{pagination: pagination.pagination, paginator: pagination.paginator}" />
								</f:if>
							</f:else>
						</f:if>
					</div>
					<div class="tab-pane fade" id="mapView" role="tabpanel" aria-labelledby="map-tab">
						<f:asset.css identifier="leafletCSS" href="EXT:wseils/Resources/Public/Libs/leaflet/dist/leaflet.css" />
						<f:asset.script identifier="leafletJS" src="EXT:wseils/Resources/Public/Libs/leaflet/dist/leaflet.js" />
						<f:asset.script identifier="leafletmarkerclusterJS" src="EXT:wseils/Resources/Public/Libs/Leaflet.markercluster/dist/leaflet.markercluster.js" />
	
						<div id="eventMap"></div>
						<div id="ttaddress__records" role="list">
							<f:for each="{news}" as="newsItem" iteration="iterator">
								<f:if condition="{newsItem.address}">
									<f:render partial="List/ItemAgenda" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
								</f:if>
							</f:for>
						</div>
					</div>
				</div>
			</f:then>
			<f:else>
				<div class="no-news-found">
					<f:translate key="search-noresult" />
				</div>
			</f:else>
		</f:if>							
	</div>
</f:section>