{% load staticfiles i18n%}
{% load custom_tags %}
{% get_current_language as LANGUAGE_CODE %}
<nav class="navbar navbar-default navbar-fixed-top topnav">
    <div class="topnav">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">{% trans "Toggle navigation" %}</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
            <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- Start Navbar collapse-->
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown highlights-dropdown">
                    <a class="dropdown-toggle url-init" href="{% url 'datacenterlight:index' %}#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}&nbsp;<span class="caret"></span></a>
                    <ul class="dropdown-menu ">
                        <li><a class="url-init" href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a></li>
                        <li><a class="url-init" href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a></li>
                        <li> <a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Order VM" %}</a></li>
                    </ul>
                </li>
                <li>
                    <a href="{% url 'datacenterlight:whydatacenterlight' %}">{% trans "Why Data Center Light?" %}</a>
                </li>
                <li>
                    <a class="url-init" href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
                </li>
                <li>
                    {% if LANGUAGE_CODE == 'en-us'%}
                    <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a> {% else %}
                    <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a> {% endif %}
                </li>
                {% if not request.user.is_authenticated %}
                    <li>
                        <a href="{% url 'hosting:login' %}">{% trans "Login" %}&nbsp;&nbsp;<span class="fa fa-sign-in"></span></a>
                    </li>
                {% else %}
                    <li>
                        <a href="{% url 'hosting:dashboard' %}">{% trans "Dashboard" %}</a>
                    </li>
                {% endif %}
                {% comment %}
                <!-- to be used when more than one option for language -->
                <li class="nav-language">
                    <div class="dropdown">
                        <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            {% if LANGUAGE_CODE == 'en-us'%}
                            <span>English</span> {% else %}
                            <span>Deutsch</span> {% endif %}
                            <i class="fa fa-globe" aria-hidden="true"></i>
                        </div>
                        <ul class="dropdown-menu drop-language dropdown-menu-right">
                            {% if LANGUAGE_CODE == 'en-us'%}
                            <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
                            {% else %}
                            <li><a class="url" href="{% change_lang 'en-us' %}">English</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </li>
                {% endcomment %}
            </ul>
            <!-- /.navbar-collapse -->
        </div>
</nav>
