<%inherit file="base.html" />
<%def name="online_help_token()"><% return "checklist" %></%def>
<%!
  from django.core.urlresolvers import reverse
  from django.utils.translation import ugettext as _
%>
<%block name="title">${_("Course Checklists")}</%block>
<%block name="bodyclass">is-signedin course view-checklists</%block>

<%namespace name='static' file='static_content.html'/>

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

<%block name="jsextra">
<script type="text/javascript">
require(["domReady!", "jquery", "js/collections/checklist", "js/views/checklist"],
        function(doc, $, ChecklistCollection, ChecklistView) {
    var checklistCollection = new ChecklistCollection();
    checklistCollection.url = "${handler_url}";

    var editor = new ChecklistView({
        el: $('.course-checklists'),
        collection: checklistCollection
    });
    checklistCollection.fetch({reset: true});
});
</script>
</%block>


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

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">
      <form id="course-checklists" class="course-checklists" method="post" action="">
        <h2 class="title title-3 sr">${_("Current Checklists")}</h2>
      </form>
    </article>

    <aside class="content-supplementary" role="complimentary">
      <div class="bit">
        <h3 class="title title-3">${_("What are course checklists?")}</h3>
        <p>
          ${_("Course checklists are tools to help you understand and keep track of all the steps necessary to get your course ready for students.")}
        </p>
        <p>
          ${_("Any changes you make to these checklists are saved automatically and are immediately visible to other course team members.")}
        </p>
      </div>

      <div class="bit">
        <h3 class="title title-3">${_("Studio checklists")}</h3>
        <nav class="nav-page checklists-current">
          <ol>
            % for checklist in checklists:
            <li class="nav-item">
              <a rel="view" href="${'#course-checklist' + str(loop.index)}">${checklist['short_description']}</a>
            </li>
            % endfor
          </ol>
        </nav>
      </div>
    </aside>
  </section>
</div>
</%block>
