{% 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?v={{ khoj_version }}" alt="Khoj"></img>
        </a>
        <nav class="khoj-nav">
            <a id="chat-nav" class="khoj-nav" href="/chat">
                <img class="nav-icon" src="/static/assets/icons/chat.svg" alt="Chat">
                <span class="khoj-nav-item-text">Chat</span></a>
            <a id="agents-nav" class="khoj-nav" href="/agents">
                <img id="agents-icon" class="nav-icon" src="/static/assets/icons/agents.svg" alt="Agents">
                <span class="khoj-nav-item-text">Agents</span></a>
            <a id="automations-nav" class="khoj-nav" href="/automations">
                <img class="nav-icon" src="/static/assets/icons/automation.svg" alt="Automation">
                <span class="khoj-nav-item-text">Automate</span></a>
            {% if has_documents %}
            <a id="search-nav" class="khoj-nav" href="/search">
                <img class="nav-icon" src="/static/assets/icons/search.svg" alt="Search">
                <span class="khoj-nav-item-text">Search</span></a>
            {% endif %}
            <!-- Dropdown Menu -->
            {% if username %}
                <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="/settings">Settings</a>
                        <a id="github-nav" class="khoj-nav" href="https://github.com/khoj-ai/khoj">GitHub</a>
                        <a id="help-nav" class="khoj-nav" href="https://docs.khoj.dev" target="_blank">Help</a>
                        <a class="khoj-nav" href="/auth/logout">Logout</a>
                    </div>
                </div>
            {% endif %}
        </nav>
    </div>
{%- endmacro %}
