var archivs_template = `

<style>
#map { height: 400px; }

</style>

	<div class="container-fluid">

		{{@if(it.archivs_array != "")}}
			<p class="mb-4">Hier finden Sie Ihre archivierten Projekte.</p>
		{{#else}}
			<p class="mb-4">Hier finden Sie Ihre archivierten Projekte - jedoch sind noch keine Projekte archiviert!</p>
		{{/if}}

		<div class="row">

			<div class="col-12 col-lg-8 order-1 order-lg-0">

				<div class="row">

					<div id="no_archivs" class="col-12 col-lg-8 mt-2 mb-4" style="display:none">
						<b>Keine archivierten Projekten!</b>
					</div>

				{{@if(it.archivs_array != "")}}

					{{@each(it.archivs_array) => val, index}}
						<div class="col-12 col-lg-6 col-xl-6 col-xxl-4 p-1 cardwrapper">
							<div class="card" style="height:100%">

								<div style="width:100%;max-height:25rem;">
									<img class="card-img-top" src="/get_thumbnail?id={{val[0]}}" alt="Lade..." style="width:fit-content;max-width:100%;max-height:100%;padding: 8%;">
								</div>

								<div class="card-body d-flex flex-column">

									<div class="mt-auto">
										<h4 class="card-title"><b>{{val[1]}}{{ @if(val[3] !== "") }}, {{val[3]}}{{ /if}}</b></h4>

										<p class="card-text lat" style="display:none">{{val[4]}}</p>
										<p class="card-text long" style="display:none">{{val[5]}}</p>
										<p class="card-text full_adresss" style="display:none">{{val[6]}}</p>

										<p class="nr">{{val[0]}}</p>

										<div class="text-center mt-auto">
											<a href="#show_archiv:{{val[0]}}" class="btn btn-primary">Auswählen</a>
										</div>

									</div>
								</div>
							</div>
						</div>
					{{/each}}

				{{/if}}

				</div>

			</div>

			<div class="col-12 col-lg-4 order-0 order-lg-1">

				{{@if(it.archivs_array != "")}}

				<div id="filter_div">

					<div class="row">
						<div class="col-12">
							<label for="search_text" class="form-label">Suche</label>
							<input type="text" id="search_text" class="form-control" aria-describedby="search_text" oninput="do_search()">
						</div>
					</div>

					<div id="map" class="mt-2">
					</div>

				</div>
				{{/if}}

			</div>

		</div>
	</div>



<script>
var markers = null;
var map = null;


function do_search(){

	var search_val = $("#search_text").val().toLowerCase();

	$('.cardwrapper').each(function() {
					var titel = $(this).find('.card-title').text().trim().toLowerCase();
					var nr = $(this).find('.nr').text().trim().toLowerCase();

					var full_address = $(this).find('.full_adresss').text().trim().toLowerCase();

					if( titel.includes(search_val) || nr.includes(search_val) || full_address.includes(search_val) ){
						$(this).show();
					}else{
						$(this).hide();
					}
	});

	update_map();
}


function update_map(){
    if( markers != null ){
        markers.clearLayers();
    }

		var marker_counter = 0;
		var archivs_counter = 0;

		var bounds = new L.LatLngBounds();
    markers = L.layerGroup();
    $('.card').each(function() {
				if($(this).is(":visible")) {
	        var lat = $(this).find('.lat').text().trim();
	        var long = $(this).find('.long').text().trim();
	        var project_title = $(this).find('.card-title').text().trim();

	        if( lat !="" && long != "" && lat !="undefined" && long != "undefined"  && lat != 0 && long != 0 ){
							var latlng = new L.LatLng(lat, long);
							bounds.extend(latlng);

							var marker = new L.Marker([lat, long]);
							marker.bindPopup("<strong>" + project_title + "</strong>", {maxWidth: 500});
							markers.addLayer(marker);
							marker_counter++;
	        }
					archivs_counter = archivs_counter + 1;
			}
    });

		if( archivs_counter == 0 ){
			$("#no_archivs").show();
			$("#map").hide();
		}

		if( archivs_counter != 0 ){
			$("#no_archivs").hide();
		}

		if( marker_counter != 0){
			$("#map").show();
			if( map != 0){
				markers.addTo(map);
				map.fitBounds(bounds);
			}
		}

		if( marker_counter == 0){
			$("#map").hide();
		}

}

function load_map(){

		if( $( "#map" ).length == 0) {
			return;
		}

		if(typeof L  !== "undefined"){

		map = L.map('map').setView([0,0], 5);

		L.Marker.prototype.options.icon = L.icon({iconUrl: "/img/marker.png",});

		const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 19,
				attribution: ''
			}).addTo(map);
			update_map();
		}
		else{
				setTimeout(load_map,100);
		}
}


load_map();

</script>
`;