## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%>


<header id="global-navigation" class="header-main" >
  <nav class="nav-wrapper" aria-label="${_('Global')}">
    <div class="grid-manual grid-container">
        <div  class="row">
          <div class="col col-6 sm-col-4 md-col-4 lg-col-3 xl-col-3">
            <div class="logo">
              <a href="${marketing_link('ROOT')}">
                <img src="http://placehold.it/190x60" alt="Home Page" />
              </a>
            </div>
          </div>
        <div class="col col-6 sm-col-8 md-col-8 lg-col-6 xl-col-6 pull-right">
          <div class="navbar-collapse">
            <div class="collapsed-button">
              <span></span><span></span><span></span>
            </div>
            <ul class="list-inline">
              % if user.is_authenticated():
                <%
                  username = user.username
                  profile_image_url = get_profile_image_urls_for_user(user)['medium']
                %>
                <li class="user-account">
                  <span class="user-img"><img src="${profile_image_url}" alt=""></span>
                  <span class="user-name">${username}</span>
                  <ul>
                    <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
                    <li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
                    <li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
                    <li><a href="${reverse('logout')}">${_("Sign Out")}</a></li>
                  </ul>
                </li>
              % else:
              <li>
                <a class="btn-brand btn-client" href="/register${login_query()}">${_("Create Account")}</a>
              </li>
              <li>
                <a href="/login${login_query()}" class="brand-link">${_("Sign in")}</a>
              </li>
            % endif
              <li>
                <a href="/courses" class="brand-link">${_("Courses")}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      </nav>
</header>

<script>
  $( ".collapsed-button" ).click(function() {
    $(".navbar-collapse .list-inline").toggleClass("show-menu");
  });

  $(".user-account .user-name").click(function(){
    $(".user-account ul").toggleClass("show-user-menu");
  });


</script>
