<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{{ props.page.title }}</title>
  {% for style in assets.styles %}
    <link rel="stylesheet" href="{{ style }}">
  {% endfor %}
  {% block head %}{% endblock %}
</head>
{% set className = siteClassName or 'markdown' %}
<body class="{{ bodyClass }}">
<div class="{{ className }}">
  {% block header %}
    <header class="{{ className }}__header">
      <div class="{{ className }}__header-title">
        {% block title %}{% endblock %}
      </div>
      {% if(headerNavigation) %}
        <ul class="{{ className }}__header-nav">
          {% for name, collection in collections %}
            {% if(collection|length) %}
              <li class="{{ className }}__header-nav-item">
                <div class="{{ className }}__header-nav-label">
                  <a
                    href="{{ pagePrefix }}/{{ collection[0].paths.dir }}/{{ collection[0].paths.name }}">{{ menuMap[name] or name }}</a>
                </div>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      {% endif %}
    </header>
  {% endblock %}
  {% block navigation %}
  {% if(fullSiteNavigation) %}
  <nav class="{{ className }}__inner">
    <nav class="{{ className }}__sidebar">
      <ul class="{{ className }}__menu">
        {% for name, collection in collections %}
          {% if(collection|length) %}
            <li class="{{ className }}__menu-item">
              <div class="{{ className }}__menu-label">{{ menuMap[name] or name }}</div>
              <ul class="{{ className }}__menu {{ className }}__menu--nested">
                {% for page in collection %}
                  <li
                    class="{{ className }}__menu-item {% if(page.paths === paths) %}{{ className }}__menu-item--active{% endif %}">
                    <a
                      href="{{ pagePrefix }}/{{ page.paths.dir }}/{{ page.paths.name }}">{{ page.name or page.paths.name }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
    {% endif %}
    {% endblock %}
    {% block content %}
      <main class="{{ className }}__content">
        {% if(warning) %}
          <div class="{{ className }}__warning">{{ warning | safe }}</div>
        {% endif %}
        {% if(info) %}
          <div class="{{ className }}__info">{{ info | safe }}</div>
        {% endif %}
        <div class="markdown-body">
          {{ contents|safe }}
        </div>
      </main>
    </nav>
  {% endblock %}
  {% if(assets.manifest) %}
    <script type="application/javascript">{{ assets.manifest.content() | safe }}</script>
  {% endif %}
  {% if(assets.vendor) %}
    <script type="text/javascript" src="{{ assets.vendor.url }}"></script>
  {% endif %}
  {% if(assets.app) %}
    <script type="text/javascript" src="{{ assets.app.url }}"></script>
  {% endif %}
  {% block footerAssets %}{% endblock %}
</div>
</body>
</html>
