var archiv_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; }

	.path{
		display: none;
	}

	.content {
		max-height: 250px; /* Begrenzt die Höhe des sichtbaren Bereichs */
		overflow: hidden; /* Versteckt den überlaufenden Inhalt */
		position: relative; /* Für das korrekte Positionieren des Blur-Effekts */
}

	.folder_element_date{
		display:none;
	}
</style>

	<div class="container-fluid">

				<div class="row">
					<div id="head_div" class="col-12 col-md-6">
						<div class="mt-3 mb-2">
							<h2><b>{{it.name}}{{ @if(it.place !== "") }}, {{it.place}}{{ /if}}
							</b></h2>
						</div>
						<hr>
					</div>
				</div>

				<div class="row">

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

								<p><b>Nummer:</b> {{it.nr}}</p>

								{{ @if(it.place !== "") }}
									<p><b>Adresse:</b> {{it.place}}
										{{ @if(it.place_plz !== "") }}({{it.place_plz}}){{ /if}}

										{{ @if( it.place_plz !== "" || it.place_street_nr !== "") }}
											- {{it.place_street}} {{it.place_street_nr}}
										{{ /if}}

										 </p>
								{{ /if}}

								<p><b>Vorschau:</b></p>
								<img class="mb-4" src="/get_thumbnail?id={{it.nr}}" style="width: 300px;max-width:100%">

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




			<div id="add_files_div" style="display:none;">
				<hr>
				<p class="d-block"><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 'Bestellung aufgeben' abzuschließen.</i></p>

				<div id="upload_files">
				</div>

				<div class="mb-2 mt-2">
					<div class="row">
						<div class="col">
							<button class="btn btn-primary  float-md-end float-start me-2 mt-2" onclick="go_to_order();">Bestellung aufgeben</button>
							<button id="cancle_upload" class="btn btn-primary float-md-end float-start  me-2 mt-2" onclick="cancle_upload()">Hinzufügen abbrechen</button>
						</div>
					</div>
				</div>

			</div>

			<hr>

			<div class="mt-3 mb-3">

				<div class="row">
					<div class="col-12">
						<h5><b>Daten im Archiv</b></h5>
					</div>
				</div>

						<p id="archiv_data_fail_msg" class="mt-3" style="display:none;" >Zurzeit können die Daten nicht online eingesehen werden. Bitte kontaktieren Sie Concepture, um Zugang zu erhalten.</p>

						<p id="archiv_data_ok_msg" class="mt-3">Hier finden Sie den aktuellen Stand der Feuerwehr-Laufkarten zum Projekt. Sie können diese jederzeit Sichten, Änderungen mithilfe unseres Editors eintragen und eine Bestellung aufgeben oder nur Herunterladen.</p>

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

			<div id="add_files_to_archiv_div" style="display:none;" >
				<button id="add_files_to_archiv_btn" class="btn btn-primary" onclick="show_add_files_final();" >Datei hinzufügen</button>
			</div>

	</div>


<script>
window.uppy_instance = null;
init_uppy( "upload_files" ); //Global uppy Instance
window.archiv_handover_object = null;

function go_to_order() {
    bootbox.confirm({
        message: "Sie werden zum Bestellprozess weitergeleitet. Das Projekt wird im Anschluss der aufgegebene Bestellung wieder aktiv bearbeitet und ist dann samt den aktuellen Feuerwehr-Laufkarten in Ihren laufenden Projekten zu finden.",
        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 image_editor_has_saved_event(){
	show_add_files_final();
}

function show_add_files_final(){
	activate_reload_lock();
	//Prepare the Handover
	window.archiv_handover_object = {
		project_nummer: "{{it.nr}}",
    project_name: "{{it.name}}"
	};

	$("#add_files_div").show();
	$("#add_files_to_archiv_div").hide();
}

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

	$("#add_files_div").hide();
	$("#add_files_to_archiv_div").show();

	deactivate_reload_lock();
}

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

async function download_file(in_id, file_name) {

		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();
						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();
        alert('Ein Fehler ist aufgetreten beim Herunterladen der Datei.');
    }
}

//Show a single Archiv PDF File - Called from app.html
function show_file_archiv( in_id , in_type , in_e){
			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><img src="'+result_url+'" style="width:100%" onload="$(\\'#load_img_text\\').hide();">',
				size: 'large',
				buttons: {
					edit: {
						label: "Anpassen",
						className: 'btn-primary',
						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 {
			inline_dl( result_url , file_name);
		}
}

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

if( "{{it.place_lat}}" != "0" && "{{it.place_lat}}" != ""){
	load_map();
}else{
	$("#map_row").hide();
	$("#head_div").removeClass();
	$("#head_div").addClass("col-12");
}

</script>
`;