<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8" />
  <title>
    <%= it.siteTitel %>
  </title>
  <meta name="description" content="<%= it.desc %>" />
  <meta name="author" content="[Project-Name-Here]" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="/css/tailwindInclude.css" defer async />
  <link rel="stylesheet" href="/css/mainMap.css" />

  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

  <script src="https://browser.sentry-cdn.com/6.16.0/bundle.tracing.min.js"
    integrity="sha384-nOg4TW2SG7+ChoY+hVJJjLwLlnood85Xw4eFnH7/3VUmhvQCBlXO4KHlLkV/4JmG"
    crossorigin="anonymous"></script>


  <script>
    Sentry.init({
      dsn: "<%= it.dsn %>",
      integrations: [new Sentry.Integrations.BrowserTracing()],
      beforeSend(event, hint) {
        // Check if it is an exception, and if so, show the report dialog
        if (event.exception) {
          Sentry.showReportDialog({ eventId: event.event_id });
        }
        return event;
      },
      // We recommend adjusting this value in production, or using tracesSampler
      // for finer control
      tracesSampleRate: 1.0,
    });

  </script>

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/sw.js')
        .then(function () { console.log("Service Worker Registered"); });
    }
  </script>

  <script async defer src="/js/site.js"></script>
  <script src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script>
    if (!<%= it.isInDev %>) {

      window.addEventListener('error', function (e) {
        var error = e.error;
        document.body.innerHTML = '<%~ it.errorPageContent %>';
        console.log(error);

      });
    }
  </script>


  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <script>

  </script>




  <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.js"
    charset="utf-8"></script>
  <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'
    rel='stylesheet' />
</head>

