{% load staticfiles i18n%}
{% get_current_language as LANGUAGE_CODE %}
{% load custom_tags %}
<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">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
                  <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
                  <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
                {% else %}
                   <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
                    <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
                {% endif %}

  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
    <ul class="nav navbar-nav navbar-right">
		{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
           <li class="dropdown">
                <a class="dropdown-toggle  visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
                <a class="dropdown-toggle url disabled visible-desktop" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a class="url" data-url="#your"  >{% trans "Scale out" %}</a></li>
				<li><a class="url" data-url="#our">{% trans "Reliable and light" %}</a></li>
				<li> <a class="url" data-url="#price" >{% trans "Order VM" %}</a></li>
			</ul>
           </li>
			<li>
				<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
			</li>
			<li>
				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
			</li>
			{% endif %}
			<li class="nav-language">
				<div class="select-language">
				{% if LANGUAGE_CODE == 'en-us'%}
				<span>English</span>
				{% else %}
				<span>Deutsch</span>
				{% endif %}
				<i class="fa fa-globe" aria-hidden="true"></i>
				</div>
				<div class="drop-language">
				{% if LANGUAGE_CODE == 'en-us'%}
				<a class="url" href="{% change_lang 'de' %}">Deutsch</a>
				{% else %}
				<a class="url" href="{% change_lang 'en-us' %}" >English</a>
				{% endif %}
				</div>

			</li>
        </ul>
  </div><!-- /.navbar-collapse -->
  </div>
  </div>
</nav>