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;
}
</style>

<div class="container-fluid">

		<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>

			          </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">Details</a>
									<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 load_map(){

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

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

			const 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);

				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>{{val[1]}}</strong><br/><p>{{val[2]}}</p>", {maxWidth: 500});
							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);

</script>

`;