<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Second Brain{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="manifest" href="{{ url_for('manifest') }}">
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.svg') }}">
    <meta name="theme-color" content="#0a0a0a">
</head>
<body>
    <div class="app">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <a href="/" class="sidebar-logo">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
                        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
                        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span>Second Brain</span>
                </a>
                <button class="sidebar-toggle" id="sidebarClose" aria-label="Close sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18 6L6 18M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <div class="sidebar-body">
                <!-- Main navigation -->
                <div class="sidebar-section">
                    <div class="sidebar-section-title">Navigate</div>
                    <ul class="sidebar-nav">
                        <li>
                            <a href="/daily" class="{% if active_tab == 'daily' %}active{% endif %}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="16" y1="2" x2="16" y2="6"/>
                                    <line x1="8" y1="2" x2="8" y2="6"/>
                                    <line x1="3" y1="10" x2="21" y2="10"/>
                                </svg>
                                Today
                            </a>
                        </li>
                        <li>
                            <a href="/" class="{% if active_tab == 'wiki' or not active_tab %}active{% endif %}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
                                    <polyline points="17,21 17,13 7,13 7,21"/>
                                    <polyline points="7,3 7,8 15,8"/>
                                </svg>
                                Wiki
                            </a>
                        </li>
                        <li>
                            <a href="/graph" class="{% if active_tab == 'graph' %}active{% endif %}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="6" cy="6" r="3"/>
                                    <circle cx="18" cy="6" r="3"/>
                                    <circle cx="6" cy="18" r="3"/>
                                    <circle cx="18" cy="18" r="3"/>
                                    <line x1="9" y1="6" x2="15" y2="6"/>
                                    <line x1="6" y1="9" x2="6" y2="15"/>
                                    <line x1="18" y1="9" x2="18" y2="15"/>
                                    <line x1="9" y1="18" x2="15" y2="18"/>
                                </svg>
                                Graph
                            </a>
                        </li>
                        <li>
                            <a href="/files" class="{% if active_tab == 'files' %}active{% endif %}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
                                </svg>
                                Files
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Tags -->
                {% if tags is defined and tags %}
                <div class="sidebar-section">
                    <div class="sidebar-section-title">Tags</div>
                    <div class="sidebar-tags">
                        <div class="sidebar-tag-cloud">
                            {% for tag, count in tags %}
                            <a href="?tag={{ tag }}{% if query %}&q={{ query }}{% endif %}"
                               class="sidebar-tag{% if tag_filter == tag %} active{% endif %}"
                               title="{{ count }} page{{ 's' if count != 1 }}">
                                {{ tag }}
                                <span class="tag-count">{{ count }}</span>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>

            <div class="sidebar-footer">
                <span class="sidebar-footer-info">
                    {% if pages is defined %}{{ pages | length | default(0, true) }} pages · {{ tags | length | default(0, true) }} tags{% endif %}
                </span>
            </div>
        </aside>

        <!-- Sidebar overlay (mobile) -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- Main content area -->
        <div class="main-wrapper">
            <!-- Top bar -->
            <header class="topbar">
                <button class="topbar-mobile-toggle" id="sidebarOpen" aria-label="Open sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <line x1="3" y1="12" x2="21" y2="12"/>
                        <line x1="3" y1="18" x2="21" y2="18"/>
                    </svg>
                </button>

                <form class="topbar-search" action="/search" method="GET">
                    <input type="text" name="q" placeholder="Search..." value="{{ query | default('', true) }}"
                           class="search-input" id="searchInput">
                    <input type="hidden" name="type" id="searchType" value="wiki">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="m21 21-4.35-4.35"/>
                    </svg>
                </form>

                <div class="topbar-actions">
                    {% block actions %}{% endblock %}
                    <a href="/edit/new" class="topbar-btn primary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        <span>New</span>
                    </a>
                </div>
            </header>

            <!-- Page content -->
            <main class="main">
                <div class="content {% block content_class %}browsing{% endblock %}">
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/static/sw.js');
        }
    </script>
</body>
</html>