{% load django_htmx static %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>django-htmx example app</title>
  <link rel="stylesheet" href="{% static 'mvp.css' %}">

  <!-- An example of how we can configure htmx -->
  <!-- https://htmx.org/docs/#config -->
  <meta name="htmx-config" content='{"historyCacheSize": 15}'>

  {% htmx_script %}
  <script src="{% static 'ext/event-header.js' %}" defer></script>
  <script src="{% static 'app.js' %}" defer></script>
</head>

<!--
  Enable htmx extensions for all requests:
  * event-header: https://github.com/bigskysoftware/htmx-extensions/blob/main/src/event-header/README.md
-->
<body hx-ext=event-header>
  <header>
    <nav>
      <h1>
        <a href="/">
          django-htmx example app
        </a>
      </h1>
      <ul>
        <li>
          <a href="/csrf-demo/">CSRF Demo</a>
        </li>
        <li>
          <a href="/error-demo/">Error Demo</a>
        </li>
        <li>
          <a href="/middleware-tester/">Middleware Tester</a>
        </li>
        <li>
          <a href="/partial-rendering/">Partial Rendering</a>
        </li>
      </ul>
    </nav>
  </header>
  <main id="main">
    {% block main %}{% endblock %}
  </main>
  <footer>
    <hr>
    <p>
      For more information see <a href="https://github.com/adamchainz/django-htmx">django-htmx</a> and <a href="https://htmx.org/">htmx</a>.
    </p>
  </footer>
  {% django_htmx_script %}
</body>
</html>
