<!doctype html>
<html lang="en">

<head>
  <title>{{ doc_title | default("esparto-doc", true) }}</title>
  <link rel="icon"
    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>&#128202;</text></svg>">
  <!-- Meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  {% if head_deps is defined and head_deps|length %}
  <!-- Bootstrap CSS and JavaScript Dependencies -->
  {% for dep in head_deps %}
  {{ dep }}
  {% endfor %}
  {% endif %}

  {% if esparto_css %}
  <!-- Esparto CSS -->
  <style>
  {{ esparto_css }}
  </style>
  {% endif %}
</head>

<body>
  <!-- Header -->
  <nav class="navbar d-flex navbar-expand-md navbar-light bg-secondary mb-3 d-print-none" width="100vw"
    style="padding: 0; min-height: 1.2rem; --bs-bg-opacity: .1;">
    <a class="navbar-brand" style="margin-left: 10vw; padding: 0; font-size: 1rem;" href="#">{{ navbrand }}</a>
  </nav>

  <!-- Content -->
  <main class="container" style="min-height: 100vh;">
  {{ content }}
  </main>

  <!-- Footer -->
  <footer class="footer d-flex justify-content-center d-print-none" width="100vw">
    <div class="btn-group px-2 mt-5 mb-4" role="group">
      <a title="Esparto Project Page" aria-label="Esparto Project Page" class="es-icon" href="https://domvwt.github.io/esparto/">
        <svg id="es-link-button" class="bi bi-file-earmark-bar-graph" style="display: block;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path
            d="M10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v6zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z" />
          <path
            d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
        </svg>
      </a>
      <a title="Share Document" aria-label="Share Document" >
        <svg id="share-button" class="es-icon bi bi-share" style="display: none;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path
            d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" />
        </svg>
      </a>
      <a title="Print Document" aria-label="Print Document">
        <svg id="print-button" class="es-icon bi bi-printer" style="display: block;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
          <path
            d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
        </svg>
      </a>
    </div>
  </footer>

  <!-- JavaScript -->
  {% if tail_deps is defined and tail_deps|length %}
  {% for dep in tail_deps %}
  {{ dep }}
  {% endfor %}
  {% endif %}

  {% if esparto_js %}
  <script type="text/javascript">
  {{ esparto_js }}
  </script>
  {% endif %}

</body>

</html>
