## 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 courseware.tabs import get_course_tab_list %>
<%! from courseware.views import notification_image_for_tab %>
<%! from django.core.urlresolvers import reverse %>
<%! from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_user_partition %>
<%! from student.models import CourseEnrollment %>
<%
  cohorted_user_partition = get_cohorted_user_partition(course.id)
  show_preview_menu = staff_access and active_page in ['courseware', 'info']
  is_student_masquerade = masquerade and masquerade.role == 'student'
  masquerade_group_id = masquerade.group_id if masquerade else None
%>

% if show_preview_menu:
    <nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
        <div class="preview-menu">
            <ol class="preview-actions">
                <li class="action-preview">
                    <form action="#" class="action-preview-form" method="post">
                        <label for="action-preview-select" class="action-preview-label">${_("View this course as:")}</label>
                        <select class="action-preview-select" id="action-preview-select" name="select">
                            <option value="staff" ${"selected" if not is_student_masquerade else ""}>${_("Staff")}</option>
                            <option value="student" ${"selected" if is_student_masquerade and not masquerade_group_id else ""}>${_("Student")}</option>
                            % if cohorted_user_partition:
                                % for group in sorted(cohorted_user_partition.groups, key=lambda group: group.name):
                                <option value="group.id" data-group-id="${group.id}" ${"selected" if masquerade_group_id == group.id else ""}>
                                    ${_("Student in {content_group}").format(content_group=group.name)}
                                </option>
                                % endfor
                            % endif
                        </select>
                        <button type="submit" class="sr" name="submit" value="submit">${_("set preview mode")}</button>
                    </form>
                </li>
            </ol>
        </div>
    </nav>
% endif

% if disable_tabs is UNDEFINED or not disable_tabs:
<nav class="${active_page} wrapper-course-material" aria-label="${_('Course Material')}">
  <div class="course-material">
    <ol class="course-tabs">
      % for tab in get_course_tab_list(course, user):
        <%
            tab_is_active = (tab.tab_id == active_page) or (tab.tab_id == default_tab)
            tab_image = notification_image_for_tab(tab, user, course)
        %>
          <li>
             <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" />
    </ol>
  </div>
</nav>
%endif

% if show_preview_menu:
<script type="text/javascript">
(function() {
    var element = $('.action-preview-select');
    % if disable_student_access:
        element.attr("disabled", true);
        element.attr("title", "${_("Course is not yet visible to students.")}");
    % endif

    element.change(function() {
        var selectedOption, data;
        if (element.attr("disabled")) {
           return alert("${_("You cannot view the course as a student or beta tester before the course release date.")}");
        }
        selectedOption = element.find('option:selected');
        data = {
            role: selectedOption.val() === 'staff' ? 'staff' : 'student',
            user_partition_id: ${cohorted_user_partition.id if cohorted_user_partition else 'null'},
            group_id: selectedOption.data('group-id')
        };
        $.ajax({
            url: '/courses/${course.id}/masquerade',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(result) {
                location.reload();
            },
            error: function() {
                alert('Error: cannot connect to server');
            }
        });
    });
}());
</script>
% endif
