<%! import json %>
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%! from student.roles import CourseInstructorRole %>
<%inherit file="base.html" />
<%def name="online_help_token()"><% return "team" %></%def>
<%block name="title">${_("Course Team Settings")}</%block>
<%block name="bodyclass">is-signedin course users view-team</%block>

<%block name="content">

<div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Settings")}</small>
      <span class="sr">&gt; </span>${_("Course Team")}
    </h1>

    <nav class="nav-actions">
      <h3 class="sr">${_("Page Actions")}</h3>
      <ul>
        %if allow_actions:
        <li class="nav-item">
          <a href="#" class="button new-button create-user-button"><i class="icon fa fa-plus"></i> ${_("New Team Member")}</a>
        </li>
        %endif
      </ul>
    </nav>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">
      %if allow_actions:
      <div class="wrapper-create-element animate wrapper-create-user">
        <form class="form-create create-user" id="create-user-form" name="create-user-form">
          <div class="wrapper-form">
            <h3 class="title">${_("Add a User to Your Course's Team")}</h3>

            <fieldset class="form-fields">
              <legend class="sr">${_("New Team Member Information")}</legend>

                <ol class="list-input">
                  <li class="field text required create-user-email">
                    <label for="user-email-input">${_("User's Email Address")}</label>
                    <input id="user-email-input" name="user-email" type="text" placeholder="${_('example: username@domain.com')}" value="">
                    <span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
                  </li>
                </ol>
            </fieldset>
          </div>

          <div class="actions">
            <button class="action action-primary" type="submit">${_("Add User")}</button>
            <button class="action action-secondary action-cancel">${_("Cancel")}</button>
          </div>
        </form>
      </div>
      %endif

      <ol class="user-list">
        % for user in staff:
          <% course_team_url = reverse(
             'contentstore.views.course_team_handler',
             kwargs={'course_key_string': unicode(context_course.id), 'email': user.email}
          )
          %>

        <li class="user-item" data-email="${user.email}" data-url="${course_team_url}">

        <% is_instuctor = CourseInstructorRole(context_course.id).has_user(user) %>
          % if is_instuctor:
          <span class="wrapper-ui-badge">
            <span class="flag flag-role flag-role-admin is-hanging">
              <span class="label sr">${_("Current Role:")}</span>
              <span class="value">
                ${_("Admin")}
                % if request.user.id == user.id:
                    <span class="msg-you">${_("You!")}</span>
                % endif
              </span>
            </span>
          </span>
          % else:
          <span class="wrapper-ui-badge">
            <span class="flag flag-role flag-role-staff is-hanging">
              <span class="label sr">${_("Current Role:")}</span>
              <span class="value">
                ${_("Staff")}
                % if request.user.id == user.id:
                    <span class="msg-you">${_("You!")}</span>
                % endif
              </span>
            </span>
          </span>
          % endif

          <div class="item-metadata">
            <h3 class="user-name">
              <span class="user-username">${user.username}</span>
              <span class="user-email">
                <a class="action action-email" href="mailto:${user.email}" title="${_("send an email message to {email}").format(email=user.email)}">${user.email}</a>
              </span>
            </h3>
          </div>

          % if allow_actions:
          <ul  class="item-actions user-actions">
            <li class="action action-role">
              % if is_instuctor and len(instructors) == 1:
                <span class="admin-role notoggleforyou">${_("Promote another member to Admin to remove your admin rights")}</span>
              % else:
                <a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin Access") if is_instuctor else _("Add Admin Access")}</a>
              % endif
            </li>
            <li class="action action-delete ${"is-disabled" if request.user.id == user.id else ""}" aria-disabled="${'true' if request.user.id == user.id else 'false'}">
                <a href="#" class="delete remove-user action-icon" data-id="${user.email}"><i class="icon fa fa-trash-o"></i><span class="sr">${_("Delete the user, {username}").format(username=user.username)}</span></a>
            </li>
          </ul>
          % endif

        </li>
        % endfor
      </ol>

      <% user_is_instuctor = CourseInstructorRole(context_course.id).has_user(request.user) %>
      % if user_is_instuctor and len(staff) == 1:
      <div class="notice notice-incontext notice-create has-actions">
        <div class="msg">
          <h3 class="title">${_('Add Team Members to This Course')}</h3>
          <div class="copy">
            <p>${_('Adding team members makes course authoring collaborative. Users must be signed up for {studio_name} and have an active account.').format(studio_name=settings.STUDIO_SHORT_NAME)}</p>
          </div>
        </div>

        <ul class="list-actions">
          <li class="action-item">
            <a href="#" class="action action-primary button new-button create-user-button"><i class="icon fa fa-plus icon-inline"></i> ${_('Add a New Team Member')}</a>
          </li>
        </ul>
      </div>
      %endif
    </article>

    <aside class="content-supplementary" role="complementary">
      <div class="bit">
        <h3 class="title-3">${_("Course Team Roles")}</h3>
        <p>${_("Course team members, or staff, are course co-authors. They have full writing and editing privileges on all course content.")}</p>
        <p>${_("Admins are course team members who can add and remove other course team members.")}</p>
      </div>

      % if user_is_instuctor and len(instructors) == 1:
      <div class="bit">
        <h3 class="title-3">${_("Transferring Ownership")}</h3>
        <p>${_("Every course must have an Admin. If you're the Admin and you want transfer ownership of the course, click Add admin access to make another user the Admin, then ask that user to remove you from the Course Team list.")}</p>
      </div>
      % endif
    </aside>
  </section>
</div>
</%block>

<%block name="requirejs">
  require(["js/factories/manage_users"], function(ManageUsersFactory) {
      ManageUsersFactory(${json.dumps([user.email for user in staff])}, "${reverse('contentstore.views.course_team_handler', kwargs={'course_key_string': unicode(context_course.id), 'email': '@@EMAIL@@'})}");
  });
</%block>
