## mako
<%page args="active_page=None" />

<%
if active_page is None and active_page_context is not UNDEFINED:
  # If active_page is not passed in as an argument, it may be in the context as active_page_context
  active_page = active_page_context

def url_class(is_active):
  if is_active:
    return "active"
  return ""
%>
<%! from courseware.tabs import get_course_tabs %>
<%! from django.utils.translation import ugettext as _ %>
<% import waffle %>

<nav class="${active_page} course-material">
  <div class="inner-wrapper">
    <ol class="course-tabs">
      % for tab in get_course_tabs(user, course, active_page, request):
        % if waffle.flag_is_active(request, 'visual_treatment') or waffle.flag_is_active(request, 'merge_course_tabs'):
          <li class="${"prominent" if tab.name in ("Courseware", "Course Content") else ""}">
        % else:
          <li>
        % endif
             <a href="${tab.link | h}" class="${url_class(tab.is_active)}">
                 ${tab.name | h}
                 % if tab.is_active == True:
                   <span class="sr">, current location</span>
                 %endif
                 % if tab.has_img == True:
                   <img src="${tab.img}"/>
                 %endif
             </a>
          </li>
      % endfor
    <%block name="extratabs" />
        % if masquerade is not UNDEFINED:
          % if staff_access and masquerade is not None:
          <li style="float:right"><a href="#" id="staffstatus">${_("Staff view")}</a></li>
          % endif
        % endif
    </ol>
  </div>
</nav>

% if masquerade is not UNDEFINED:
  % if staff_access and masquerade is not None:
<script type="text/javascript">
masq = (function(){
    var el = $('#staffstatus');
    var setstat = function(status){
        if (status=='student'){
            el.html('<font color="green">${_("Student view")}</font>');
        }else{
            el.html('<font color="red">${_("Staff view")}</font>');
        }
    }
    setstat('${masquerade}');

    el.click(function(){
        $.ajax({ url: '/masquerade/toggle',
                 type: 'GET',
                 success: function(result){
                     setstat(result.status);
                     location.reload();
                 },
                 error: function() {
                     alert('Error: cannot connect to server');
                 }
               });
    });
}() );
</script>
  % endif
% endif
