<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0f0a1a">
    <title>{% if page_title %}{{ page_title }}{% else %}DevPlace - The Developer Social Network{% endif %}</title>
    <meta name="description" content="{% if meta_description %}{{ meta_description }}{% else %}Track industry shifts. Discover bold releases. Share what you're building in an open, uncensored environment.{% endif %}">
    <link rel="canonical" href="{{ canonical_url or request.url }}">
    <meta name="robots" content="{{ meta_robots or 'index,follow' }}">

    <meta property="og:title" content="{{ og_title or page_title or 'DevPlace' }}">
    <meta property="og:description" content="{{ og_description or meta_description or 'The Developer Social Network' }}">
    <meta property="og:type" content="{{ og_type or 'website' }}">
    <meta property="og:url" content="{{ canonical_url or request.url }}">
    <meta property="og:image" content="{{ og_image or '/static/og-default.png' }}">
    <meta property="og:site_name" content="DevPlace">
    <meta property="og:locale" content="en_US">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ og_title or page_title or 'DevPlace' }}">
    <meta name="twitter:description" content="{{ og_description or meta_description or 'The Developer Social Network' }}">
    <meta name="twitter:image" content="{{ og_image or '/static/og-default.png' }}">

    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>&#x1f4bb;</text></svg>">
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">

    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdn.jsdelivr.net">

    <link rel="stylesheet" href="/static/css/variables.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/atom-one-dark.min.css">
    <link rel="stylesheet" href="/static/css/markdown.css">
    <link rel="stylesheet" href="/static/css/mention.css">
    <link rel="stylesheet" href="/static/css/attachments.css">
    {% block extra_head %}{% endblock %}

    {% if page_schema %}
    <script type="application/ld+json">
{{ page_schema | safe }}
    </script>
    {% endif %}
