<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow" data-bs-theme="light">
    <!-- First Line -->

<a class="navbar-brand" href="https://app.hadox.mx/" style="margin-left: 20px;">
    <img src="https://app.polisplexity.tech/media/images/logos/logo_U4MX.png" alt="Polisplexity Logo" style="height: 40px;"></a>

<!-- Toggler Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

        <!-- Navbar Collapse -->
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <!-- Add other items here -->
                <!--<form class="d-flex" role="search">-->
                <!--    <input class="form-control me-2" type="search" placeholder="Search " aria-label="Search">-->
                <!--    <button class="btn btn-outline-success" type="submit">Search</button>-->
                <!--</form>-->
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Soporte</a></li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="material-symbols-outlined">notifications</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="material-symbols-outlined">help</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="material-symbols-outlined">more_vert</span></a>
                </li>

                <div class="btn-group dropstart">
                    <a class="nav-link dropdown-toggle d-flex align-items-center" role="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        <span class="material-symbols-outlined">account_circle</span>
                    </a>
                    <ul class="dropdown-menu">
                        {% if user.is_authenticated %}
                            <li><a id="logoutOption" class="dropdown-item" href="https://app.hadox.mx/accounts/logout/" style="display: block;">Logout</a></li>
                        {% else %}
                        <li><a id="Logins" class="dropdown-item" href="https://neurolitiks.tech/login">Login</a></li>
                        <li><a id="Register" class="dropdown-item" href="https://neurolitiks.tech/register">Registro</a></li>
                        {% endif %}
                        <!--<li><a class="dropdown-item" href="https://hadox.org" target="_blank" rel="noopener noreferrer">Hadox Labs</a></li>-->
                        <!--<li><a class="dropdown-item" href="https://chat.openai.com/g/g-ehYhF1lc8-hadox-agent" target="_blank" rel="noopener noreferrer">Hadox GPT</a></li>-->
                        <!-- Logout Option - Visible only if authenticated -->

                        <!-- Guest Option - Visible only if not authenticated -->
                        <!-- You can add elements here that should only be visible for guests -->
                    </ul>
                </div>
            </ul>
        </div>

</nav>

