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

<header id="header" class="{% if transparent_header %} bg-transparent header-text-light{% endif %}">
  <div class="container">
    <div class="header-row">
      <div class="header-column justify-content-start"> 
        <!-- Logo
        ============================= -->
        <div class="logo"> <a class="d-flex" href="{% url 'matrix:index' %}" title="MatrixHosting"><img src="{% if transparent_header %}{% static 'matrixhosting/images/logo-light.png' %}{%else%}{% static 'matrixhosting/images/logo.png' %}{% endif %}" alt="MatrixHosting" /></a> </div>
        <!-- Logo end --> 
        <!-- Collapse Button
        ============================== -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-nav"> <span></span> <span></span> <span></span> </button>
        <!-- Collapse Button end --> 
        
        <!-- Primary Navigation
        ============================== -->
        {% url 'matrix:index' as index_url %}
        {% url 'matrix:orders' as orders_url %}
        {% url 'matrix:instances' as instances_url %}
        {% url 'uncloud_pay:billing' as payments_url %}
        {% url 'matrix:pricing' as pricing_url %}
        <nav class="primary-menu navbar navbar-expand-lg">
          <div id="header-nav" class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
              <li class="{% if request.path == index_url %}active{%endif%}"><a href="{{index_url}}">{%trans "Home" %}</a></li>
              {% if not request.user.is_authenticated %}
              <li class="{% if pricing_url in request.path %}active{%endif%}" ><a href="{% url 'matrix:pricing' %}">{%trans "Pricing" %}</a></li>
              <li><a href="">{%trans "Contact Us" %}</a></li>
              {% else %}
              <li class="{% if orders_url in request.path %}active{%endif%}"><a href="{{orders_url}}">{%trans "Orders" %}</a></li>
              <li class="{% if instances_url in request.path %}active{%endif%}"><a href="{{instances_url}}">{%trans "Instances" %}</a></li>
              <li class="{% if payments_url in request.path %}active{%endif%}"><a href="{{payments_url}}">{%trans "Billing" %}</a></li>
              <li><a href="">{%trans "Help" %}</a></li>
              {% endif %}
            </ul>   
          </div>
        </nav>
        <!-- Primary Navigation end --> 
      </div>
      <div class="header-column justify-content-end"> 
        <nav class="login-signup navbar navbar-expand">
          {% if not request.user.is_authenticated %}
            <ul class="navbar-nav">
              <li><a href="{% url 'account_login' %}">Login</a> </li>
              <li class="align-items-center h-auto ml-sm-3"><a class="btn btn-primary" href="{% url 'account_signup' %}">Sign Up</a></li>
            </ul>
          {% else %}
          <ul class="navbar-nav">
            <li class="dropdown language"> <a class="dropdown-toggle" href="#">En</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">English</a></li>
                <li><a class="dropdown-item" href="#">French</a></li>
              </ul>
            </li>
            <li class="dropdown notifications active"> <a class="dropdown-toggle" href="#"><span class="text-5"><i class="far fa-bell"></i></span><span class="count">3</span></a>
              <ul class="dropdown-menu">
                <li class="text-center text-3 py-2">Notifications (3)</li>
                <li class="dropdown-divider mx-n3"></li>
                <li><a class="dropdown-item" href="#"><i class="fas fa-bell"></i>Your order #123 has been successfully added<span class="text-1 text-muted d-block">22 Jul 2020</span></a></li>
                <li><a class="dropdown-item" href="#"><i class="fas fa-bell"></i>You don't have enough balance for renewal upload to your account<span class="text-1 text-muted d-block">04 March 2020</span></a></li>
                <li><a class="dropdown-item" href="#"><i class="fas fa-bell"></i>A payment with 50/CHF has been successfully added to your account<span class="text-1 text-muted d-block">18 Feb 2020</span></a></li>
                <li class="dropdown-divider mx-n3"></li>
                <li><a class="dropdown-item text-center text-primary px-0" href="">See all Notifications</a></li>
              </ul>
            </li>
            <li class="dropdown profile ml-2"> <a class="px-2 dropdown-toggle" href="#"><span class="text-5"><i class="far fa-user"></i></span></a>
              <ul class="dropdown-menu">
                <li class="text-center text-3 py-2">Hi, {{request.user.username}}</li>
                <li class="dropdown-divider mx-n3"></li>
                <li><a class="dropdown-item" href=""><i class="fas fa-user"></i>{%trans "My Profile" %}</a></li>
                <li><a class="dropdown-item" href="{% url 'matrix:orders' %}"><i class="fas fa-shopping-cart"></i>{%trans "Orders" %}</a></li>
                <li><a class="dropdown-item" href="{% url 'uncloud_pay:billing' %}"><i class="fas fa-file-invoice"></i>{%trans "Billing" %}</a></li>
                <li><a class="dropdown-item" href="{% url 'matrix:instances' %}"><i class="fas fa-cloud"></i>{%trans "Instances" %}</a></li>
                <li class="dropdown-divider mx-n3"></li>
                <li><a class="dropdown-item" href=""><i class="fas fa-life-ring"></i>Need Help?</a></li>
                <li><a class="dropdown-item" href="{% url 'account_logout' %}"><i class="fas fa-sign-out-alt"></i>Sign Out</a></li>
              </ul>
            </li>
          </ul>
          {% endif %}
        </nav>
      </div>
    </div>
  </div>
</header>
<!-- Header End --> 