intent/templates/base.html

{% load static %}<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>{% block title %}Intent{% endblock %}</title>
  {# Blocking on purpose: applies the saved theme before first paint. #}
  <script src="{% static 'js/theme.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/intent.css' %}">
  {# No injected <style> and no eval, so htmx works under the page's CSP. #}
  <meta name="htmx-config" content='{"includeIndicatorStyles": false, "allowEval": false, "allowScriptTags": false}'>
  {# Enhancements only: every form and link works without these. #}
  <script src="{% static 'js/htmx.min.js' %}" defer></script>
  <script src="{% static 'js/intent.js' %}" defer></script>
  {% block head %}{% endblock %}
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <nav aria-label="Main">
      <ul>
        <li><a href="{% url 'home' %}">Intent</a></li>
        {% if user.is_authenticated %}
          <li><a href="{% url 'invites:list' %}">Invitations</a></li>
          <li><a href="{% url 'account_email' %}">Account</a></li>
          <li>
            <form method="post" action="{% url 'account_logout' %}">
              {% csrf_token %}
              <button type="submit">Sign out <span class="visually-hidden">{{ user.username }}</span></button>
            </form>
          </li>
        {% else %}
          <li><a href="{% url 'account_login' %}">Sign in</a></li>
        {% endif %}
      </ul>
    </nav>
  </header>
  <main id="main" tabindex="-1">
    {% if messages %}
      <ul class="messages" role="status">
        {% for message in messages %}
          <li>{% if message.level_tag == "error" %}<strong>Error:</strong> {% endif %}{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
    {% block content %}{% endblock %}
  </main>
  <footer>
    {# Shown by theme.js; without JS the system preference applies. #}
    <form id="theme-form" hidden>
      <label for="theme-select">Theme</label>
      <select id="theme-select" name="theme">
        <option value="system">System</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </form>
  </footer>
  {% block body_end %}{% endblock %}
</body>
</html>