<%inherit file="base.html" />
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse

from openedx.core.djangolib.js_utils import (
    dump_js_escaped_json, js_escaped_string
)
%>
<%def name="online_help_token()"><% return "team_library" %></%def>
<%block name="title">${_("Library User Access")}</%block>
<%block name="bodyclass">is-signedin course users view-team</%block>
<%namespace name='static' file='static_content.html'/>

<%block name="header_extras">
<script type="text/template" id="team-member-tpl">
    <%static:include path="js/team-member.underscore" />
</script>
</%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>${_("User Access")}
    </h1>

    <nav class="nav-actions" aria-label="${_('Page Actions')}">
      <h3 class="sr">${_("Page Actions")}</h3>
      <ul>
        %if allow_actions:
        <li class="nav-item">
          <a href="#" class="button new-button create-user-button"><span class="icon fa fa-plus" aria-hidden="true"></span> ${_("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">${_("Grant Access to This Library")}</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" class="user-email-input" name="user-email" type="text" placeholder="${_('example: username@domain.com')}" value="">
                    <span class="tip tip-stacked">${_("Provide the email address of the user you want 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" id="user-list">
        <div class="ui-loading">
          <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
        </div>
      </ol>

      % if allow_actions and len(users) == 1:
      <div class="notice notice-incontext notice-create has-actions">
        <div class="msg">
          <h3 class="title">${_('Add More Users to This Library')}</h3>
          <div class="copy">
            <p>${_('Grant other members of your course team access to this library. New library users must have an active {studio_name} 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"><span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> ${_('Add a New User')}</a>
          </li>
        </ul>
      </div>
      %endif
    </article>

    <aside class="content-supplementary" role="complementary">
      <div class="bit">
        <h3 class="title-3">${_("Library Access Roles")}</h3>
        <p>${_("There are three access roles for libraries: User, Staff, and Admin.")}</p>
        <p>${_("Library Users can view library content and can reference or use library components in their courses, but they cannot edit the contents of a library.")}</p>
        <p>${_("Library Staff are content co-authors. They have full editing privileges on the contents of a library.")}</p>
        <p>${_("Library Admins have full editing privileges and can also add and remove other team members. There must be at least one user with the Admin role in a library.")}</p>
      </div>
    </aside>
  </section>
</div>
</%block>

<%block name="requirejs">
  require(["js/factories/manage_users_lib"], function(ManageLibraryUsersFactory) {
      ManageLibraryUsersFactory(
        "${context_library.display_name_with_default | h}",
        ${users | n, dump_js_escaped_json},
        "${reverse('contentstore.views.course_team_handler', kwargs={'course_key_string': library_key, 'email': '@@EMAIL@@'}) | n, js_escaped_string}",
        ${request.user.id | n, dump_js_escaped_json},
        ${allow_actions | n, dump_js_escaped_json}
      );
  });
</%block>