<!doctype html>
<html lang="en">
  
<style>
  
  .switch {
    position: absolute;
    display: inline-block;
    right: 1vw;
    top: 10px;
    width: 70px;
    height: 23px;
    z-index: 1000000;
  }
  
  .switch span { 
    position: absolute;
    left: 30px;
  }
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 12px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
  }
  
  </style>
  <head>
    <meta charset="{{ config['server']['encoding'] }}">
    <title>{% block title %}{% endblock %}{% if not self.title() %}{{ config['metadata']['identification']['title'] }}{% endif %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="language" content="{{ config['server']['language'] }}">
    <meta name="description" content="{{ config['metadata']['identification']['title'] }}">
    <meta name="keywords" content="{{ config['metadata']['identification']['keywords']|join(',') }}">
    <link rel="shortcut icon" href="https://github.com/specklesystems/pygeoapi/blob/dev/pygeoapi/static/img/speckle_geo.png" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ config['server']['url'] }}/static/css/default.css">
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    <meta name="twitter:image:src"   content="{% block thumb %}{% endblock %}{% if not self.thumb() %}{{ config['server']['url'] }}/static/img/logo.png{% endif %}" />
    <meta property="og:image"        content="{{ self.thumb() }}{% if not self.thumb() %}{{ config['server']['url'] }}/static/img/logo.png{% endif %}" />
    <meta name="twitter:site"        content="{{ config['metadata']['identification']['title'] }}" />
    <meta property="og:site_name"    content="{{ config['metadata']['identification']['title'] }}" />    
    <meta name="twitter:card"        content="summary_large_image" />
    <meta name="twitter:title"       content="{{ self.title() }}{% if not self.title() %}{{ config['metadata']['identification']['title'] }}{% endif %}" />
    <meta property="og:title"        content="{{ self.title() }}{% if not self.title() %}{{ config['metadata']['identification']['title'] }}{% endif %}" />
    <meta name="twitter:description" content="{{ config['metadata']['identification']['description'] }}" />
    <meta property="og:description"  content="{{ config['metadata']['identification']['description'] }}" />

    <meta property="og:type" content="website" />
    {% for link in data['links'] %}
      {% if (link['rel']=="self" and link['type']=="text/html") %}
      <link rel="canonical" href="{{ link['href'].split('?')[0] }}?f=html" />
      {% elif (link['rel']!="canonical") %}
      <link rel="{{ link['rel'] }}" type="{{ link['type'] }}" title="{{ link['title'] }}" href="{{ link['href'] }}"/>
      {% endif %}
    {% endfor %}
    {% block extrahead %}
    {% endblock %}
  </head>
  <body>
  <div class="bg-white sticky-top border-bottom" >
    <div class="container" style="max-height:fit-content;max-width: fit-content;margin-left: 10px;">
      <header class="d-flex flex-wrap justify-content-center py-2" style="text-align: left;">
        <a href="{{ config['metadata']['contact']['url'] }}" target="_blank"
          class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"
          style="text-align:left;">
            <img src="{{ config['server']['url'] }}/static/img/speckle_cube_32.png" alt="Speckle"
              title="{{ config['metadata']['identification']['title'] }}" style="height:30px;vertical-align: middle;" /> 
            <b style="text-align:left;padding-left: 10px;">Speckle</b> 
        </a>
        <a href="https://geo.speckle.systems/" target="_blank" style="text-align:left;padding-left: 10px;" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
            > Geolocating your data 
        </a>
        {% if (data["model"] and data["model"]!="") %}
        <a href="{{data['speckle_project_url']}}" target="_blank" style="text-align:left;padding-left: 10px;" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
          > {{data["project"]}} >
        </a>
        <a href="{{data['speckle_url']}}" target="_blank" style="text-align:left;padding-left: 10px;color:rgb(10,132,255);" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
          {{data["model"]}} {{data["limit_message"]}}
        </a>
        {% endif %}
        
        <div class="form-group" >
          <label class="switch">3D
            <input id="modeSwitch" type="checkbox">
            <span class="slider round"></span>
          </label>
        </div>
        
        <ul class="nav nav-pills"> </ul>
      </header>
    </div>

    <div style="max-height:fit-content;margin:0px;padding:0px;background-color: rgb(10,132,255);">
        <p style="text-align: center; margin:0px;padding:5px;">
          <a href = "https://docs.google.com/forms/d/e/1FAIpQLScKW2pkcWll3deXEwoV_G5ozLtuU06_prw8rf8HFuCk4tmOPQ/viewform?usp=sf_link" 
            style="color:rgb(255, 255, 255)" target="_blank">We would love to hear your feedback!</a>
        </p>
    </div>

  </div>
  <div class="crumbs">
    
  </div>

  <main style="background-color:WhiteSmoke;">
    <div style="margin-left: 20px;margin-right: 20px;">
    {% block body_map %}
    {% endblock %}
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          {% block body %}
          {% endblock %}
        </div>
      </div>
    </div>
  </main>

  <footer class="sticky-bottom bg-white d-flex flex-wrap py-3 px-3 border-top">{% trans %}Powered by {% endtrans %} <a title="pygeoapi" href="https://pygeoapi.io"><img
        src="{{ config['server']['url'] }}/static/img/pygeoapi.png" class="mx-1" title="pygeoapi logo"
        style="height:24px;vertical-align: middle;" /></a> {{ version }}
  </footer>

    {% block extrafoot %}
    {% endblock %}
    <script>
      // Requests and embeds JSON-LD representation of current page
      var xhr = new XMLHttpRequest();
      var path = window.location.protocol + "//" + window.location.host + window.location.pathname + "?f=jsonld";
      xhr.open('GET', path);
      xhr.onload = function() {
        if (xhr.status === 200) {
          var head = document.getElementsByTagName('head')[0];
          var jsonld_datablock = document.createElement('script');
          jsonld_datablock.type = "application/ld+json";
          //remove full context path, because search engines don't expect it here, pyld requires it.
          jsonld_datablock.textContent = xhr.responseText.replace('docs/jsonldcontext.jsonld','');
          head.appendChild(jsonld_datablock);
        }
      };
      xhr.send();
    </script>
  </body>
</html>
