<%! from django.utils.translation import ugettext as _ %>
<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>

<!-- TODO decode course # from context_course into title -->
<%block name="title">${_("Course Updates")}</%block>
<%block name="bodyclass">is-signedin course course-info updates view-updates</%block>

<%block name="header_extras">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
% for template_name in ["course_info_update", "course_info_handouts"]:
  <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" charset="utf-8">
require(["domReady!", "jquery", "js/collections/course_update", "js/models/module_info", "js/models/course_info", "js/views/course_info_edit"],
  function(doc, $, CourseUpdateCollection, ModuleInfoModel, CourseInfoModel, CourseInfoEditView) {
    var course_updates = new CourseUpdateCollection();
    course_updates.urlbase = '${url_base}';
    course_updates.fetch({reset: true});

    var course_handouts = new ModuleInfoModel({
        id: '${handouts_location}'
      });
    course_handouts.urlbase = '${url_base}';

    var editor = new CourseInfoEditView({
      el: $('.main-wrapper'),
      model : new CourseInfoModel({
        courseId : '${context_course.location}',
        updates : course_updates,
        base_asset_url : '${base_asset_url}',
        handouts : course_handouts
        })
    });
    editor.render();
});
  </script>
</%block>

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

      <nav class="nav-actions">
        <h3 class="sr">${_('Page Actions')}</h3>
        <ul>
          <li class="nav-item">
            <a href="#" class=" button new-button new-update-button"><i class="icon-plus"></i> ${_('New Update')}</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>

  <div class="wrapper-content wrapper">
    <section class="content">
      <div class="introduction">
        <p clas="copy">${_('Course updates are announcements or notifications you want to share with your class. Other course authors have used them for important exam/date reminders, change in schedules, and to call out any important steps students need to be aware of.')}</p>
      </div>
    </section>
  </div>

  <div class="main-wrapper">
    <div class="inner-wrapper">
      <div class="course-info-wrapper">
        <div class="main-column window">
          <article class="course-updates" id="course-update-view">
            <ol class="update-list" id="course-update-list"></ol>
          </article>
        </div>
        <div class="sidebar course-handouts" id="course-handouts-view"></div>
      </div>
    </div>
  </div>
</%block>
