<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} — Loom Dashboard</title>
    <link rel="stylesheet" href="/static/style.css">
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
    <script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>
    {% block head %}{% endblock %}
</head>
<body>
    <nav>
        <span class="brand">Loom</span>
        <a href="/dashboard" {% if page == 'board' %}class="active"{% endif %}>Task Board</a>
        <a href="/dashboard/graph" {% if page == 'graph' %}class="active"{% endif %}>Graph</a>
        <a href="/dashboard/projects" {% if page == 'projects' %}class="active"{% endif %}>Projects</a>
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
    <script src="/static/app.js"></script>
</body>
</html>
