{# This is recommended for structuring your application pages #}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    {# You can use any design system you want #}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.css">
    <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.css">

    {# You can use any JS modules you want #}
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2/dist/sse.js"></script>

    {% block header %} {% endblock header %}
  </head>

  <body class="d-flex flex-column h-100">
    <header
      class="nav"
      hx-ext="sse"
      sse-connect="/notifications"
      sse-swap="message"
      hx-swap="beforeend"
    ></header>
    <main class="flex-shrink-0">
      <div class="container py-5">
        {% block content %} {% endblock content %}
      </div>
    </main>
    {% block script %} {% endblock script %}
  </body>

</html>
