{% from 'macros/docs_link.html' import docs_url %}
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
     id="layout-navbar">
    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
        <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
            <i class="bx bx-menu bx-md"></i>
        </a>
    </div>
    <div class="navbar-collapse collapse navbar-nav-right d-flex align-items-center"
         id="navbar-collapse">
        <!-- Buttons -->
        {% if current_endpoint == 'instances' %}
            {% set documentation_endpoint = "/integrations" %}
        {% elif current_endpoint == 'global-config' or current_endpoint == 'global-settings' or 'services' in request.path %}
            {% set documentation_endpoint = "/features" %}
        {% elif current_endpoint == 'configs' %}
            {% set documentation_endpoint = "/concepts" %}
            {% set documentation_fragment = "#custom-configurations" %}
        {% elif 'templates' in request.path %}
            {% set documentation_endpoint = "/concepts" %}
            {% set documentation_fragment = "#templates" %}
        {% elif 'plugins' in request.path %}
            {% set documentation_endpoint = "/plugins" %}
        {% elif current_endpoint == 'cache' %}
            {% set documentation_endpoint = "/concepts" %}
            {% set documentation_fragment = "#database" %}
        {% elif current_endpoint == 'reports' or current_endpoint == 'bans' %}
            {% set documentation_endpoint = "/advanced" %}
            {% set documentation_fragment = "#persistence-of-bans-and-reports" %}
        {% elif current_endpoint == 'jobs' %}
            {% set documentation_endpoint = "/concepts" %}
            {% set documentation_fragment = "#scheduler" %}
        {% elif current_endpoint == 'logs' %}
            {% set documentation_endpoint = "/web-ui" %}
            {% set documentation_fragment = "#accessing-logs" %}
        {% elif current_endpoint == 'pro' %}
            {% set documentation_endpoint = "/professional-services" %}
        {% elif current_endpoint == 'support' %}
            {% set documentation_endpoint = "/troubleshooting" %}
        {% elif current_endpoint == 'about' %}
            {% set documentation_endpoint = "/about" %}
        {% endif %}
        <div class="d-none d-md-inline navbar-nav align-items-center">
            <div class="nav-item d-flex align-items-center">
                <a id="documentation-link"
                   role="button"
                   class="btn btn-text-secondary p-1 p-md-2 docs-link"
                   aria-pressed="true"
                   href="{{ docs_url(documentation_endpoint, documentation_fragment) }}"
                   target="_blank"
                   rel="noopener"
                   data-endpoint="{{ documentation_endpoint }}"
                   data-fragment="{{ documentation_fragment or '' }}">
                    <span class="tf-icons bx bx-file me-md-2"></span>
                    <span class="d-none d-lg-inline" data-i18n="navbar.link.documentation">Documentation</span>
                </a>
                <a role="button"
                   class="btn btn-outline-github p-1 p-md-2 ms-1 ms-md-2"
                   aria-pressed="true"
                   href="https://github.com/bunkerity/bunkerweb/?utm_campaign=self&utm_source=ui"
                   target="_blank"
                   rel="noreferrer">
                    <i class="tf-icons bx bxl-github me-md-2"></i>
                    <span class="d-none d-lg-inline">Github</span>
                </a>
                <a role="button"
                   class="btn btn-outline-discord p-1 p-md-2 ms-1 ms-md-2"
                   aria-pressed="true"
                   href="https://discord.bunkerity.com/?utm_campaign=self&utm_source=ui"
                   target="_blank"
                   rel="noopener">
                    <i class="tf-icons bx bxl-discord me-md-2"></i>
                    <span class="d-none d-lg-inline">Discord</span>
                </a>
            </div>
        </div>
        <!-- /Buttons -->
        <ul class="navbar-nav flex-row align-items-center ms-auto">
            {% if not is_pro_version %}
                <li class="nav-item lh-1 me-4">
                    <div class="buy-now courier-prime">
                        <a class="btn btn-responsive btn-buy-now"
                           role="button"
                           aria-pressed="true"
                           href="https://panel.bunkerweb.io/store/bunkerweb-pro?utm_campaign=self&utm_source=ui"
                           target="_blank"
                           rel="noopener">
                            <span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
                                <img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
                                     alt="Pro plugin"
                                     width="18px"
                                     height="15.5px">
                            </span>
                            <span data-i18n="navbar.button.upgrade_to_pro">Upgrade to PRO</span></a>
                    </div>
                </li>
            {% endif %}
            <!-- Stars -->
            <li class="d-none d-md-inline nav-item lh-1 me-4">
                <a class="github-button"
                   href="https://github.com/bunkerity/bunkerweb"
                   data-icon="octicon-star"
                   data-size="large"
                   data-show-count="true"
                   aria-label="Star bunkerity/bunkerweb on GitHub"
                   data-i18n="button.github_stars">Stars</a>
            </li>
            <!--/ Stars -->
            <!-- Version -->
            <li class="nav-item lh-1 me-2 me-md-4">
                <a role="button"
                   class="btn btn-sm btn-outline-{% if current_user.theme == 'light' %}dark{% else %}light{% endif %} px-2 px-md-3 position-relative"
                   aria-pressed="true"
                   href="https://github.com/bunkerity/bunkerweb/releases/latest"
                   target="_blank"
                   rel="noreferrer"
                   data-bs-toggle="tooltip"
                   data-bs-placement="bottom"
                   data-bs-original-title="..."
                   data-i18n="{% if new_version_available %}tooltip.new_version_available{% else %}tooltip.latest_version_installed{% endif %}">
                    <span data-i18n="navbar.version">Version</span>: {{ bw_version }}
                    <span class="badge-dot position-absolute top-0 start-100 translate-middle bg-{% if new_version_available %}danger{% else %}success{% endif %} border border-light rounded-circle">
                        <span class="visually-hidden" data-i18n="badge.new_version">New version</span>
                    </span>
                </a>
            </li>
            <!--/ Version -->
            <!-- User -->
            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                <a class="nav-link dropdown-toggle hide-arrow p-0 d-flex align-items-center"
                   href="javascript:void(0);"
                   data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                        <img src="{{ avatar_url }}"
                             alt="User Avatar"
                             class="w-px-40 h-auto rounded-circle" />
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="{{ url_for('profile') }}">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-2 me-md-3">
                                    <div class="avatar avatar-online">
                                        <img src="{{ avatar_url }}"
                                             alt="User Avatar"
                                             class="w-px-40 h-auto rounded-circle" />
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 text-truncate">{{ current_user.get_id() |title }}</h6>
                                    <small class="text-muted text-truncate">{{ current_user.list_roles[0] }}</small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="dropdown-divider my-1"></div>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center"
                           href="{{ url_for('logout') }}">
                            <i class="bx bx-power-off bx-sm me-2"></i><span data-i18n="navbar.dropdown.logout">Log Out</span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--/ User -->
        </ul>
    </div>
</nav>
<!-- / Navbar -->