</head>
<body>
    <nav class="topnav">
        <div class="topnav-inner">
            <a href="/feed" class="topnav-logo">Dev<span>Place</span></a>
            <div class="topnav-links">
                <a href="/" class="topnav-link {% if request.url.path == '/' %}active{% endif %}"><span class="icon">🏠</span> Home</a>
                <a href="/feed" class="topnav-link {% if request.url.path == '/feed' %}active{% endif %}"><span class="icon">📝</span> Posts</a>
                <a href="/news" class="topnav-link {% if 'news' in request.url.path %}active{% endif %}"><span class="icon">📰</span> News</a>
                <a href="/gists" class="topnav-link {% if 'gists' in request.url.path %}active{% endif %}"><span class="icon">📄</span> Gists</a>
                <a href="/projects" class="topnav-link {% if 'projects' in request.url.path %}active{% endif %}"><span class="icon">🚀</span> Projects</a>
                {% if user %}
                <a href="/messages" class="topnav-link {% if 'messages' in request.url.path %}active{% endif %}"><span class="icon">✉️</span> Messages</a>
                {% if user.get('role') == 'Admin' %}
                <a href="/admin" class="topnav-link {% if 'admin' in request.url.path %}active{% endif %}"><span class="icon">⚙️</span> Admin</a>
                {% endif %}
                {% endif %}
            </div>
            <div class="topnav-right">
                {% if user %}
                <a href="/notifications" class="topnav-icon">
                    <span class="nav-bell">&#x1F514;</span>
                    {% set unread_count = get_unread_count(user["uid"]) %}
                    {% if unread_count > 0 %}
                    <span class="nav-badge">{{ unread_count }}</span>
                    {% endif %}
                </a>
                <div class="topnav-user-dropdown">
                    <a href="/profile/{{ user['username'] }}" class="topnav-user">
                        <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
                        <div class="topnav-user-info">
                            <span class="topnav-user-name">{{ user['username'] }}</span>
                            <span class="topnav-user-role">{{ user.get('role', 'Member') }}</span>
                        </div>
                    </a>
                    <div class="dropdown-menu">
                        <a href="/auth/logout" class="dropdown-item"><span class="icon">🚪</span>Logout</a>
                    </div>
                </div>
                {% else %}
                <a href="/auth/login" class="topnav-link"><span class="icon">🔑</span>Login</a>
                <a href="/auth/signup" class="btn btn-primary btn-sm"><span class="icon">✨</span>Sign Up</a>
                {% endif %}
                <button class="topnav-hamburger" id="hamburger-btn" aria-label="Toggle menu">&#x2630;</button>
            </div>
        </div>
    </nav>

    <div class="topnav-mobile-overlay" id="mobile-overlay"></div>
    <div class="topnav-mobile-panel" id="mobile-panel">
        <nav class="topnav-mobile-links">
            <a href="/" class="topnav-mobile-link {% if request.url.path == '/' %}active{% endif %}"><span class="icon">🏠</span> Home</a>
            <a href="/feed" class="topnav-mobile-link {% if request.url.path == '/feed' %}active{% endif %}"><span class="icon">📝</span> Posts</a>
            <a href="/news" class="topnav-mobile-link {% if 'news' in request.url.path %}active{% endif %}"><span class="icon">📰</span> News</a>
            <a href="/gists" class="topnav-mobile-link {% if 'gists' in request.url.path %}active{% endif %}"><span class="icon">📄</span> Gists</a>
            <a href="/projects" class="topnav-mobile-link {% if 'projects' in request.url.path %}active{% endif %}"><span class="icon">🚀</span> Projects</a>
            {% if user %}
            <a href="/messages" class="topnav-mobile-link {% if 'messages' in request.url.path %}active{% endif %}"><span class="icon">✉️</span> Messages</a>
            <a href="/notifications" class="topnav-mobile-link {% if 'notifications' in request.url.path %}active{% endif %}"><span class="icon">&#x1F514;</span> Notifications</a>
            {% if user.get('role') == 'Admin' %}
            <div class="topnav-mobile-divider"></div>
            <div class="topnav-mobile-section-label">Admin</div>
            <a href="/admin/users" class="topnav-mobile-link {% if 'admin/users' in request.url.path %}active{% endif %}"><span class="icon">&#x1F465;</span> Users</a>
            <a href="/admin/news" class="topnav-mobile-link {% if 'admin/news' in request.url.path %}active{% endif %}"><span class="icon">&#x1F4F0;</span> News</a>
            <a href="/admin/services" class="topnav-mobile-link {% if 'admin/services' in request.url.path %}active{% endif %}"><span class="icon">&#x2699;&#xFE0F;</span> Services</a>
            <a href="/admin/settings" class="topnav-mobile-link {% if 'admin/settings' in request.url.path %}active{% endif %}"><span class="icon">&#x1F527;</span> Settings</a>
            {% endif %}
            <div class="topnav-mobile-divider"></div>
            <div class="topnav-mobile-user">
                <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
                <div class="topnav-mobile-user-info">
                    <span>{{ user['username'] }}</span>
                    <span class="topnav-mobile-user-role">{{ user.get('role', 'Member') }}</span>
                </div>
            </div>
            <a href="/profile/{{ user['username'] }}" class="topnav-mobile-link"><span class="icon">&#x1F464;</span> Profile</a>
            <a href="/auth/logout" class="topnav-mobile-link"><span class="icon">&#x1F6AA;</span> Logout</a>
            {% else %}
            <div class="topnav-mobile-divider"></div>
            <a href="/auth/login" class="topnav-mobile-link"><span class="icon">&#x1F511;</span> Login</a>
            <a href="/auth/signup" class="topnav-mobile-link"><span class="icon">&#x2728;</span> Sign Up</a>
            {% endif %}
        </nav>
    </div>

    {% if breadcrumbs and breadcrumbs|length > 1 %}
    <nav aria-label="Breadcrumb" class="breadcrumb">
        <ol>
            {% for crumb in breadcrumbs %}
            <li>
                {% if not loop.last %}
                <a href="{{ crumb.url }}">{{ crumb.name }}</a>
                {% else %}
                <span aria-current="page">{{ crumb.name }}</span>
                {% endif %}
            </li>
            {% endfor %}
        </ol>
    </nav>
    {% endif %}

    <main class="page">
        {% block content %}{% endblock %}
    </main>

{% block footer %}
    <footer class="site-footer">
        <div class="footer-inner">
            <span class="footer-copy">&copy; DevPlace</span>
            <nav class="footer-links">
                <a href="/bugs"><span class="icon">🐛</span> Bug Report</a>
            </nav>
        </div>
    </footer>
{% endblock %}

    <script defer src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
    <script type="module" src="/static/js/Application.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
