<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>
<%!
  from django.core.urlresolvers import reverse
  from django.utils.translation import ugettext as _
  from contentstore import utils
  from xmodule.modulestore.django import loc_mapper
  from django.core.urlresolvers import reverse
%>
<%block name="title">${_("Advanced Settings")}</%block>
<%block name="bodyclass">is-signedin course advanced view-settings</%block>

<%block name="jsextra">
% for template_name in ["advanced_entry"]:
  <script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
  </script>
% endfor

<script type="text/javascript">
require(["domReady!", "jquery", "js/models/settings/advanced", "js/views/settings/advanced"],
        function(doc, $, AdvancedSettingsModel, AdvancedSettingsView) {
  $("form :input").focus(function() {
    $("label[for='" + this.id + "']").addClass("is-focused");
  }).blur(function() {
    $("label").removeClass("is-focused");
  });

  // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
  var advancedModel = new AdvancedSettingsModel(${advanced_dict | n}, {parse: true});
  advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";

  var editor = new AdvancedSettingsView({
    el: $('.settings-advanced'),
    model: advancedModel
  });
  editor.render();
});

</script>
</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Settings")}</small>
      <span class="sr">&gt; </span>${_("Advanced Settings")}
    </h1>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">
      <form id="settings_advanced" class="settings-advanced" method="post" action="">

        <div class="message message-status confirm">
          ${_("Your policy changes have been saved.")}
        </div>

        <div class="message message-status error">
          ${_("There was an error saving your information. Please see below.")}
        </div>

        <section class="group-settings advanced-policies">
          <header>
            <h2 class="title-2">${_("Manual Policy Definition")}</h2>
            <span class="tip">${_("Manually Edit Course Policy Values (JSON Key / Value pairs)")}</span>
          </header>

          <p class="instructions">${_("<strong>Warning</strong>: Do not modify these policies unless you are familiar with their purpose.")}</p>

          <ul class="list-input course-advanced-policy-list enum">

          </ul>
        </section>
      </form>
    </article>

    <aside class="content-supplementary" role="complimentary">
      <div class="bit">
        <h3 class="title-3">${_("How will these settings be used?")}</h3>
        <p>${_("Manual policies are JSON-based key and value pairs that give you control over specific course settings that edX Studio will use when displaying and running your course.")}</p>

        <p>${_("Any policies you modify here will override any other information you've defined elsewhere in Studio. With this in mind, please be very careful and do not edit policies that you are unfamiliar with (both their purpose and their syntax)")}.</p>
      </div>

      <div class="bit">
      % if context_course:
        <%
          ctx_loc = context_course.location
          location = loc_mapper().translate_location(ctx_loc.course_id, ctx_loc, False, True)
          course_team_url = location.url_reverse('course_team/', '')
        %>
      <h3 class="title-3">${_("Other Course Settings")}</h3>
        <nav class="nav-related">
          <ul>
            <li class="nav-item"><a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">${_("Details &amp; Schedule")}</a></li>
            <li class="nav-item"><a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">${_("Grading")}</a></li>
            <li class="nav-item"><a href="${course_team_url}">${_("Course Team")}</a></li>
          </ul>
        </nav>
      % endif
      </div>
    </aside>
  </section>
</div>
</%block>
