var home_template = `

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

.toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator{
	background-color:var(--orange_1) !important;
}

#table_wrapper{
	display: block;         /* Damit max-height funktioniert */
	max-height: 400px;
}


.highlight_marker {
		background-color: transparent;
		border: 3px solid #f0962c;
}


</style>

<div class="container-fluid">

		<div class="row">
			<div class="col-12">
				<p>
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>
				Information: Das Archiv wird jetzt in der Projektübersicht dargestellt.
				</p>
			</div>
		</div>

		<div class="row">

			<div class="col-md-12 order-first order-md-last">

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

				<h4><b>Ihre laufenden Projekte</b></h4>
				<p>Hier eine Auflistung Ihrer derzeit offenen Projekte. <!--Abgeschlossene Projekte werden hier nicht angezeigt. Diese finden Sie im <a href="#archivs">Archiv</a>.</p>-->
				<div class="row">
					<div class="col-12 col-lg-6" id="list_row">
						<div id="table_wrapper" style="overflow-x: auto;">
			        <table class="table" style="min-width:400px;">
			          <tr>
			            <th scope="col" >Nummer</th>
			            <th scope="col" >Name</th>
			            <th scope="col" >Ort</th>
									<th scope="col" ></th>
									<th scope="col" ></th>
			          </tr>

			          {{@each(it.project_array) => val, index}}

			          <tr>

			            <td><b>{{val[0]}}</b></td>
			            <td>{{val[1]}}</td>
									<td>{{@if(val[2] === "")}}-{{#else}}{{val[2]}}{{/if}}</td>
									<td><a href="#show_project:{{val[0]}}" class="text-dark">Öffnen</a>

									{{ @if (val[4] != "") }}
										<td><a onclick="highlight_marker({{val[0]}});" class="text-dark">Auf Karte</a>
									{{ #else }}
										<td></td>
									{{/if}}

									<br>

			          </tr>

			          {{/each}}

			        </table>
						</div>
					</div>

					<div class="col-12 col-lg-6" id="map_row">

						<div id="map">

						</div>

					</div>
				</div>
				{{/if}}

			</div>

		</div>




		<div class="row mb-5 mt-3">
			<h4><b>Ihre Terminübersicht</b></h4>
			<p>Im Folgenden sehen Sie eine Übersicht der Termine, die für Ihre Projekte relevant sind. Diese Termine wurden von unseren Projektkoordinatoren für sie eingestellt.</p>

			<div class="col-12">
				<p id="current_date_p" class="text-center" style="background:var(--orange_1);"></p>
				<div id="main_calendar" style="height:400px;">

				</div>
			</div>
		</div>

		<div class="row">
			<div class="mt-2" id="advertising">

					 <div class="row m-1 m-sm-4 pt-5">

						<div class="col">

							<h4>Was fehlt Ihrem Kunden beim Thema Brandschutz?</h4>

							<p>Entdecken Sie die Bedürfnisse Ihrer Kunden im Bereich Brandschutz! Nutzen Sie unser innovatives <a href="https://audit.concepture-brandschutz.de/" target="_blank">Brandschutz-Audit-Tool</a>, um den Reifegrad des Brandschutzes zu überprüfen. Gemeinsam mit Ihrem Kunden decken Sie Lücken auf und helfen ihm dabei, diese zu schließen oder den richtigen Ansprechpartner zu empfehlen.</p>

							<br>
							<br>
						</div>

						<div class="col">
							<img alt="Add3" id="cut_img" style="padding-bottom: 10%;" src="img/bsaudit.jpeg">
						</div>

						</div>

				</div>

				<br>
				<br>
		</div>

</div>


<script>

function highlight_marker( in_id ){

	$(".marker_"+in_id).addClass("highlight_marker");
	$(".marker_"+in_id).trigger("click");

	setTimeout(function(){ $(".marker_"+in_id).removeClass("highlight_marker"); }, 1500);

	var lat = $(".marker_"+in_id).data("lat");
	var lng = $(".marker_"+in_id).data("lng");

	window.map.setView([lat, lng], 15);
}

function load_map(){

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

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

			window.map = L.map('map', {
						fullscreenControl: true,
						attributionControl: false
					}).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);

				let bounds = new L.LatLngBounds();
				var marker_counter = 0;

				{{@each(it.project_array) => val, index}}
				    var lat = "{{val[3]}}";
				    var lng = "{{val[4]}}";

						if( lat != 0){
					    var latlng = new L.LatLng(lat, lng);
					    bounds.extend(latlng);
					    var marker = new L.Marker([lat, lng]);
					    marker.addTo(map);
							marker.bindPopup("<strong><a href='#show_project:{{val[0]}}'>{{val[1]}} - {{val[0]}}</a></strong>", { maxWidth: 500 });

							marker._icon.classList.add('marker_{{val[0]}}');

							$(marker._icon).data("lat", "{{val[3]}}");
							$(marker._icon).data("lng", "{{val[4]}}");

							marker_counter = marker_counter + 1;
						}
				{{/each}}

				if( marker_counter > 0){
					map.fitBounds(bounds);
				}else{
					$("#map_row").hide();
					$("#list_row").attr("class","col-12");
				}
	    }
	    else{
	        setTimeout(load_map,100);
	    }
	}


load_map();


	calendar = null;
	var calendar = new tui.Calendar('#main_calendar', {
		defaultView: 'month',
		usageStatistics: false,
		month: {
			dayNames: ['So', 'Mon', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
			startDayOfWeek: 1,
			narrowWeekend: true,
		},
		useFormPopup: true,
		isReadOnly: true,
		enableClick: true,
		enableDblClick: true,
		gridSelection: true,
	});

	calendar.on('clickEvent', function(event) {
		var event_title = event.event.location;
		var event_body = event.event.body;
		var event_location = event.event.title;

		event_location = event_location.replace("Projekt:", "");
		event_location = event_location.replace(" ", "");
		event_location = event_location.substring(0,event_location.indexOf("-"));
		event_location = event_location.trim();

		alert_calendar(event_title,event_body,event_location);
	});


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

		{{@each(it.event_array) => val, index}}
				calendar.createEvents([
					{
						calendarId: '1',
						title: 'Projekt: {{val.Project}} - {{val.Name}}',
						location: '{{val.Name}}',
						body:"{{val.Desc}}",
						dueDateClass: '',
						start: '{{val.Date}}',
						end: '{{val.Date}}',
						isAllDay: "true",
						category: 'allday',
						goingDuration:"10000",
						backgroundColor:"#f3ac04",
					}
				]);

			{{/each}}
	{{/if}}

	var cd = new Date();
	var date_display = cd.toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });

	$("#current_date_p").text(date_display);



	//Clear Project search
	window.localStorage.setItem("project_search", "");

</script>

`;