<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%! from auth.authz import is_user_in_course_group_role %>
<%! import json %>
<%inherit file="base.html" />
<%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-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="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="${_('e.g. jane.doe@gmail.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:
          <% api_url = reverse('course_team_user', kwargs=dict(
               org=context_course.location.org,
               course=context_course.location.course,
               name=context_course.location.name,
               email=user.email,
             ))
          %>
        <li class="user-item" data-email="${user.email}" data-url="${api_url}">

        <% is_instuctor = is_user_in_course_group_role(user, context_course.location, 'instructor', check_staff=False) %>
          % 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 ""}">
                <a href="#" class="delete remove-user action-icon" data-id="${user.email}"><i class="icon-trash"></i><span class="sr">${_("Delete the user, {username}").format(username=user.username)}</span></a>
            </li>
          </ul>
          % endif

        </li>
        % endfor
      </ol>

      <% user_is_instuctor = is_user_in_course_group_role(request.user, context_course.location, 'instructor', check_staff=False) %>
      % 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 and have an active account. ')}</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-plus icon-inline"></i> ${_('Add a New Team Member')}</a>
          </li>
        </ul>
      </div>
      %endif
    </article>

    <aside class="content-supplementary" role="complimentary">
      <div class="bit">
        <h3 class="title-3">${_("About Roles within Your Course Team")}</h3>
        <p>${_("Course team members are co-authors (staff). They have full access to all the content in the course and all the same editing privileges. Admins have the unique ability to add and remove course team members.")}</p>
      </div>

      % if user_is_instuctor and len(instructors) == 1:
      <div class="bit">
        <h3 class="title-3">${_("Tranferring Ownership")}</h3>
        <p>${_("There must always be an Admin assigned to every course. To transfer your ownership of the course, add Admin access to another user and request they remove you from the Course Team list.")}</p>
      </div>
      % endif
    </aside>
  </section>
</div>
</%block>

<%block name="jsextra">
<script type="text/javascript">
require(["jquery", "underscore", "gettext", "js/views/feedback_prompt"],
    function($, _, gettext, PromptView) {

  var staffEmails = ${json.dumps([user.email for user in staff])};
  var tplUserURL = "${reverse('course_team_user', kwargs=dict(
      org=context_course.location.org,
      course=context_course.location.course,
      name=context_course.location.name,
      email="@@EMAIL@@",
    ))}";
  var unknownErrorMessage = gettext("Unknown")

  $(document).ready(function() {
    var $createUserForm = $('#create-user-form');
    var $createUserFormWrapper = $createUserForm.closest('.wrapper-create-user');
    $createUserForm.bind('submit', function(e) {
      e.preventDefault();
      var email = $('#user-email-input').val().trim();
      if(!email) {
        var msg = new PromptView.Error({
          title: gettext("A valid email address is required"),
          message: gettext("You must enter a valid email address in order to add a new team member"),
          actions: {
            primary: {
              text: gettext("Return and add email address"),
              click: function(view) {
                view.hide();
                $("#user-email-input").focus();
              }
            }
          }
        })
        msg.show();
        return;
      }
      if(_.contains(staffEmails, email)) {
        var msg = new PromptView.Warning({
          title: gettext("Already a course team member"),
          message: _.template(gettext("{email} is already on the “{course}” team. If you're trying to add a new member, please double-check the email address you provided."), {email: email, course: course.escape('name')}, {interpolate: /\{(.+?)\}/g}),
          actions: {
            primary: {
              text: gettext("Return to team listing"),
              click: function(view) {
                view.hide();
                $("#user-email-input").focus();
              }
            }
          }
        })
        msg.show();
        return;
      }
      var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim())
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          role: 'staff',
        }),
        success: function(data) {
          location.reload();
        },
        notifyOnError: false,
        error: function(jqXHR, textStatus, errorThrown) {
          var message;
          try {
            message = JSON.parse(jqXHR.responseText).error || unknownErrorMessage;
          } catch (e) {
            message = unknownErrorMessage
          }
          var prompt = new PromptView.Error({
            title: gettext("Error adding user"),
            message: message,
            actions: {
              primary: {
                text: gettext("OK"),
                click: function(view) {
                  view.hide();
                  $("#user-email-input").focus()
                }
              }
            }
          })
          prompt.show();
        }
      });
    });

    var $cancelButton = $createUserForm.find('.action-cancel');
    $cancelButton.bind('click', function(e) {
      e.preventDefault();
      $('.create-user-button').toggleClass('is-disabled');
      $createUserFormWrapper.toggleClass('is-shown');
      $('#user-email-input').val('');
    });

    $('.create-user-button').bind('click', function(e) {
      e.preventDefault();
      $('.create-user-button').toggleClass('is-disabled');
      $createUserFormWrapper.toggleClass('is-shown');
      $createUserForm.find('#user-email-input').focus();
    });

    $('body').bind('keyup', function(e) {
      if(e.which == 27) {
        $cancelButton.click();
      }
    });

    $('.remove-user').click(function() {
      var email = $(this).data('id');
      var msg = new PromptView.Warning({
        title: gettext("Are you sure?"),
        message: _.template(gettext("Are you sure you want to delete {email} from the course team for “{course}”?"), {email: email, course: course.get('name')}, {interpolate: /\{(.+?)\}/g}),
        actions: {
          primary: {
            text: gettext("Delete"),
            click: function(view) {
              view.hide();
              var url = tplUserURL.replace("@@EMAIL@@", email)
              $.ajax({
                url: url,
                type: 'DELETE',
                dataType: 'json',
                contentType: 'application/json',
                success: function(data) {
                  location.reload();
                },
                notifyOnError: false,
                error: function(jqXHR, textStatus, errorThrown) {
                  var message;
                  try {
                    message = JSON.parse(jqXHR.responseText).error || unknownErrorMessage;
                  } catch (e) {
                    message = unknownErrorMessage;
                  }
                  var prompt = new PromptView.Error({
                    title: gettext("Error removing user"),
                    message: message,
                    actions: {
                      primary: {
                        text: gettext("OK"),
                        click: function(view) {
                          view.hide();
                        }
                      }
                    }
                  })
                  prompt.show();
                }
              });
            }
          },
          secondary: {
            text: gettext("Cancel"),
            click: function(view) {
              view.hide();
            }
          }
        }
      });
      msg.show();
    });

    $(".toggle-admin-role").click(function(e) {
      e.preventDefault()
      var type;
      if($(this).hasClass("add-admin-role")) {
        role = 'instructor';
      } else {
        role = 'staff';
      }
      var url = $(this).closest("li[data-url]").data("url");
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          role: role
        }),
        success: function(data) {
          location.reload();
        },
        notifyOnError: false,
        error: function(jqXHR, textStatus, errorThrown) {
          var message;
          try {
            message = JSON.parse(jqXHR.responseText).error || unknownErrorMessage;
          } catch (e) {
            message = unknownErrorMessage;
          }
          var prompt = new PromptView.Error({
            title: gettext("There was an error changing the user's role"),
            message: message,
            actions: {
              primary: {
                text: gettext("Try Again"),
                click: function(view) {
                  view.hide();
                }
              }
            }
          })
          prompt.show();
        }
      })
    })

  });
});
</script>
</%block>