{% macro heading_pane(user_photo, username, is_active, has_documents) -%}
    <div class="khoj-header">
        <a class="khoj-logo" href="/">
            <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
        </a>
        <nav class="khoj-nav">
            {% if has_documents %}
            <a id="chat-nav" class="khoj-nav" href="/chat">💬 Chat</a>
            <a id="search-nav" class="khoj-nav" href="/search">🔎 Search</a>
            {% endif %}
            <!-- Dropdown Menu -->
            <div id="khoj-nav-menu-container" class="khoj-nav dropdown">
                {% if user_photo and user_photo != "None" %}
                    {% if is_active %}
                    <img id="profile-picture" class="circle subscribed" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
                    {% else %}
                    <img id="profile-picture" class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
                    {% endif %}
                {% else %}
                    {% if is_active %}
                    <div id="profile-picture" class="circle user-initial subscribed" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
                    {% else %}
                    <div id="profile-picture" class="circle user-initial" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
                    {% endif %}
                {% endif %}
                <div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
                    <div class="khoj-nav-username"> {{ username }} </div>
                    <a id="settings-nav" class="khoj-nav" href="/config">⚙️ Settings</a>
                    <a class="khoj-nav" href="/auth/logout">🔑 Logout</a>
                </div>
            </div>
        </nav>
    </div>
{%- endmacro %}
