<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  </head>
  <body>
    <section class="section">
      {# TODO use position: sticky to glue this to the top #}
      <nav class="breadcrumb is-large">
        <ul>
          <li class="{{ "is-active" if machine is undefined }}">
            <a href="index.html">Recipe Report</a>
          </li>
          {% if machine is defined %}
          <li class="is-active">
            <a href="#">{{machine}}</a>
          </li>
          {% endif %}
        </ul>
      </nav>

      <div class="content">
        {% block content %}{% endblock %}
      </div>
    </section>

    <footer class="footer">
      <div class="content has-text-centered">
        Generated by <code>machine-summary</code> at {{ timestamp }}.
      </div>
    </footer>
  </body>
</html>
