<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}ESPresso Frame{% endblock %}</title>
  {% if csrf_token %}<meta name="csrf-token" content="{{ csrf_token }}">{% endif %}
  <script>
    // Applied before first paint so there's no flash of the wrong theme.
    (function () {
      try {
        var stored = localStorage.getItem('theme');
        if (stored === 'light' || stored === 'dark') {
          document.documentElement.setAttribute('data-theme', stored);
        }
      } catch (e) { /* localStorage unavailable (private mode, etc.) */ }
    })();
  </script>
  <link rel="stylesheet" href="/static/theme.css">
  {% block extra_head %}{% endblock %}
</head>
<body>
  <div class="page {% block page_class %}{% endblock %}">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">☕</span>
        <div>
          <h1>ESPresso Frame</h1>
          {% block subtitle %}{% endblock %}
        </div>
      </div>
      <button type="button" id="theme-toggle" class="icon-btn" title="Toggle dark mode" aria-label="Toggle dark mode">🌓</button>
    </header>

    {% block content %}{% endblock %}
  </div>

  <script src="/static/common.js"></script>
  {% block scripts %}{% endblock %}
</body>
</html>
