<!doctype html>
<html lang="en">
  <head>
    <meta charset="{{ config['server']['encoding'] }}">
    <title>{% block title %}{{ config['metadata']['identification']['title'] }} -{% endblock %}</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="{{ config['server']['url'] }}/static/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/mini.css@3.0.1/dist/mini-default.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]-->
    {% for link in data['links'] %}
      <link rel="{{ link['rel'] }}" type="{{ link['type'] }}" title="{{ link['title'] }}" href="{{ link['href'] }}"/>
      {% if (link['rel']=="self" and link['type']=="text/html") %}
      <link rel="canonical" href="{{ link['href'].split('?')[0] }}" />
      {% endif %}
    {% endfor %}
    {% block extrahead %}
    {% endblock %}
  </head>
  <body>
    <header class="sticky row">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <a href="{{ config['server']['url'] }}" class="logo" role="button">
          <img src="{{ config['server']['url'] }}/static/img/logo.png" title="{{ config['metadata']['identification']['title'] }}" style="height:40px;vertical-align: middle;" /></a>
        <!--
          Add additional menu items here
          <a href="https://pygeoapi.io" role="button" class="button">About</a>
        -->
        <a href="mailto:{{ config['metadata']['contact']['email'] }}" role="button" class="button" style="float:right">Contact</a>
      </div>
    </header>
    <div class="sticky row crumbs">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        {% block crumbs %}
        <a href="{{ config['server']['url'] }}">Home</a>
        {% endblock %}
        <span style="float:right">
          <a href="{{ data['links'] | map(rel='self') | attr('href') }}?f=json">JSON</a>
          <a href="{{ data['links'] | map(rel='self') | attr('href') }}?f=jsonld">JSON-LD</a>
        </span>
      </div>
    </div>
    <main>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-10 col-md-offset-1">
          <br/>
          {% block body %}
          {% endblock %}
        </div>
      </div>
    </div>
    </main>
    <footer class="sticky">Powered by <a title="pygeoapi" href="https://pygeoapi.io"><img src="{{ config['server']['url'] }}/static/img/pygeoapi.png" 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";
          jsonld_datablock.textContent = xhr.responseText;
          head.appendChild(jsonld_datablock);
        }
      };
      xhr.send();
    </script>
  </body>
</html>
