<%inherit file="base.html" />
<%!
  import logging
  from xmodule.util import date_utils
  from django.utils.translation import ugettext as _
  from django.core.urlresolvers import reverse
%>
<%block name="title">${_("Course Outline")}</%block>
<%block name="bodyclass">is-signedin course outline</%block>

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

<%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
  <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
  <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
  <script src="${static.url('js/vendor/date.js')}"></script>
  <script type="text/javascript" src="${static.url('js/models/course_relative.js')}"></script>
  <script type="text/javascript" src="${static.url('js/views/grader-select-view.js')}"></script>
  <script type="text/javascript" src="${static.url('js/views/overview.js')}"></script>
  <script type="text/javascript" src="${static.url('js/models/settings/course_grading_policy.js')}"></script>

  <script type="text/template" id="section-name-edit-tpl">
    <%static:include path="js/section-name-edit.underscore" />
  </script>
  <script type="text/javascript" src="${static.url('js/models/section.js')}"></script>
  <script type="text/javascript" src="${static.url('js/views/section.js')}"></script>

  <script type="text/javascript">
  $(document).ready(function(){
    // TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars
    // I believe that current (New Section/New Subsection) cause full page reloads which means these aren't needed globally
    // but we really should change that behavior.
    if (!window.graderTypes) {
      window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
      window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
      window.graderTypes.reset(${course_graders|n});
    }

    $(".gradable-status").each(function(index, ele) {
        var gradeView = new CMS.Views.OverviewAssignmentGrader({
            el : ele,
            graders : window.graderTypes
        });
    });

    $(".section-name").each(function() {
        var model = new CMS.Models.Section({
            id: $(this).parent(".item-details").data("id"),
            name: $(this).data("name")
        });
        new CMS.Views.SectionShow({model: model, el: this}).render();
    })
  });

  </script>
</%block>

<%block name="header_extras">
  <script type="text/template" id="new-section-template">
    <section class="courseware-section branch new-section">
      <header>
      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
        <div class="item-details">
          <h3 class="section-name">
          <form class="section-name-form">
            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
            <input type="submit" class="new-section-name-save" data-parent="${parent_location}"
                   data-category="${new_section_category}" value="${_('Save')}" />
            <input type="button" class="new-section-name-cancel" value="${_('Cancel')}" /></h3>
          </form>
        </div>
      </header>
    </section>
  </script>

  <script type="text/template" id="blank-slate-template">
    <section class="courseware-section branch new-section">
      <header>
      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
        <div class="item-details">
          <h3 class="section-name">
          <span class="section-name-span">Click here to set the section name</span>
          <form class="section-name-form">
            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
            <input type="submit" class="new-section-name-save" data-parent="${parent_location}"
                   data-category="${new_section_category}" value="${_('Save')}" />
            <input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
          </form>
        </div>
        <div class="item-actions">
          <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
          <a href="#" data-tooltip="${_('Drag to re-order')}" class="drag-handle"></a>
        </div>
      </header>
    </section>
  </script>

  <script type="text/template" id="new-subsection-template">
    <li class="branch collapsed">
      <div class="section-item editing">
        <form class="new-subsection-form">
          <span class="folder-icon"></span>
          <span class="subsection-name">
            <input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
          </span>
          <input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
          <input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
        </form>
      </div>
      <ol>
        <li>
          <a href="unit.html" class="new-unit-item">
            <span class="new-unit-icon"></span>${_('New Unit')}
          </a>
        </li>
      </ol>
    </li>
  </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 Outline")}
      </h1>

      <nav class="nav-actions">
        <h3 class="sr">${_("Page Actions")}</h3>
        <ul>
          <li class="nav-item">
            <a href="#" class="toggle-button toggle-button-sections"><i class="icon-arrow-up"></i> <span class="label">${_("Collapse All Sections")}</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="button new-button new-courseware-section-button"><i class="icon-plus"></i> ${_("New Section")}</a>
          </li>
          <li class="nav-item">
            <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>

  <div class="main-wrapper">
    <div class="inner-wrapper">
      <article class="courseware-overview" data-course-id="${context_course.location.url()}">
        % for section in sections:
        <section class="courseware-section branch" data-id="${section.location}">
          <header>
          <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>

            <div class="item-details" data-id="${section.location}">
              <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
              <div class="section-published-date">
                <%
                  if section.start is not None:
                      start_date_str = section.start.strftime('%m/%d/%Y')
                      start_time_str = section.start.strftime('%H:%M')
                  else:
                      start_date_str = ''
                      start_time_str = ''
                %>
                %if section.start is None:
                  <span class="published-status">${_("This section has not been released.")}</span>
                  <a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">${_("Schedule")}</a>
                %else:
                  <span class="published-status"><strong>${_("Will Release:")}</strong>
                  ${date_utils.get_default_time_display(section.start)}</span>
                  <a href="#" class="edit-button" data-date="${start_date_str}"
                    data-time="${start_time_str}" data-id="${section.location}">${_("Edit")}</a>
                %endif
              </div>
            </div>

            <div class="item-actions">
              <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
              <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle"></a>
            </div>
          </header>
          <div class="subsection-list">
            <div class="list-header">
              <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
                <span class="new-folder-icon"></span>${_("New Subsection")}
              </a>
            </div>
            <ol data-section-id="${section.location.url()}">
              % for subsection in section.get_children():
              <li class="branch collapsed id-holder" data-id="${subsection.location}">
                <div class="section-item">
                  <div class="details">
                    <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="expand-collapse-icon expand"></a>
                    <a href="${reverse('edit_subsection', args=[subsection.location])}">
                      <span class="folder-icon"></span>
                      <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                    </a>
                  </div>

                  <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}">
                  </div>

                  <div class="item-actions">
                    <a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
                    <a href="#" data-tooltip="${_('Drag to reorder')}" class="drag-handle"></a>
                  </div>
                </div>
                ${units.enum_units(subsection)}
              </li>
              % endfor
            </ol>
          </div>
        </section>
        % endfor
      </article>
    </div>
  </div>
  <footer></footer>

  <div class="edit-subsection-publish-settings">
    <div class="settings">
      <h3>${_("Section Release Date")}</h3>
      <div class="picker datepair">
        <div class="field field-start-date">
          <label for="">${_("Release Day")}</label>
          <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
        </div>
        <div class="field field-start-time">
          <label for="">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
          <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
        </div>

        <div class="description">
          <p>${_('On the date set above, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
        </div>
      </div>
      <a href="#" class="save-button">${_("Save")}</a><a href="#" class="cancel-button">${_("Cancel")}</a>
    </div>
  </div>
</%block>
