<%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>${_("If you have cohorts enabled in your course, you can use content groups to create cohort-specific courseware. In other words, you can customize the content that particular cohorts see in your course.")}</p>
              <p>${_("Each content group that you create can be associated with one or more cohorts. In addition to course content that is intended for all students, you can designate some content as visible only to specified content groups. Only learners in the cohorts that are associated with the specified content groups see the additional content.")}</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}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.").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 if you are conducting content experiments, also known as A/B testing, in your course. Experiment group configurations 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}. 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.").format(em_start="<strong>", em_end="</strong>")}</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" aria-label="${_('Other Course Settings')}">
          <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>