<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>{{ title }} Documentation</title>

    <style type="text/css">{{ css }}</style>

    {% include "./js/lib/highlight.min.js.nunjucks" %}
    <script>hljs.initHighlightingOnLoad();</script>
    {% include "./js/lib/jquery.min.js.nunjucks" %}

    {% include "./js/lib/energize.js.nunjucks" %}
    {% include "./js/lib/imagesloaded.min.js.nunjucks" %}
    {% include "./js/lib/jquery_ui.js.nunjucks" %}
    {% include "./js/lib/jquery.highlight.js.nunjucks" %}
    {% include "./js/lib/jquery.tocify.js.nunjucks" %}
    {% include "./js/lib/lunr.js.nunjucks" %}
    {% include "./js/script.js.nunjucks" %}

    {% if languageTabs %}
      <script>
        $(function() {
          setupLanguages({{ languageTabs | dump }});
        });
      </script>
    {% endif %}
  </head>

  <body class="">
    <a href="#" id="nav-button">
      <span>
        NAV
        <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAAAAABWESUoAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYxgswBIIsLFGrIJRBaMKBh4AAE3cQCEvEU3+AAAAAElFTkSuQmCC' alt="navbar"/>
      </span>
    </a>
    <div class="tocify-wrapper">
      <img src='data:{{ logoMime }};base64,{{ logo }}' alt='logo' />
        {% if languageTabs %}
          <div class="lang-selector">
            {% for language in languageTabs -%}
              <a href="#" data-language-name="{{ language }}">{{ language }}</a>
            {%- endfor %}
          </div>
        {% endif %}
      {% if search %}
        <div class="search">
          <input type="text" class="search" id="input-search" placeholder="Search">
        </div>
        <ul class="search-results"></ul>
      {% endif %}
      <div id="toc">
      </div>
    </div>
    <div class="page-wrapper">
      <div class="dark-box"></div>
      <div class="content">
        {% include "./index.nunjucks" %}
      </div>
      <div class="dark-box">
        {% if languageTabs %}
          <div class="lang-selector">
            {% for language in languageTabs -%}
              <a href="#" data-language-name="{{ language }}">{{ language }}</a>
            {%- endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </body>
</html>
