{% load static i18n custom_tags cms_tags %}
{% get_current_language as LANGUAGE_CODE %}

<nav class="navbar navbar-default navbar-fixed-top topnav navbar-transparent">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dcl-topnav">
      <span class="sr-only">{% trans "Toggle navigation" %}</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    {% if instance.logo_dark or instance.logo_light %}
      <a href="{{ instance.logo_url|default:'/' }}" id="logoBlack" class="navbar-brand"><img src="{{ instance.get_logo_dark }}"></a>
      <a href="{{ instance.logo_url|default:'/' }}" id="logoWhite" class="navbar-brand"><img src="{{ instance.get_logo_light }}"></a>
    {% else %}
      <a href="/" id="logoBlack" class="navbar-brand"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
      <a href="/" id="logoWhite" class="navbar-brand"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
    {% endif %}
  </div>
  <div class="collapse navbar-collapse" id="dcl-topnav">
    <!-- Start Navbar collapse-->
    <ul class="nav navbar-nav navbar-right">
      {% for plugin in instance.child_plugin_instances %}
        <li>
          {% render_plugin plugin %}
        </li>
      {% endfor %}
      {% if instance.language_dropdown %}
        <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>
      {% endif %}
      {% if instance.show_login_option %}
        {% 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 %}
      {% 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>
  </div>
</nav>