{{define "base"}}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{template "title" .}} — DPÖ</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/style.css"/>
</head>
<body>
    {{if .AuthenticatedUser}}
    <nav style="border-bottom:1px solid var(--border); background:var(--bg-card);">
        <div class="container" style="display:flex; align-items:center; gap:10px 20px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap;">
            <a href="/" class="link">Start</a>
            <a href="/issues" class="link">Abstimmungen</a>
            <a href="/mps" class="link">Nationalrat</a>
            <a href="/parlament" class="link">Parlament</a>
            <a href="/users/me" class="link">Mein Profil</a>
            {{if hasPermission "users:read"}}<a href="/users" class="link">Users</a>{{end}}
            <form method="POST" action="/logout" style="margin-left:auto;">
                <button type="submit" class="btn">Abmelden</button>
            </form>
        </div>
    </nav>
    {{end}}

    <main class="site-main">
        <div class="container">
            {{template "body" .}}
        </div>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-inner">
                <span class="footer-brand">DPÖ — Digitale Partei Österreich</span>
                <span class="footer-copy">&copy; 2025</span>
            </div>
        </div>
    </footer>

    <script>
        const ws = new WebSocket("wss://localhost:8443/ws");
        ws.onopen = () => console.log("WS connected");
        ws.onmessage = (event) => console.log(event.data);
        ws.onclose = () => console.log("WS closed");
        setInterval(() => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: "ping", timestamp: Date(), random: Math.random() }));
            }
        }, 1000);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"></script>
</body>
</html>
{{end}}
