var project_template = `

<script src="js/external/filerobot-image-editor.min.js"></script>
<script src="js/img_editor.js"></script>
<script src="js/pdf_viewer.js"></script>

<style>
	.folder_div{
		Display:none;
	}
	#map { height: 400px; }

	.move_pdf{
		margin-right: auto;
	}

	.blur {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80px;
			background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	}

	.content {
		max-height: 250px;
		overflow: hidden;
		position: relative;
}

	#orders_table tbody > tr:last-child > td {
	  border-bottom: 0;
	}

	#bills_table tbody > tr:last-child > td {
	  border-bottom: 0;
	}


	.msg_box{
		background-color: #dce0e3;
		padding: 1rem;
		margin-top: 1rem;
		border-radius: 10px;
		color: #000000a8;
	}

	.msg{
		font-size: 1.1rem;
		font-weight: bold;
		margin: 0 !important;
		word-break: break-all;
	}

	.msg_user_time{
		font-style: italic;
		font-size: 0.9rem;
		margin: 0 !important;
	}

	.input_comment{
		width: 100%;
		border-radius: 0.4rem;
	}

	.f1{
		width:10rem;
	}
	.f2{
		width:10rem;
	}
	.f3{
		width:10rem;
	}
	.f4{
		width:20rem;
	}
	.f5{
		width:10rem;
	}
	.f6{
		width:5rem;
		text-align:right;
	}

	.filled{
		background: var(--orange_2) !important;
		color: #fff;
	}

	.folder_element_date{
		display:none;
	}

	.edit_img_modal_btn{
		display:none;
	}

</style>


<!-- Bootstrap Modal to select a uploadfoler -->
	<div class="modal fade" id="select_folderModal" tabindex="-1" aria-labelledby="folderModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="folderModalLabel">Ordner zum hinzufügen auswählen:</h5>
	        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	      </div>
	      <div class="modal-body">
	        <ul id="folderList" class="list-group"></ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button" id="selectFolderBtn" class="btn btn-primary" disabled>Auswählen</button>
	        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
	      </div>
	    </div>
	  </div>
	</div>

	<div class="container-fluid">

				<div class="row">
					<div class="col-12 col-md-6">
						<div class="mt-3 mb-2">

							{{ @if(it.place !== "") }}
								<h2><b style="word-break: break-word;">{{it.name}}, {{it.place}}</b></h2>
							{{#else}}
								<h2><b style="word-break: break-word;">{{it.name}}</b></h2>
							{{ /if}}

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

				<div class="row">

					<div class="col-12 col-md-6 pb-4">

								<p><b>Nummer:</b> {{it.nr}}</p>
								<p><b>Status:</b> {{it.status}}</p>
								{{ @if(it.place !== "") }}
									<p><b>Adresse:</b> {{it.place_street}} {{it.place_street_nr}} - {{it.place}} ({{it.place_plz}}) </p>
								{{ /if}}

								<p><b>Vorschau:</b></p>

								{{@if(it.shared == "")}}
									<img class="mb-4" src="/get_thumbnail?id={{it.nr}}" style="width: 300px;max-width:100%">
								{{#else}}
									<img class="mb-4" src="/get_thumbnail?id={{it.nr}}&shared_hash={{it.share_hash}}&shared_pass={{it.share_pass}}" style="width: 300px;max-width:100%">
								{{/if}}


					</div>

					<div class="col-12 col-md-6">
								<div class="row" id="map_row">
									<p><b>Karte:</b></p>
									<div class="col-12">
										<div id="map"></div>
									</div>
								</div>
					</div>

				</div>

				{{@if(it.shared == "")}}

				<div class="row">

					<div class="col-12 col-md-6 mb-3">
						<p><b>Mitarbeiter:</b></p>

						<div class="row">
						  {{@each(it.customer) => val, index}}

						  <div class="col-auto" onclick="write_to_user('{{val.email}}')">
						    <img src="/get_user_img?id={{val.email}}" alt="User Image" style="height:5em;width:5em;border-radius:50%">
						  </div>

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


					<div class="col-12 col-md-6 mb-3">
						<p><b>Concepture:</b></p>

						<div class="row">
						  {{@each(it.mitarbeiter) => val, index}}

						    <div class="col-auto" onclick="write_to_concepture('{{val.email}}')">
						      <img src="/get_concepture_img?id={{val.kuerzel}}" alt="Concepture Image" style="height:5em;width:5em;border-radius:50%">
						    </div>

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

					<p style="font-size: 0.8em;word-break: break-word;"><i>Sie können durch einen Klick auf das Profilbild der Projektbeteiligten oder durch ein "@" jemand direkt in einem Kommentar erwähnen/anschreiben.</i></p>
			</div>



			{{/if}}
			<hr>
					<div class="row">

						<div class="col-12">

							<div class="row">
								<div class="col-6">
								<h5><b>Kommentare im Projekt</b></h5>
								</div>
							</div>

							{{@if(it.shared == "")}}
								<div id="add_comment_div">
								</div>
							{{/if}}

							<div id="content" class="content">
								<div id="comments_div">
								 </div>
								 <div class="blur"></div>
						  </div>
					 		<button id="showall" class="btn btn-primary mt-3" onclick="show_all_comments()">Ausklappen</button>
							<button id="hideall" class="btn btn-primary mt-3" onclick="hide_all_comments()" style="display:none">Einklappen</button>

						</div>

					</div>



		{{@if(it.shared == "")}}
					<hr>

					<div class="row">

						<div class="col-12">
							<h5><b>Projekt teilen</b></h5>
							<p>Stellen Sie Mitarbeitern ohne ein Konto bei FEUERWEHR-LAUFKARTE.EU den lesenden Zugriff auf dieses Projekt über den Link zur Verfügung. Möchten Sie, dass Mitarbeiter auch Bearbeitungen vornehmen? Dann laden Sie sie einfach ein, ein Konto zu erstellen.


								<button class="btn btn-primary mt-3 mb-3" onclick="show_invite_dialog();">Einladen</button>


							<p><b>Link:</b> <i id="share_link" style="word-break:break-all;">{{app_url}}/app#share_project:{{it.share_hash}}</i></p>
							<button id="copyBtn" class="btn btn-primary mb-2" onclick="copy_share_link();">Link kopieren</button>
							<p><b>Passwort:</b> <i>{{it.share_pass}}</i></b>
							<hr>
						</div>

						<div class="col-12">
							<h5><b>Ihre Bestellungen zu diesem Projekt</b></h5>
							{{@if(it.orders_array == "")}}

								<p>Noch keine Aufträge vorhanden. Jetzt <span onclick="redirect_to_new_order();"><u style="cursor: pointer;">bestellen!</u></span></p>

							{{#else}}

								<div id="orders_table_wrapper" style="overflow-x: auto;">
									<table id="orders_table" class="table" style="min-width:400px;">
										<thead>
										 <tr>
											 <th scope="col" class="f1">Name</th>
											 <th scope="col" class="f2">Mitarbeiter</th>
											 <th scope="col" class="f3">Datum</th>
											 <th scope="col" class="f4">Status</th>
											 <th scope="col" class="f5">Betrag</th>
											 <th scope="col" class="f6">Pdf</th>
											 <th scope="col" class="f6">Dateien</th>
										 </tr>
									 </thead>
										 <tbody>
											{{@each(it.orders_array) => val, index}}

											<tr>
												<td><b>{{val.Name}}</b></td>
												<td>{{val.Customer_Display}}</td>
												<td>{{val.Datum}}</td>
												<td>{{ render_status_text_order( val.Status ) }}</td>
												<td>{{val.Total}}€</td>
												<td style="text-align:right;"><a href="/dl_order?id={{val.Id}}" target="_blank"><img src="img/download.svg"/></a></td>
												<td style="text-align:right;"><span class="text-dark" onclick="dl_order_files('{{val.Id}}');" ><img src="/img/download.svg"/></span></td>
											</tr>

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

							{{/if}}
						</div>

					</div>

					<hr>

					<div class="row">

						<div class="col-12">
							<h5><b>Ihre Rechnungen zu diesem Projekt</b></h5>

							{{@if(it.bills_array == "")}}

								<p>Noch keine Rechnungen vorhanden.</a></p>

							{{#else}}

								<div id="bills_table_wrapper" style="overflow-x: auto;">
									<table id="bills_table" class="table" style="min-width:400px;">
										<thead>
										 <tr>
											 <th scope="col" class="f1">Name</th>
											 <th scope="col" class="f2">Mitarbeiter</th>
											 <th scope="col" class="f3">Datum</th>
											 <th scope="col" class="f4">Status</th>
											 <th scope="col" class="f5">Betrag</th>
											 <th scope="col" class="f6">Pdf</th>
										 </tr>
									 </thead>
									 <tbody>

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

										<tr>
											<td><b>{{val.Name}}</b></td>
											<td>{{val.Customer_Display}}</td>
											<td>{{val.Datum}}</td>
											<td>{{ render_status_text_bill( val.Status ) }}</td>
											<td>{{val.Total}}€</td>
											<td style="text-align:right;"><a href="/dl_bill?id={{val.Id}}" target="_blank"><img src="img/download.svg"/></a></td>
										</tr>

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

							{{/if}}

						</div>

					</div>

		{{/if}}


				<div id="normal_upload">
					<hr>
					<div class="">
						<div class="row">
							<div class="col-6">
								<h5><b>Daten im Projekt</b></h5>
							</div>
						</div>

						<p class="mt-3">Hier finden Sie sämtliche Pläne und Dateien Ihres Projekts. Sie können neue Dateien hochladen und sowohl neue als auch vorhandene PDFs direkt online mit unserem Editor bearbeiten. Falls Sie es vorziehen, laden Sie die Dateien herunter und bearbeiten Sie diese mit Ihrem bevorzugten Editor.
						</p>

						<button id="add_files_btn" class="btn btn-primary mb-3" onclick="show_add_files();" style="display:none;">Datei hinzufügen</button>

					</div>

					<div id="send_update" style="display:none;" class="mb-4">

						<p id="upload_path" style="display:none">

							<span onclick="show_add_files()">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
										<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
										<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
								</svg>
							</span>
							Upload Pfad: <i id="upload_path_content">/</i>

						<button class="btn btn-primary float-end" onclick="cancle_upload()">Hinzufügen abbrechen</button></p>

						<p><i style="font-size:0.7em;">Die Gesamtgröße aller Dateien darf 1,5 GB im Upload nicht überschreiten. Bitte denken Sie daran, die Aktion durch das Klicken auf die Schaltfläche 'Hochladen und senden' abzuschließen.</i></p>

						<div id="upload_files_normal"> <!--Uppy div -->
						</div>

						<button id="send_btn" onclick="send_ask()" class="btn btn-primary mt-2">Hochladen und senden</button>

					</div>

					<div id="folder_wrapper" class="pb-2 pb-sm-0">
							<div><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Lade Daten...</span></div>
					</div>

				</div>


				<div id="archiv_upload">
				{{@if(it.has_archiv==true)}}
					<hr>
					<h5><b>Archiv zum Projekt</b></h5>
					<p>Für dieses Projekt stehen bereits archivierte Daten zur Verfügung. Diese können eingesehen oder heruntergeladen werden. Eine Bearbeitung ist ebenfalls möglich, allerdings muss dafür abschließend der "Bestellen"-Button genutzt werden.</p>

					<div id="send_archiv_update" style="display:none;" class="mb-4">
							<button id="cancle_archiv_upload" class="btn btn-primary float-end"  onclick="cancle_upload()">Hinzufügen abbrechen</button>
						<p><i style="font-size:0.7em;">Die Gesamtgröße aller Dateien darf 1,5 GB im Upload nicht überschreiten. Bitte denken Sie daran, die Aktion durch das Klicken auf die Schaltfläche 'Bestellen' abzuschließen.</i>
						</p>
						<div class="pt-3" id="upload_files_archiv">
						</div>
						<button id="order_btn" onclick="order_ask()" class="btn btn-primary mt-2">Bestellen</button>

					</div>

					<div id="folder_wrapper_archiv" class="pb-2 pb-sm-0">
							<div><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Lade Daten...</span></div>
					</div>
				{{/if}}

				</div>

	</div>


<script>

var alert_mod_warning_was_shown = false; //Nur einmal während einer Sitzung warnen...

window.project_handover_object = null;

/*All the functions*/


function redirect_to_new_order(){
		deactivate_reload_lock();
		//Prepare the Handover
		window.project_handover_object = {
			project_nummer: "{{it.nr}}",
	    project_name: "{{it.name}}"
		};

		window.location = "#order";
}

/*Copy a invite link to the clipboard*/
function copy_link(){

	bootbox.hideAll();

	setTimeout(function() {

		try{

			navigator.clipboard.writeText("{{it.invite_link}}").then(function() {
					bootbox.alert('Link erfolgreich in die Zwischenablage kopiert!');
			}).catch(function(err) {

				bootbox.alert({
					message: 'Konnte den Link nicht kopieren! Bitte händisch kopieren.',
					callback: function (){show_invite_dialog();}
				});

			});
	}catch(error){
		bootbox.alert({
			message: 'Konnte den Link nicht kopieren! Bitte händisch kopieren.',
			callback: function (){show_invite_dialog();}
		});
	}

	}, 250);
}

/*Copy a share project link to the clipbaord*/
function copy_share_link(){
	var share_link = $("#share_link").text();

	try{
		navigator.clipboard.writeText(share_link).then(function() {
				bootbox.alert('Link erfolgreich in die Zwischenablage kopiert!');
		}).catch(function(err) {
				bootbox.alert('Konnte den Link nicht kopieren! Bitte händisch kopieren.');
		});
	}catch(error){
			bootbox.alert('Konnte den Link nicht kopieren! Bitte händisch kopieren.');
	}

}

/*Show a modal to invite a new user*/
function show_invite_dialog(){

	bootbox.dialog({

	title: 'Einladen',
	message:  '<p>Teilen Sie den folgenden Link mit ihrem Kollegen:</p> <p><i style="word-break: break-all;" >{{it.invite_link}}</i></p><button class="btn btn-primary" onclick="copy_link();">Link kopieren</button>',
	size: 'large',
	buttons: {
		ok: {
			label: "Schließen",
			className: 'btn-secondary',
			callback: function(){
				return true;
			}
		}
	}
	});

}

/*Show a download modal*/
function dl_order_files(in_order) {

    bootbox.dialog({
        message: '<div><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Wird heruntergeladen</span></div>',
        closeButton: false
    });

    $.get("/create_dl_order_files?id=" + in_order, function(result_data) {
        setTimeout(function() {
            var isValidSHA256 = /^[a-f0-9]{64}$/i.test(result_data);
            if (isValidSHA256) {

                bootbox.hideAll();

                var downloadLink = document.createElement('a');
                downloadLink.href = "/dl_order_files?id=" + result_data;
                downloadLink.style.display = 'none';

                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            } else {
                bootbox.hideAll();
                bootbox.alert("Fehler! Download aktuell nicht möglich!");
            }
        }, 500);
    });
}

/*Write to a specific user*/
function write_to_user(in_mail){
	var new_content = $("#input_comment_element").val() + "Hallo @"+in_mail +" bitte...";
	$("#input_comment_element").focus().val("").val(new_content);
}

/*Write to info@..*/
function write_to_concepture(in_mail){
	var new_content = $("#input_comment_element").val() + "Hallo @" + in_mail + " bitte...";
	$("#input_comment_element").focus().val("").val(new_content);
}

/*Warn the user about modifications*/
function alert_mod_warning( in_function ){
	if( window.location.hash.includes("share_project:") == false && alert_mod_warning_was_shown == false){

		bootbox.alert({
    message: "<p>Hinweis: Unsere Preise berücksichtigen nur eine bestimmte Anzahl an Korrekturläufen. Bitte senden Sie uns Ihre Korrekturen in der geforderten Form und Qualität zu. Weitere Details und Konditionen finden Sie <a href='/app#faq' target='_blank'>hier</a>.</p>",
    callback: function () {
				alert_mod_warning_was_shown = true;
        in_function(); // Wird aufgerufen, wenn der Benutzer auf "OK" klickt
    }
		});
	}else{
		in_function();
	}
}


function show_normal_upload( from_folder_dialog = false){

	activate_reload_lock();

	$("#normal_upload").show();

	$("#send_btn").show();
	$("#add_files_btn").hide();
	$("#archiv_upload").hide();

	change_uppy_target("upload_files_normal");

	if( from_folder_dialog == false && $("#send_update").is(':hidden')){

		if( $(".dp:visible").text() != "" ){
			$("#upload_path_content").text( $(".dp:visible").text() );

			$("#send_btn" ).data("path", $(".dp:visible").text() );
			$("#send_btn" ).data("hash", $(".dp:visible").data("hash") );
		}
	}

	if( from_folder_dialog == true && $("#send_update").is(':hidden')){
		$("#upload_path_content").text( $("#send_btn").data( "path") );
	}

	$("#upload_path").show();
	$("#send_update").show();
}



function show_archiv_upload(){

	activate_reload_lock();

	$("#archiv_upload").show();
	$("#send_archiv_update").show();
	$("#normal_upload").hide();
	change_uppy_target("upload_files_archiv");

	window.archiv_handover_object = null;
	window.archiv_handover_object = {
		project_nummer: "{{it.nr}}",
		project_name: "{{it.name}}"
	};

}



function send_ask(){
		var summary = "";
		var all_files = window.uppy_instance.getFiles(); //All files added by the User
		if( all_files.length > 0 )
		{
			summary = summary + "<ul>";
			for (var cc = 0; cc < all_files.length; cc++)
			{
				summary = summary + "<li>" + all_files[cc].name + "</li>";
			}
			summary = summary + "</ul>";
		}
		else
		{
			bootbox.alert('Keine Dateien zum senden angegeben!');
			return;
		}

		bootbox.dialog({
			title: 'Übermitteln',
			message:  '<p>Die folgenden Dateien werden an den Ordner: <b><i>'+$("#upload_path_content").text()+'</i></b> gesendet.</p><div>'+summary+'</div>',
			buttons: {
				cancel: {
					label: "Abbrechen",
					className: 'btn-secondary',
					callback: function(){return true;}
				},
				ok: {
					label: "Senden",
					className: 'btn-primary',
					callback: function(){
						send_final_after_ask();
						return true;
					}
				}
			}
		});
}


function order_ask(){
	bootbox.confirm({
			message: "Sie werden zum Bestellprozess weitergeleitet. Durchlaufen Sie diesen, die Daten aus dem Archiv finden Sie dort.",
			buttons: {
					confirm: {
							label: 'Zur Bestellung',
							className: 'btn-primary'
					},
					cancel: {
							label: 'Abbrechen',
							className: 'btn-secondary'
					}
			},
			callback: function (result) {
					if (result) {
							// Benutzer hat "Zur Bestellung" gewählt
							deactivate_reload_lock();
							window.location = "#order";
					} else {
							return;
					}
			}
	});
}


function send_final_after_ask(){

	deactivate_reload_lock();
	bootbox.dialog({
		title: 'Bitte warten',
		message: '<div><div class="d-flex flex-column align-items-center justify-content-center"><div class="row"><div class="spinner-border" role="status" style="width:15rem;height:15rem"><span class="sr-only"></span></div></div><div class="row mt-2"> <h3><strong id="send_data_text">Senden der Daten...</strong></h3></div></div></div>',
	});

	setTimeout(function()
	{
		var zip_upload = new JSZip();

		//Generate a PDF with a Summary of the order

		var all_files = window.uppy_instance.getFiles();  //Get All Uppy files and add the files to the ZIP
		for (var cc = 0; cc < all_files.length; cc++)
		{
			zip_upload.file( all_files[cc].name , all_files[cc].data);
		}

		zip_upload.generateAsync({type:"blob"}).then(function(content)
		{
			oder_zip = content;
			var folder_hash =  $("#send_btn" ).data("hash")

			var formData = new FormData();
			formData.append('zip', oder_zip);
			formData.append('folder', folder_hash);
			formData.append('project_nr', '{{it.nr}}');

			$.ajax({
			    type: 'POST',
			    url: "/add_project?shared_hash={{it.share_hash}}&shared_pass={{it.share_pass}}",
			    data: formData,
			    cache: false,
			    processData: false,
			    contentType: false,
			    xhr: function() {
			        var xhr = new window.XMLHttpRequest();

			        xhr.upload.addEventListener("progress", function(evt) {
			            if (evt.lengthComputable) {
			                var percentComplete = evt.loaded / evt.total;
			                percentComplete = parseInt(percentComplete * 100);

											$("#send_data_text").text("Senden der Daten: " + percentComplete + "%");
			            }
			        }, false);
			        return xhr;
			    }
			})
			.done(function( result_data ) {
					bootbox.hideAll();
			    setTimeout(function() {
			        $("#send_btn").hide();
			        $("#send_update").hide();
			        $("#add_files_btn").show();
			        bootbox.alert('Erfolgreich!', function() {
			            location.reload();
			        });
			    }, 500);
			})
			.fail(function() {
					bootbox.hideAll();
			    setTimeout(function() {
			        bootbox.alert('Ein Fehler ist aufgetreten!', function() {});
			    }, 500);
			});

		}).catch((error) => {
			bootbox.hideAll();
			setTimeout(function() {
						bootbox.alert("Dateien sind zu groß für den Upload!", function() {});
			}, 500);
	 	});


	},250);

}

/*Called when a file from the project filelist is clicked*/
function show_file( in_id , in_type , in_e){

			window.last_file_archiv = false;
			var file_name = $(in_e).text();
			file_name = file_name.trim()
			var result_url = "/get_file?id=" + in_id;

			if( in_type=="png" || in_type=="gif" || in_type=="jpg" || in_type=="jpeg" || in_type=="svg" ){
				var dialog = bootbox.dialog({
				title: 'Vorschau: ' + file_name,
				message:  '<center id="load_img_text"><b>Wird heruntergeladen</b></center><center><img src="'+result_url+'" style="width: auto;max-width: 100%;max-height: 70vh;" onload="$(\\'#load_img_text\\').hide();$(\\'.edit_img_modal_btn\\').show();"></center>',
				size: 'large',
				buttons: {
					edit: {
						label: "Anpassen",
						className: 'btn-primary edit_img_modal_btn',
						callback: function(){
							show_image_editor(result_url , null , file_name,0);
							return true;
						}
					},
					ok: {
						label: "Schließen",
						className: 'btn-secondary',
						callback: function(){
							return true;
						}
					}
				}
			});
		}else if (in_type=="pdf" ) {
			select_pdf_page_dialog(result_url , file_name);
		}
		else { //Just download the file
			inline_dl( result_url , file_name);
		}
}


function show_file_project( in_id , in_type , in_e){
	alert_mod_warning( async function(){  //The user must accept the confirm dialog

		show_file( in_id , in_type , in_e ); //Called when the user accepts t

	});

}


/*Called when a file from the archiv filelist is clicked*/
function show_file_archiv( in_id , in_type , in_e){
		show_file( in_id , in_type , in_e );
		window.last_file_archiv = true;
}

async function inline_dl( in_url , file_name ){

		showDownloadModal();

		try {
				const response = await fetch(in_url);

				if (!response.ok) {
						hideDownloadModal(); // Falls Sie eine spezielle Funktion zum Schließen der Warnung haben
						bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
						throw new Error('Network response was not ok');
				}

				const blob = await response.blob();
				const objectURL = window.URL.createObjectURL(blob);

				const a = document.createElement("a");
				a.href = objectURL;
				a.download = file_name;
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
				hideDownloadModal();
		} catch (error) {
				hideDownloadModal();
				bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
		}

}

//Show a single Archiv PDF File - Called from index.html
async function download_shared_file_project(in_id, in_type, in_e) {
    const file_name = $(in_e).text().trim();
    const result_url = "/get_file?id=" + in_id;

    showDownloadModal();

    try {
        const response = await fetch(result_url);

        if (!response.ok) {
						hideDownloadModal();
						bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
            throw new Error('Error');
        }

        const blob = await response.blob();
        const objectURL = window.URL.createObjectURL(blob);

        const a = document.createElement("a");
        a.href = objectURL;
        a.download = file_name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        // Modal schließen, da der Download jetzt startet
        hideDownloadModal();

    } catch (error) {
        hideDownloadModal();
        bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
    }
}

function showDownloadModal(){
	bootbox.dialog({
			message: '<div><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Wird heruntergeladen</span></div>',
			closeButton: false
	});
}

function hideDownloadModal(){
	setTimeout(function(){
			bootbox.hideAll();
	}, 500);
}

function download_file(in_id, file_name) {

		alert_mod_warning( async function(){

		showDownloadModal();

    file_name = file_name.trim();
    const result_url = "/get_file?id=" + in_id;

    try {
        const response = await fetch(result_url);

        if (!response.ok) {
						hideDownloadModal();
						bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
            throw new Error('Network response was not ok');
        }

        const blob = await response.blob();
        const objectURL = window.URL.createObjectURL(blob);

        const a = document.createElement("a");
        a.href = objectURL;
        a.download = file_name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        hideDownloadModal();

    } catch (error) {
        hideDownloadModal();
        bootbox.alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
    }

	});

}

function load_map(){

    if(typeof L !== "undefined"){
			const map = L.map('map').setView([0, 0], 11);
			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);

			map.panTo(new L.LatLng({{it.place_lat}}, {{it.place_long}}));

			var marker = new L.Marker([{{it.place_lat}}, {{it.place_long}}]);
			marker.addTo(map);

			marker.bindPopup("<strong>{{it.name}} - {{it.nr}}</strong><br/><p>{{it.place_street}} {{it.place_street_nr}}</p>", {maxWidth: 500});
    }
    else{
        setTimeout(load_map,100);
    }
}


function show_all_comments(){

	$("#content").css({
				"max-height": "none", // Entfernt die Höhenbegrenzung
				"overflow": "visible" // Zeigt den überlaufenden Inhalt an
	});
	$(".blur").hide(); // Entfernt den Blur-Effekt
	$("#showall").hide();
	$("#hideall").show();
}

function hide_all_comments(){
	$("#showall").show();
	$("#hideall").hide();
	$("#content").css({
				"max-height": "250px", // Entfernt die Höhenbegrenzung
				"overflow": "hidden" // Zeigt den überlaufenden Inhalt an
	});
	$(".blur").show(); // Entfernt den Blur-Effekt
}

function show_add_files(){
		if( $('#folder_list_project').is(':empty')){ //Auswahl Dialog wird nicht benötig, wenn keine Ordner da sind..
			show_normal_upload();
			return;
		}
		folderModal.show();
		window.folderLoader.loadFoldersFromPath('/');
}


/*Called from img_editor.js when the editor is closed*/
function image_editor_has_saved_event(){

	if( window.last_file_archiv == true){
		show_archiv_upload();
	}else{
		show_normal_upload();
	}
}

function cancle_upload(){
			try{
				window.uppy_instance.reset();
			} catch (error) {}

			try{
				folderModal.hide();
			} catch (error) {}

			//Normal upload
			$("#normal_upload").show();
			$("#send_update").hide();
			$("#add_files_btn").show();
			$("#folder_wrapper").show();

			//Show Archiv in the normal way
			$("#archiv_upload").show();
			$("#send_archiv_update").hide();

			deactivate_reload_lock();
}




function load_folders_select( in_json_data ) {
	  const folderList = document.getElementById('folderList');

	  function createFolderItem(path, displayName, hash) {
	    const folderItem = document.createElement('li');
	    folderItem.classList.add('list-group-item', 'folder-item');
	    folderItem.innerHTML = '<i class="bi bi-folder"></i> ' + displayName;
	    folderItem.dataset.path = path;
			folderItem.dataset.hash = hash;
	    return folderItem;
	  }

	  function navigateUp(path) {
	    if (path === '/') return '/';
	    let newPath = path.substring(0, path.lastIndexOf('/'));
	    return newPath === '' ? '/' : newPath;
	  }

	  function updateSelectButton(path) {
	    const selectButton = document.getElementById('selectFolderBtn');
	    if (path === '/') {
	      selectButton.disabled = true;
	      selectButton.textContent = 'Auswählen';
	    } else {
	      selectButton.disabled = false;
	      selectButton.textContent = 'Auswählen: ' + path.substring(path.lastIndexOf('/') + 1);
	    }
	  }

	  function parseFolders(data, parentElement, parentPath) {

			if( parentElement == null ){ return; }

	    parentElement.innerHTML = ''; // Leeren der aktuellen Einträge

	    updateSelectButton(parentPath);

	    if (parentPath !== '/') {
	      const upPath = navigateUp(parentPath);
	      const parentItem = createFolderItem(upPath, '..' , '');
	      parentElement.appendChild(parentItem);
	      parentItem.addEventListener('click', function() {
	        loadFoldersFromPath(upPath);
	      });
	    }

	    data.dirs.forEach(subFolder => {
	      const folderName = subFolder.path.substring(subFolder.path.lastIndexOf('/') + 1);
	      const folderPath = parentPath === '/' ? '/' + folderName : parentPath + '/' + folderName;
				const folderHash = subFolder.hash;
	      const folderItem = createFolderItem(folderPath, folderName , folderHash);
	      parentElement.appendChild(folderItem);
	      folderItem.addEventListener('click', function() {
					$("#selectFolderBtn").data("path", folderPath );
					$("#selectFolderBtn").data("hash", folderHash );
	        loadFoldersFromPath(folderPath);
	      });
	    });
	  }

	  function loadFoldersFromPath(path) {
	    let currentData = in_json_data;
	    const pathSegments = path.split('/').filter(p => p);

	    pathSegments.forEach(segment => {
	      currentData = currentData.dirs.find(d => d.path.endsWith(segment));
	    });

	    if (currentData) {
				if( currentData.path == "/"){
					$("#send_btn").data("path" ,currentData.path);
					$("#send_btn").data("hash" ,currentData.hash);
				}
	      parseFolders(currentData, folderList, path);
	    }
	  }

		return {
			 loadFoldersFromPath: loadFoldersFromPath
	 };

	}

/* All the initialization */
window.uppy_instance = null;
init_uppy( "upload_files_normal" ); //Global uppy Instance
window.archiv_handover_object = null;



var folderModal = null;
folderModal = new bootstrap.Modal(document.getElementById('select_folderModal'));
document.getElementById('selectFolderBtn').addEventListener('click', function() {

	$("#send_btn").data("path" , $("#selectFolderBtn").data("path") );
	$("#send_btn").data("hash" , $("#selectFolderBtn").data("hash") );

	$("#upload_path_content").text( $("#send_btn").data("path") );

	show_normal_upload(true);
	folderModal.hide();
});

if( "{{it.place_lat}}" != "0" && "{{it.place_lat}}" != ""){
	load_map();
}else{
	$("#map_row").hide();
}


var all_comments = get_comments_for_page("#show_project:{{it.nr}}" ,"{{it.share_hash}}","{{it.share_pass}}" );

$("#comments_div").html( all_comments );

add_comment_dialog("{{it.nr}}");


</script>
`;