<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#0f0a1a">
    <meta name="asset-version" content="{{ static_version }}">
    <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 }}">
    {% if prev_url %}<link rel="prev" href="{{ prev_url }}">{% endif %}
    {% if next_url %}<link rel="next" href="{{ next_url }}">{% endif %}
    <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="{{ static_url(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="{{ static_url(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_url('/static/apple-touch-icon.png') }}">
    <link rel="manifest" href="/manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="DevPlace">

    <link rel="stylesheet" href="{{ static_url('/static/css/variables.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/base.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/components.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/vendor/atom-one-dark.min.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/markdown.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/mention.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/attachments.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/lightbox.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/media.css') }}">
    <link rel="stylesheet" href="{{ static_url('/static/css/engagement.css') }}">
    {% block extra_head %}{% endblock %}
    {{ custom_css_tag(request) }}

    {% if page_schema %}
    <script type="application/ld+json">
{{ page_schema | safe }}
    </script>
    {% endif %}
</head>
<body data-user-uid="{{ user['uid'] if user else '' }}">
    <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 request.url.path == '/news' or request.url.path.startswith('/news/') %}active{% endif %}"><span class="icon">📰</span> News</a>
                <a href="/gists" class="topnav-link {% if request.url.path == '/gists' or request.url.path.startswith('/gists/') %}active{% endif %}"><span class="icon">📄</span> Gists</a>
                <a href="/projects" class="topnav-link topnav-link-feature {% if request.url.path == '/projects' or request.url.path.startswith('/projects/') %}active{% endif %}"><span class="icon">🚀</span> Projects</a>
                <a href="/leaderboard" class="topnav-link {% if request.url.path == '/leaderboard' or request.url.path.startswith('/leaderboard/') %}active{% endif %}"><span class="icon">🏆</span> Leaderboard</a>
                <div class="topnav-tools-dropdown {% if request.url.path.startswith('/tools') %}active{% endif %}">
                    <button type="button" class="topnav-link topnav-tools-toggle" aria-haspopup="true" aria-expanded="false"><span class="icon">🧰</span> Tools <span class="topnav-caret">▾</span></button>
                    <div class="dropdown-menu">
                        <a href="/tools/seo" class="dropdown-item"><span class="icon">🔍</span> SEO Diagnostics</a>
                        <a href="/tools/deepsearch" class="dropdown-item"><span class="icon">🧠</span> DeepSearch</a>
                    </div>
                </div>
            </div>
            <div class="topnav-right">
                {% if user %}
                {% set msg_unread = get_unread_messages(user["uid"]) %}
                <a href="/messages" class="topnav-icon {% if request.url.path == '/messages' or request.url.path.startswith('/messages/') %}active{% endif %}" data-counter="messages" title="Messages" aria-label="Messages">
                    <span class="nav-bell">✉️<span class="nav-badge" data-counter-badge {% if msg_unread == 0 %}hidden{% endif %}>{{ msg_unread }}</span></span>
                </a>
                <button type="button" class="topnav-icon" data-push-enable hidden title="Enable push notifications" aria-label="Enable push notifications">
                    <span class="nav-bell">🔕</span>
                </button>
                {% set unread_count = get_unread_count(user["uid"]) %}
                <a href="/notifications" class="topnav-icon" data-counter="notifications" title="Notifications" aria-label="Notifications">
                    <span class="nav-bell">🔔<span class="nav-badge" data-counter-badge {% if unread_count == 0 %}hidden{% endif %}>{{ unread_count }}</span></span>
                </a>
                {% if is_admin(user) %}
                <a href="/admin" class="topnav-icon {% if request.url.path == '/admin' or request.url.path.startswith('/admin/') %}active{% endif %}" title="Admin" aria-label="Admin">
                    <span class="nav-bell">⚙️</span>
                </a>
                {% endif %}
                <div class="topnav-user-dropdown">
                    <button type="button" class="topnav-user" aria-label="User menu">
                        <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>
                            {% if is_admin(user) %}<span class="topnav-user-role">{{ user['role'] }}</span>{% endif %}
                        </div>
                    </button>
                    <div class="dropdown-menu">
                        <a href="/profile/{{ user['username'] }}" class="dropdown-item"><span class="icon">👤</span> Profile</a>
                        <a href="/devii/" class="dropdown-item" data-devii-open><span class="icon">🤖</span> Devii</a>
                        <a href="/bookmarks/saved" class="dropdown-item"><span class="icon">🔖</span> Saved</a>
                        <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 type="button" class="topnav-hamburger" id="hamburger-btn" aria-label="Toggle menu">☰</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 request.url.path == '/news' or request.url.path.startswith('/news/') %}active{% endif %}"><span class="icon">📰</span> News</a>
            <a href="/gists" class="topnav-mobile-link {% if request.url.path == '/gists' or request.url.path.startswith('/gists/') %}active{% endif %}"><span class="icon">📄</span> Gists</a>
            <a href="/projects" class="topnav-mobile-link {% if request.url.path == '/projects' or request.url.path.startswith('/projects/') %}active{% endif %}"><span class="icon">🚀</span> Projects</a>
            <a href="/leaderboard" class="topnav-mobile-link {% if request.url.path == '/leaderboard' or request.url.path.startswith('/leaderboard/') %}active{% endif %}"><span class="icon">🏆</span> Leaderboard</a>
            <div class="topnav-mobile-divider"></div>
            <div class="topnav-mobile-section-label">Tools</div>
            <a href="/tools/seo" class="topnav-mobile-link {% if request.url.path == '/tools/seo' or request.url.path.startswith('/tools/seo/') %}active{% endif %}"><span class="icon">🔍</span> SEO Diagnostics</a>
            <a href="/tools/deepsearch" class="topnav-mobile-link {% if request.url.path == '/tools/deepsearch' or request.url.path.startswith('/tools/deepsearch/') %}active{% endif %}"><span class="icon">🧠</span> DeepSearch</a>
            {% if user %}
            <a href="/messages" class="topnav-mobile-link {% if request.url.path == '/messages' or request.url.path.startswith('/messages/') %}active{% endif %}" data-counter="messages"><span class="icon">✉️</span> Messages<span class="nav-badge nav-badge-inline" data-counter-badge {% if get_unread_messages(user["uid"]) == 0 %}hidden{% endif %}>{{ get_unread_messages(user["uid"]) }}</span></a>
            <a href="/notifications" class="topnav-mobile-link {% if request.url.path == '/notifications' or request.url.path.startswith('/notifications/') %}active{% endif %}" data-counter="notifications"><span class="icon">🔔</span> Notifications<span class="nav-badge nav-badge-inline" data-counter-badge {% if get_unread_count(user["uid"]) == 0 %}hidden{% endif %}>{{ get_unread_count(user["uid"]) }}</span></a>
            {% if is_admin(user) %}
            <div class="topnav-mobile-divider"></div>
            <div class="topnav-mobile-section-label">Admin</div>
            <a href="/admin" class="topnav-mobile-link {% if request.url.path == '/admin' %}active{% endif %}"><span class="icon">🛡️</span> Dashboard</a>
            <a href="/admin/users" class="topnav-mobile-link {% if request.url.path == '/admin/users' or request.url.path.startswith('/admin/users/') %}active{% endif %}"><span class="icon">👥</span> Users</a>
            <a href="/admin/news" class="topnav-mobile-link {% if request.url.path == '/admin/news' or request.url.path.startswith('/admin/news/') %}active{% endif %}"><span class="icon">📰</span> News</a>
            <a href="/admin/media" class="topnav-mobile-link {% if request.url.path == '/admin/media' or request.url.path.startswith('/admin/media/') %}active{% endif %}"><span class="icon">🖼️</span> Media</a>
            <a href="/admin/trash" class="topnav-mobile-link {% if request.url.path == '/admin/trash' or request.url.path.startswith('/admin/trash/') %}active{% endif %}"><span class="icon">🗑️</span> Trash</a>
            <a href="/admin/services" class="topnav-mobile-link {% if request.url.path == '/admin/services' or request.url.path.startswith('/admin/services/') %}active{% endif %}"><span class="icon">⚙️</span> Services</a>
            <a href="/admin/containers" class="topnav-mobile-link {% if request.url.path == '/admin/containers' or request.url.path.startswith('/admin/containers/') %}active{% endif %}"><span class="icon">📦</span> Containers</a>
            <a href="/admin/bots" class="topnav-mobile-link {% if request.url.path == '/admin/bots' or request.url.path.startswith('/admin/bots/') %}active{% endif %}"><span class="icon">🤖</span> Bot Monitor</a>
            <a href="/admin/ai-usage" class="topnav-mobile-link {% if request.url.path == '/admin/ai-usage' or request.url.path.startswith('/admin/ai-usage/') %}active{% endif %}"><span class="icon">📊</span> AI usage</a>
            <a href="/admin/audit-log" class="topnav-mobile-link {% if request.url.path == '/admin/audit-log' or request.url.path.startswith('/admin/audit-log/') %}active{% endif %}"><span class="icon">📋</span> Audit Log</a>
            <a href="/admin/notifications" class="topnav-mobile-link {% if request.url.path == '/admin/notifications' or request.url.path.startswith('/admin/notifications/') %}active{% endif %}"><span class="icon">🔔</span> Notifications</a>
            <a href="/admin/settings" class="topnav-mobile-link {% if request.url.path == '/admin/settings' or request.url.path.startswith('/admin/settings/') %}active{% endif %}"><span class="icon">🔧</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>
                    {% if is_admin(user) %}<span class="topnav-mobile-user-role">{{ user['role'] }}</span>{% endif %}
                </div>
            </div>
            <a href="/profile/{{ user['username'] }}" class="topnav-mobile-link"><span class="icon">👤</span> Profile</a>
            <a href="/devii/" class="topnav-mobile-link" data-devii-open><span class="icon">🤖</span> Devii</a>
            <a href="/bookmarks/saved" class="topnav-mobile-link {% if request.url.path == '/bookmarks/saved' or request.url.path.startswith('/bookmarks/') %}active{% endif %}"><span class="icon">🔖</span> Saved</a>
            <a href="/auth/logout" class="topnav-mobile-link"><span class="icon">🚪</span> Logout</a>
            {% else %}
            <div class="topnav-mobile-divider"></div>
            <a href="/auth/login" class="topnav-mobile-link"><span class="icon">🔑</span> Login</a>
            <a href="/auth/signup" class="topnav-mobile-link"><span class="icon">✨</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" data-page-type="{{ page_type_for(request) }}">
        {% block content %}{% endblock %}
    </main>

{% block footer %}
    <footer class="site-footer">
        <div class="footer-inner">
            {% include "_footer_links.html" %}
        </div>
    </footer>
{% endblock %}

    {% if user %}
    <template id="comment-reply-template">
        {% set _comment_target_uid = "" %}{% set _comment_target_type = "" %}{% include "_comment_form.html" %}
    </template>
    {% endif %}

    <script defer src="{{ static_url('/static/vendor/marked.umd.js') }}"></script>
    <script defer src="{{ static_url('/static/vendor/highlight.min.js') }}"></script>
    <script defer src="{{ static_url('/static/vendor/purify.min.js') }}"></script>
    <script type="module" src="{{ static_url('/static/vendor/emoji-picker-element/index.js') }}"></script>
    <script type="module" src="{{ static_url('/static/js/Application.js') }}"></script>
    {% block extra_js %}{% endblock %}
    {{ custom_js_tag(request) }}
</body>
</html>
