<!DOCTYPE html>
<html lang="en" class="{% if page.route %}route-{{page.route}}{% endif %}">
{% include head.html %}

<body>

  <div class="mobile-burger burger is-hidden-desktop" data-target="#doc-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="columns is-gapless">

    <div id="doc-menu" class="column is-2 has-background-grey-lighter menu is-mobile">
      <section class="section">
        <h1 class="title is-4 has-text-weight-semibold has-text-centered">{{ site.title }} <span class="is-size-5 has-text-primary has-text-weight-light">Documentation</span></h1>
        <div class="has-text-centered">
          <span>
            <img src="https://badgen.net/badge/Version/{{ site.version }}/green" alt="v{{ site.version }}">
          </span>
        </div>
      </section>
      {% include menu.html %}
    </div>

    <div class="column">
      <div class="hero is-light">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title is-2 is-spaced has-text-weight-semibold">{{ page.title }}</h1>
            {% if page.subtitle %}
            <h2 class="subtitle is-6 has-text-weight-light">{{ page.subtitle }}</h1>
              {% endif %}
          </div>
        </div>
      </div>

      <section class="section">
        <div class="container is-fluid">
          {{ content }}
        </div>
      </section>

        <footer class="footer">
            <div class="content has-text-centered">
                <p>{{ site.title }} - v{{ site.version }}</p>
                <a href="https://www.mh-s.de/datenschutz/">Privacy</a> | <a href="https://www.mh-s.de/impressum/">Imprint</a>
            </div>
        </footer>

    </div>
  </div>

  <script src="{{site.url}}/assets/js/doc.js"></script>
  <script src="{{site.url}}/assets/js/bulma-calendar.min.js"></script>
  <script src="{{site.url}}/assets/js/main.js"></script>

</body>

</html>