<body>

  <!-- MODALS START -->
  <!-- Geo error -->
  <div
    class="hidden overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full"
    id="popup-modal">
    <div class="relative w-full max-w-md px-4 h-full md:h-auto">
      <!-- Modal content -->
      <div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
        <!-- Modal header -->
        <div class="flex justify-end p-2">
          <button type="button"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
            data-modal-toggle="popup-modal">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
        <!-- Modal body -->
        <div class="p-6 pt-0 text-center">
          <svg class="w-14 h-14 text-gray-400 dark:text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor"
            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <h3 class="text-lg font-normal text-gray-500 mb-5 dark:text-gray-400" id="Geomodal-content">Some error
            occured. This text should be replaced.</h3>

          <button data-modal-toggle="popup-modal" type="button"
            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Okay</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Connection lost -->
  <div
    class="hidden overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full popup-modal-no-conn"
    id="popup-modal-no-conn">
    <div class="relative w-full max-w-md px-4 h-full md:h-auto">
      <!-- Modal content -->
      <div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
        <!-- Modal header -->

        <!-- Modal body -->
        <div class="p-6 pt-0 text-center">
          <svg class="w-14 h-14 text-gray-400 dark:text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor"
            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <h3 class="text-lg font-normal text-gray-500 mb-5 dark:text-gray-400">Pointsight lost connection to it's
            backend. We are tryting to reconnect.</h3>
        </div>
      </div>
    </div>
  </div>

  <!-- report modal -->
  <div id="report-modal" aria-hidden="true"
    class="hidden overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center">
    <div class="relative w-full max-w-md px-4 h-full md:h-auto">
      <!-- Modal content -->
      <div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
        <div class="flex justify-end p-2">
          <button type="button"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
            data-modal-toggle="report-modal">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
        <form class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8" id="reportForm">
          <h3 class="text-xl font-medium text-gray-900 dark:text-white">Report a point</h3>
          <div>
            <label for="email" class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300">Your
              email</label>
            <input type="email" name="email" id="email"
              class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
              placeholder="name@company.com" required>
          </div>
          <div>
            <label for="reason"
              class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300">Reasoning</label>
            <input type="text" name="reason" id="reason"
              class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
              required>
          </div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
            Select point: <b id="pointId">POINT_ID</b>
          </div>

          <button type="submit"
            class="shadow-lg shadow-blue-500/50 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            id="submitBtn">
            <center>
              <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24" id="loadingSpinner" style="display: none;">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" style="display: none;" id="loadingDone">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </center>
            <t id="reportBtnText">Report</t>
          </button>

        </form>
      </div>
    </div>
  </div>

  <!-- MODALS END -->
  <div id="sidebar" class="bg-white dark:bg-gray-900 dark:text-white "></div>

  <!-- Filter side bar-->
  <div id="sidebar-left" class="bg-white dark:bg-gray-900 dark:text-white">
    <h1 class="text-4xl">Filter</h1>
    <div id="tagSelectors">

    </div>
    <details>
      <summary>Show hidden filters</summary>
      <div id = "tagsHidden">

      </div>
    </details>
  </div>
  <script>
    /* Building the available options */
    const tagsAvail = [];
    let amo = 0;
    setTimeout(function () {
      const defaults = {
        disableByDefault: ["AP"]
      }
      const htmlBase = ' <input type="checkbox" id="tag_#tagId" name="tag_#tagId" #ISENABLED value="#tagId"><label for="tag_#tagId">#tagName</label><br>'
      respo = JSON.parse(httpGet("/api/allTags?key=b03f8aaf-1f32-4d9e-914a-9a50f904833d"))
      respo = respo.sort((a, b) => (a.amount > b.amount) ? 1 : -1)

      for (re in respo) {
        const reponsey = respo[re];
        let cHtml = htmlBase.replaceAll("#tagName", reponsey.key + " (" + reponsey.amount + ")"); 
        cHtml = cHtml.replaceAll("#tagId", reponsey.key);
        if (!defaults.disableByDefault.includes(reponsey.key)) {
          cHtml = cHtml.replaceAll("#ISENABLED", "checked");
        } else {
          cHtml = cHtml.replaceAll("#ISENABLED", "");
        }
        if(amo >= 2){
          document.getElementById("tagSelectors").innerHTML += cHtml;
        }else{
          document.getElementById("tagsHidden").innerHTML += cHtml;
        }
        amo++;
        tagsAvail.push(reponsey.key)
      }
      console.log(respo);
    }, 100);

  </script>
  <!-- JavaScript missing error -->
  <div style="margin: 0px" class="dark:bg-gray-800 fullheight">
    <noscript class="object-center">
      <div class="px-4 py-3 h-screen object-center w-96" role="alert">
        <div role="alert">
          <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
            JavaScript required!
          </div>
          <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
            <p>This application needs JavaScript to function. Please enable JavaScript.</p>
          </div>
        </div>
      </div>
    </noscript>
    <div class="map" id="map">

    </div>
  </div>

  <div class="bg-white rounded-lg border-gray-300 border p-3 shadow-lg animate-right"
    style="position: fixed; top: 50px; z-index: 5000; right: 20px; display: none;" id="notificationToast">
    <div class="flex flex-row">
      <div class="px-2">
        <svg width="24" height="24" viewBox="0 0 1792 1792" fill="#44C997" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
        </svg>
      </div>
      <div class="ml-2 mr-6">
        <span class="font-semibold" id="toast_title">Successfully Saved!</span>
        <span class="block text-gray-500" id="toast_desc">Anyone with a link can now view this file</span>
      </div>
    </div>
  </div>


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
  <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
  <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
  <link rel="stylesheet" href="./leafletContextmenu/leaflet.contextmenu.min.css" />
  <script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
  <link rel="stylesheet" defer
    href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.css" />

  <script src="/Sidebar/L.Control.Sidebar.js"></script>
  <link rel="stylesheet" href="/Sidebar/L.Control.Sidebar.css" defer />
  <script src="./leafletContextmenu/leaflet.contextmenu.min.js"></script>


  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' async
    defer></script>

  <script src="/js/leaflet-search/leaflet-search.js"></script>
  <script>

    function showCoordinates(e) {
      const shareLinkBase = "https://pointsight.project-name-here.de?lat=ä&lng=ü&zoom=ö"
      const shareLink = shareLinkBase.replace("ä", e.latlng.lat).replace("ü", e.latlng.lng).replace("ö", mymap.getZoom())
      navigator.clipboard.writeText(shareLink)

    }

    function copyLocation(e) {
      navigator.clipboard.writeText(e.latlng.lat + "," + e.latlng.lng)
    }

    function centerMap(e) {
      mymap.panTo(e.latlng);
    }

    function zoomIn(e) {
      mymap.zoomIn();
    }

    function zoomOut(e) {
      mymap.zoomOut();
    }

    var mymap = L.map("map", {
      maxZoom: 16,
      minZoom: 5,
      contextmenu: true,
      contextmenuWidth: 140,
      worldCopyJump: true,
      contextmenuItems: [{
        text: 'LatLng',
        callback: showCoordinates
      },
      {
        text: 'Create shareable link',
        callback: showCoordinates
      }, {
        text: 'Center map here',
        callback: centerMap
      }, '-', {
        text: 'Zoom in',
        icon: 'images/zoom-in.png',
        callback: zoomIn
      }, {
        text: 'Zoom out',
        icon: 'images/zoom-out.png',
        callback: zoomOut
      }]
    }).setView([51.505, -0.09], 50);

    var mapId = "greydiamond/ckv8gvbf865er14nx16m0xuz4"
    if (window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches) {
      mapId = "greydiamond/ckv8go48096jx15npzzb3xx3g"
    }

    L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>",
      {
        attribution:
          '<a href="/about">About</a> | Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        /*id: "mapbox/streets-v11",*/
        tileSize: 512,
        zoomOffset: -1,
        
        id: mapId, // for day: greydiamond/ckv8gvbf865er14nx16m0xuz4
        accessToken: "<%= it.mapboxAccessToken %>",
      }
    ).addTo(mymap);

    mymap.setGeocoder('Here', { apiKey: "<%= it.hereKey %>" })

  </script>
  <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

  <script src="./js/map.js"></script>

  <script src="https://unpkg.com/@themesberg/flowbite@1.1.1/dist/flowbite.bundle.js"></script>

</body>

</html>