<%page args="section_data"/>

<script type="text/template" id="member-list-widget-template">
  <div class="member-list-widget">
    <div class="header">
      <div class="title"> {{title}} </div>
      <div class="info-badge"></div>
    </div>
    <div class="info"> {{info}} </div>
    <div class="member-list">
      <table>
        <thead>
          <tr>
            {{#labels}}
              <td class="label">{{.}}</td>
            {{/labels}}
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="bottom-bar">
      <input type="text" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
      <input type="button" name="add" class="add" value="{{add_btn_label}}">
    </div>
  </div>
</script>

<div class="vert-left batch-enrollment">
  <h2>Batch Enrollment</h2>
  <p>Enter student emails separated by new lines or commas.</p>
  <textarea rows="6" cols="50" name="student-emails" placeholder="Student Emails" spellcheck="false"></textarea>
  <br>
  <input type="button" name="enroll" value="Enroll" data-endpoint="${ section_data['enroll_button_url'] }" >
  <input type="button" name="unenroll" value="Unenroll" data-endpoint="${ section_data['unenroll_button_url'] }" >
  <input type="checkbox" name="auto-enroll" value="Auto-Enroll" style="margin-top: 1em;">
  <label for="auto-enroll">Auto Enroll</label>
  <div class="auto-enroll-hint">
    <p> If auto enroll is <span class="emph">checked</span>, students who have not yet registered for edX will be automatically enrolled.
        If auto enroll is left <span class="emph">unchecked</span>, students who have not yet registered for edX will not be enrolled,
        but will be allowed to enroll.
    </p>
  </div>
  <div class="request-response"></div>
  <div class="request-response-error"></div>
</div>

<div class="vert-right member-lists-management">
  <h2> Administration List Management </h2>

  <select id="member-lists-selector">
    <option> Getting available lists... </option>
  </select>

  <div class="request-response-error"></div>

  %if section_data['access']['instructor']:
    <div class="auth-list-container"
      data-rolename="staff"
      data-display-name="Course Staff"
      data-info-text="
        Course staff can help you manage limited aspects of your course. Staff can
        enroll and unenroll students, as well as modify their grades and see all
        course data. Course staff are not given access to Studio will not be able to
        edit your course."
      data-list-endpoint="${ section_data['list_course_role_members_url'] }"
      data-modify-endpoint="${ section_data['modify_access_url'] }"
      data-add-button-label="Add Staff"
    ></div>

    %if section_data['access']['instructor']:
      <div class="auth-list-container"
        data-rolename="instructor"
        data-display-name="Instructors"
        data-info-text="
          Instructors are the core administration of your course. Instructors can
          add and remove course staff, as well as administer forum access.
          "
        data-list-endpoint="${ section_data['list_course_role_members_url'] }"
        data-modify-endpoint="${ section_data['modify_access_url'] }"
        data-add-button-label="Add Instructor"
      ></div>
    %endif

    <div class="auth-list-container"
      data-rolename="beta"
      data-display-name="Beta Testers"
      data-info-text="
        Beta testers can see course content before the rest of the students.
        They can make sure that the content works, but have no additional
        privelages."
      data-list-endpoint="${ section_data['list_course_role_members_url'] }"
      data-modify-endpoint="${ section_data['modify_access_url'] }"
      data-add-button-label="Add Beta Tester"
    ></div>
  %endif

  %if section_data['access']['instructor']:
      <div class="auth-list-container"
        data-rolename="Administrator"
        data-display-name="Forum Admins"
        data-list-endpoint="${ section_data['list_forum_members_url'] }"
        data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
        data-add-button-label="Add Forum Admin"
      ></div>
  %endif

  %if section_data['access']['instructor'] or section_data['access']['forum_admin']:
    <div class="auth-list-container"
      data-rolename="Moderator"
      data-display-name="Forum Moderators"
      data-list-endpoint="${ section_data['list_forum_members_url'] }"
      data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
      data-add-button-label="Add Moderator"
    ></div>

    <div class="auth-list-container"
      data-rolename="Community TA"
      data-display-name="Forum Community TAs"
      data-list-endpoint="${ section_data['list_forum_members_url'] }"
      data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
      data-add-button-label="Add Community TA"
    ></div>
  %endif

</div>
