## mako
<%! from django.utils.translation import ugettext as _ %>
<%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 xmodule.tabs import CourseTabList %>
<%! from courseware.access import has_access %>
<%! from django.conf import settings %>
<%! from django.core.urlresolvers import reverse %>
<%! from django.utils.translation import ugettext as _ %>
<%! from courseware.views import notification_image_for_tab %>
<% import waffle %>

<nav class="${active_page} course-material">
  <div class="inner-wrapper">
    <ol class="course-tabs">
      % for tab in CourseTabList.iterate_displayable(course, settings, user.is_authenticated(), has_access(user, course, 'staff')):
        <%
            tab_is_active = (tab.tab_id == active_page)
            tab_image = notification_image_for_tab(tab, user, course)
        %>
        % if waffle.flag_is_active(request, 'visual_treatment'):
          <li class="${"prominent" if tab.name in ("Courseware", "Course Content") else ""}">
        % else:
          <li>
        % endif
             <a href="${tab.link_func(course, reverse) | h}" class="${url_class(tab_is_active)}">
                 ${_(tab.name) | h}
                 % if tab_is_active:
                   <span class="sr">, current location</span>
                 %endif
                 % if tab_image:
                   ## Translators: 'needs attention' is an alternative string for the
                   ## notification image that indicates the tab "needs attention".
                   <img src="${tab_image}" alt="${_('needs attention')}" />
                 %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
