<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>
<%!
  from django.utils.translation import ugettext as _
  from contentstore import utils
  from xmodule.modulestore.django import loc_mapper
%>
<%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 = "${advanced_settings_url}";

  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, use &quot; not &apos;)")}</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">${_("What do advanced settings do?")}</h3>
        <p>${_("Advanced settings control specific course functionality. On this page, you can edit manual policies, which are JSON-based key and value pairs that control specific course settings.")}</p>

        <p>${_("Any policies you modify here override all other information you've defined elsewhere in Studio. Do not edit policies unless you are familiar with both their purpose and 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)
          details_url = location.url_reverse('settings/details/')
          grading_url = location.url_reverse('settings/grading/')
          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="${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>
          </ul>
        </nav>
      % endif
      </div>
    </aside>
  </section>
</div>
</%block>
