<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {# app.js reads this and echoes it on every state-changing request. #}
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>{% block title %}{{ app_name }}{% endblock %}</title>
  <link rel="stylesheet" href="/static/css/app.css">
  {% block head %}{% endblock %}
</head>
<body>
{# The whole body is one block, so a layout can replace it rather than fight it.
   shell.html does exactly that: the signed-in chrome is a sidebar beside the
   content, not a bar above it, and nesting one inside the other would mean a
   sidebar living inside <main>. #}
{% block body %}
  {% block chrome %}
  <header class="topbar">
    <a class="brand" href="/">{{ app_name }}</a>
    <nav>
      <a href="/logout">Sign out</a>
    </nav>
  </header>
  {% endblock %}
  <main class="content">
    {% block content %}{% endblock %}
  </main>
{% endblock %}
  <script src="/static/js/app.js"></script>
  {% block scripts %}{% endblock %}
</body>
</html>