<%inherit file="base.html" />
<%def name="content_groups_help_token()"><% return "content_groups" %></%def>
<%def name="experiment_group_configurations_help_token()"><% return "group_configurations" %></%def>
<%namespace name='static' file='static_content.html'/>
<%! import json %>
<%!
  from contentstore import utils
  from django.utils.translation import ugettext as _
%>

<%block name="title">${_("Group Configurations")}</%block>
<%block name="bodyclass">is-signedin course view-group-configurations</%block>

<%block name="header_extras">
% for template_name in ["group-configuration-details", "group-configuration-editor", "group-edit", "content-group-editor", "content-group-details", "basic-modal", "modal-button", "list"]:
  <script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
  </script>
% endfor
</%block>

<%block name="requirejs">
  require(["js/factories/group_configurations"], function(GroupConfigurationsFactory) {
      GroupConfigurationsFactory(${json.dumps(should_show_experiment_groups)}, ${json.dumps(experiment_group_configurations)}, ${json.dumps(content_group_configuration)}, "${group_configuration_url}", "${course_outline_url}");
  });
</%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>${_("Group Configurations")}
      </h1>
    </header>
  </div>

  <div class="wrapper-content wrapper">
    <section class="content">
      <article class="content-primary" role="main">
        <div class="wrapper-groups content-groups">
          <h3 class="title">${_("Content Groups")}</h3>
            <div class="ui-loading">
                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
            </div>
        </div>

      % if should_show_experiment_groups:
        <div class="wrapper-groups experiment-groups">
          <h3 class="title">${_("Experiment Group Configurations")}</h3>
          % if experiment_group_configurations is None:
            <div class="notice notice-incontext notice-moduledisabled">
                <p class="copy">
                    ${_("This module is disabled at the moment.")}
                </p>
            </div>
          % else:
            <div class="ui-loading">
                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
            </div>
          % endif
        </div>
      % endif
      </article>
      <aside class="content-supplementary" role="complementary">
        <div class="bit">
          <div class="content-groups-doc">
              <h3 class="title-3">${_("Content Groups")}</h3>
              <p>${_("Use content groups to give groups of students access to a specific set of course content. In addition to course content that is intended for all students, each content group sees content that you specifically designate as visible to it. By associating a content group with one or more cohorts, you can customize the content that a particular cohort or cohorts sees in your course.")}</p>
              <p>${_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. Content groups cannot be deleted.").format(em_start="<strong>", em_end="</strong>")}</p>
              <p><a href="${get_online_help_info(content_groups_help_token())['doc_url']}" target="_blank" class="button external-help-button">${_("Learn More")}</a></p>
          </div>
        </div>
      % if should_show_experiment_groups:
        <div class="bit">
          <div class="experiment-groups-doc">
            <h3 class="title-3">${_("Experiment Group Configurations")}</h3>
            <p>${_("Use experiment group configurations to define how many groups of students are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.")}</p>
            <p>${_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}.").format(em_start="<strong>", em_end="</strong>")}</p>
            <p>${_("You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.")}</p>
            <p><a href="${get_online_help_info(experiment_group_configurations_help_token())['doc_url']}" target="_blank" class="button external-help-button">${_("Learn More")}</a></p>
          </div>
        </div>
      % endif
      <div class="bit">
      % if context_course:
        <%
          details_url = utils.reverse_course_url('settings_handler', context_course.id)
          grading_url = utils.reverse_course_url('grading_handler', context_course.id)
          course_team_url = utils.reverse_course_url('course_team_handler', context_course.id)
          advanced_settings_url = utils.reverse_course_url('advanced_settings_handler', context_course.id)
        %>
      <h3 class="title-3">${_("Other Course Settings")}</h3>
        <nav class="nav-related">
          <ul>
            <li class="nav-item"><a href="${details_url}">${_("Details &amp; Schedule")}</a></li>
            <li class="nav-item"><a href="${grading_url}">${_("Grading")}</a></li>
            <li class="nav-item"><a href="${course_team_url}">${_("Course Team")}</a></li>
            <li class="nav-item"><a href="${advanced_settings_url}">${_("Advanced Settings")}</a></li>
          </ul>
        </nav>
      % endif
      </div>
      </aside>
    </section>
  </div>
</%block>
