<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Advanced Settings</%block>
<%block name="bodyclass">is-signedin course advanced settings</%block>

<%namespace name='static' file='static_content.html'/>
<%!
from contentstore import utils
%>

<%block name="jsextra">

<script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/server_error.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/validating_view.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/settings/advanced.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/settings/advanced_view.js')}"></script>

<script type="text/javascript">
$(document).ready(function () {

    $("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 CMS.Models.Settings.Advanced(${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 CMS.Views.Settings.Advanced({
      el: $('.settings-advanced'),
      model: advancedModel
      });

editor.render();

});

</script>
</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <div class="title">
      <span class="title-sub">Settings</span>
      <h1 class="title-1">Advanced Settings</h1>
    </div>
  </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 %>
      <%! from django.core.urlresolvers import reverse %>
        <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="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
          </ul>
        </nav>
      % endif
      </div>
    </aside>
  </section>
</div>
</%block>

<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
  <div class="notification warning has-actions">
    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
      <p id="notification-changesMade-description">Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
    </div>

    <nav class="nav-actions">
      <h3 class="sr">Notification Actions</h3>
      <ul>
        <li class="nav-item">
          <a href="" class="action-primary save-button">Save Changes</a>
        </li>
        <li class="nav-item">
          <a href="" class="action-secondary cancel-button">Cancel</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
</%block>

<%block name="view_alerts">
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
  <div class="alert confirmation">
    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>

    <div class="copy">
      <h2 class="title title-3">Your policy changes have been saved.</h2>
      <p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
    </div>

    <a href="" rel="view" class="action action-alert-close">
      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
      <span class="label">close alert</span>
    </a>
  </div>
</div>

<!-- alert: error -->
<div class="wrapper wrapper-alert wrapper-alert-error" role="status">
  <div class="alert error">
    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>

    <div class="copy">
      <h2 class="title title-3">There was an error saving your information</h2>
      <p>Please see the error below and correct it to ensure there are no problems in rendering your course.</p>
    </div>
  </div>
</div>
</%block>
