var search_template = `

	<div class="container-fluid">

		<div id="search" >

			<!--
			<div>
				<p>Aktuell wird noch nicht durchsucht, da zu langsam:</p>
			</div>
			-->

			<div class="input-group">
			  <div class="form-outline">
			    <input type="search" id="search_field" class="form-control" oninput="do_search();" />
			  </div>
			  <button type="button" class="btn btn-primary" onclick="do_search();">
			    <img src="img/sidebar/search.svg"/>
			  </button>
			</div>

		</div>

		<h3 id="search_results_header" class="mt-4" style="display:none">Suchergebnisse:</h3>
		<div id="search_results" class="mt-4">

		</div>

	</div>

<script>

	var global_search_list = null;

	$.get("/search_list", function( result_data )
	{
		if(result_data == "denied"){
			document.cookie = "token=";
			show_login();
			return;
		}else{ logged_in = true; }

		global_search_list = JSON.parse( result_data );

	});

	function do_search(){

			const options = {
		  isCaseSensitive: false,
		  // includeScore: false,
		  // shouldSort: true,

			//includeMatches: true,
		  // findAllMatches: false,
		  // minMatchCharLength: 1,
		  // location: 0,
		   threshold: 0,
		  // distance: 100,
		  useExtendedSearch: true,
		  ignoreLocation: true,
		  // ignoreFieldNorm: false,
		  // fieldNormWeight: 1,
		  keys: ["Content"]
			};

			const fuse = new window.Fuse(global_search_list, options);

			// Change the pattern
			const pattern = $("#search_field").val();

			var results = fuse.search(pattern);

			var result_html = "<ul>";
			var i = 0;

			while (i < results.length) {

				if( results[i].item.Type == "archiv"){
					result_html = result_html + "<li>Datei im:<a href='" + results[i].item.Link  + "'>Archiv</a> &nbsp;&nbsp;<b>" + results[i].item.Content + "</b></li>";
				}

				if( results[i].item.Type == "project"){
		    	result_html = result_html + "<li>Datei im Projekt:<a href='#show_project:" + results[i].item.Link + "'>" + results[i].item.Link + "</a> &nbsp;&nbsp;<b>" + results[i].item.Content + "</b></li>";
				}

				if( results[i].item.Type == "faq"){
					result_html = result_html + "<li>In: <a href='#faq'>FAQ</a> &nbsp;&nbsp;<b>" + results[i].item.Content + "</b></li>";
				}

				if( results[i].item.Type == "order"){
					result_html = result_html + "<li><a href='#orders'>Bestellung:</a> <b>&nbsp;&nbsp;" + results[i].item.Content + "</b></li>";
				}

				if( results[i].item.Type == "order_in_project"){
					result_html = result_html + "<li>Bestellung im Projekt:<a href='#show_project:" + results[i].item.Link + "'>" + results[i].item.Link + "</a>: <b>&nbsp;&nbsp;" + results[i].item.Content + "</b></li>";
				}


				if( results[i].item.Type == "bill"){
					result_html = result_html + "<li><a href='#bills'>Rechnung:</a> <b>&nbsp;&nbsp;" + results[i].item.Content + "</b></li>";
				}

				if( results[i].item.Type == "bill_in_project"){
					result_html = result_html + "<li>Rechnung im Projekt:<a href='#show_project:" + results[i].item.Link + "'>" + results[i].item.Link + "</a>: <b>&nbsp;&nbsp;" + results[i].item.Content + "</b></li>";
				}



				if( results[i].item.Type == "note"){
					var display = results[i].item.Link;
					display = display.replace("#show_project:", "");
					display = display.replace("#", "");

					result_html = result_html + "<li>Nachricht in: <a href='" + results[i].item.Link + "'>" + display + "</a> &nbsp;&nbsp;<b>" + results[i].item.Content + "</b></li>";
				}

				i++;
			}
			result_html = result_html + "</ul>"

			if( result_html == "<ul></ul>"){
				result_html = "Keine Ergebnisse!";
			}

			$("#search_results").html(result_html);
			$("#search_results_header").show();
	}

</script>
`;