var calendar_template = `

	<style>
		.fc-today-button{
			display:none !important;
		}

		.month-navigation {
				display: flex;
				justify-content: space-between;
				align-items: center;
		}

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

	</style>

	<div class="container-fluid">

		<p>Hier 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 id="cal_nav" >
				<div class="row p-md-3 p-1" style="background-color: #444444;border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;">

					<div class="col-12 col-md-4">
						<span onclick="calendar.today(); updateCurrentMonth();" style="color:white" ><u>Heute</u></span>
					</div>

					<div class="col-12 col-md-4 d-flex justify-content-md-center align-items-center" style="color:white;">
						<span onclick="calendar.prev(); updateCurrentMonth();"  >< &nbsp;</span>
						<span id="current-month" style="color:white">Aktueller Monat</span>
						<span onclick="calendar.next(); updateCurrentMonth();"  >&nbsp; ></span>
					</div>

					<div class="col-12 col-md-4 d-flex justify-content-md-end align-items-center" style="color:white;">
						<span id="span_show_events_calendar" onclick="show_events_calendar();" >Kalender</span>
						<span>&nbsp;</span>
						<span id="span_show_events_list" onclick="show_events_list();" >Liste</span>
					</div>
				</div>
		</div>


		<div class="row mt-2" >


			{{@if(it.event_array !== "")}}
				<div id="table_wrapper" style="overflow-x: auto;">

					<table id="event_list" class="table" style="min-width:400px;display:none;">
						<thead>
						 <tr>
							 <th scope="col">Name</th>
							 <th scope="col">Beschreibung</th>
							 <th scope="col">Datum</th>
							 <th scope="col">Projekt</th>
						 </tr>
					 </thead>
					 <tbody>

						 {{@each(it.event_array) => val, index}}
							 <tr>
								 <td>{{val.Name}}</td>
								 <td>{{val.Desc}}</td>
								 <td>{{formated_date_calendar(val.Date)}}</td>
								 <td><a href="#show_project:{{val.Project}}">{{val.Project}}</a></td>
							 </tr>
						 {{/each}}

						</tbody>
					</table>
				</div>
			{{/if}}


			<div id='calendar' style="height:60vh;" ></div>

    </div>
  </div>

	<script>

		function show_events_list(){
			$('#span_show_events_calendar').css('text-decoration', 'none');
			$('#span_show_events_list').css('text-decoration', 'underline');
			$("#event_list").show();
			$("#calendar").hide();
			$("#show_list_a").hide();
			$("#show_cal_a").show();

			$("#cal_nav_today").css('visibility', 'hidden');
			$("#cal_nav_cal").css('visibility', 'hidden');
		}

		function show_events_calendar(){
			$('#span_show_events_calendar').css('text-decoration', 'underline');
			$('#span_show_events_list').css('text-decoration', 'none');
			$("#calendar").show();
			$("#event_list").hide();
			$("#show_list_a").show();
			$("#show_cal_a").hide();
			$("#cal_nav").show();

			$("#cal_nav_today").css('visibility', 'visible');
			$("#cal_nav_cal").css('visibility', 'visible');
		}

	  function updateCurrentMonth() {
			var monthNames = [
				'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
				'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
			];
	    const currentDate = calendar.getDate();
	    const currentMonthName = monthNames[currentDate.getMonth()];
	    const currentYear = currentDate.getFullYear();
	    document.getElementById('current-month').innerText = currentMonthName + ' ' + currentYear;
	  }

		calendar = null;
		var calendar = new tui.Calendar('#calendar', {
			defaultView: 'month',
			usageStatistics: false,
			month: {
				dayNames: ['So', 'Mon', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
				startDayOfWeek: 1,
			},
			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}}

		updateCurrentMonth();
		show_events_calendar();
</script>

`;