<%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
  from xmodule.modulestore.django import loc_mapper
%>
<%block name="title">${_("Course Outline")}</%block>
<%block name="bodyclass">is-signedin course view-outline feature-edit-dialog</%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')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/html5-input-polyfills/number-polyfill.css')}" />
  <script type="text/template" id="section-name-edit-tpl">
    <%static:include path="js/section-name-edit.underscore" />
  </script>

  <script type="text/javascript">
require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/views/section_show", "js/views/overview_assignment_grader", "js/collections/course_grader", "js/views/overview", "jquery.inputnumber"],
    function(doc, $, Location, SectionModel, SectionShowView, OverviewAssignmentGrader, CourseGraderCollection){
  // 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 CourseGraderCollection(${course_graders|n}, {parse:true});
  }

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

  $(".section-name").each(function() {
      var model = new SectionModel({
          id: $(this).parent(".item-details").data("locator"),
          name: $(this).data("name")
      });
      new SectionShowView({model: model, el: this}).render();
  })
});
  </script>
</%block>

<%block name="header_extras">
  <script type="text/template" id="new-section-template">
    <section class="courseware-section new-section is-collapsible is-draggable">
      <header class="section">
      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></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_locator}"
                     data-category="${new_section_category}" value="${_('Save')}" />
              <input type="button" class="new-section-name-cancel" value="${_('Cancel')}" />
            </form>
          </h3>
        </div>
      </header>
    </section>
  </script>


  <script type="text/template" id="blank-slate-template">
  <section class="courseware-section new-section">
    <header>
      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
      <div class="item-details">
        <h3 class="section-name">
        <span class="section-name-span">${_('Add a new 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_locator}"
                 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>
        <span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
      </div>
    </header>
  </section>
  </script>

  <script type="text/template" id="new-subsection-template">
  <li class="courseware-subsection collapsed is-draggable is-collapsible">
    <div class="section-item editing">
      <form class="new-subsection-form">
        <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">
          <i class="icon-plus"></i> ${_('New Unit')}
        </a>
      </li>
    </ol>
  </li>
  </script>

  <script type="text/template" id="no-outline-content">
  <div class="no-outline-content">
      <p>${_("You haven't added any sections to your course outline yet.")} <a href="#" class="button new-button"><i class="icon-plus"></i>${_("Add your first section")}</a></p>
  </div>
  </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="wrapper-content wrapper">
    <section class="content">
      <article class="content-primary" role="main">

          <div class="wrapper-dnd">
            <%
              course_locator = loc_mapper().translate_location(
                context_course.location.course_id, context_course.location, False, True
              )
            %>
            <article class="courseware-overview" data-locator="${course_locator}">
              % for section in sections:
              <%
                section_locator = loc_mapper().translate_location(
                  context_course.location.course_id, section.location, False, True
                )
              %>
              <section class="courseware-section is-collapsible is-draggable" data-parent="${course_locator}"
                       data-locator="${section_locator}">
                <%include file="widgets/_ui-dnd-indicator-before.html" />

                <header class="section">
                  <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>

                  <div class="item-details" data-locator="${section_locator}">
                    <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
                  </div>
                  <div class="item-actions">

                    <ul class="actions-list">

                      <li class="actions-item pubdate">
                        <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 is not scheduled for release")}</span>
                            <a href="#" class="edit-release-date action" data-date="" data-time="" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Schedule")}</span></a>
                          %else:
                            <span class="published-status"><strong>${_("Release date:")}</strong>
                            ${date_utils.get_default_time_display(section.start)}</span>
                            <a href="#" class="edit-release-date action" data-date="${start_date_str}" data-time="${start_time_str}" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Edit section release date")}</span></a>
                          %endif
                        </div>
                      </li>
                      <li class="actions-item delete">
                        <a href="#" data-tooltip="${_('Delete this section')}" class="action delete-section-button"><i class="icon-trash"></i> <span class="sr">${_('Delete section')}</span></a>
                      </li>
                      <li class="actions-item drag">
                        <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle action"><span class="sr"> ${_("Drag to reorder section")}</span></span>
                      </li>
                    </ul>
                  </div>
                </header>
                <div class="subsection-list">

                  <ol class="sortable-subsection-list">
                    % for subsection in section.get_children():
                      <%
                        subsection_locator = loc_mapper().translate_location(
                          context_course.location.course_id, subsection.location, False, True
                        )
                      %>
                    <li class="courseware-subsection collapsed id-holder is-draggable is-collapsible "
                        data-parent="${section_locator}" data-locator="${subsection_locator}">

                      <%include file="widgets/_ui-dnd-indicator-before.html" />

                      <div class="section-item">
                        <div class="details">
                        <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="action expand-collapse expand"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this subsection')}</span></a>
                          <a href="${subsection_locator.url_reverse('subsection')}">
                            <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                          </a>
                        </div>

                        <div class="item-actions">

                          <ul class="actions-list">
                            <li class="actions-item grades">
                              <div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}"></div>
                            </li>
                            <li class="actions-item delete">
                              <a href="#" data-tooltip="${_('Delete this subsection')}" class="action delete-subsection-button"><i class="icon-trash"></i> <span class="sr">${_("Delete subsection")}</span></a>
                            </li>
                            <li class="actions-item drag">
                              <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle action"></span>
                            </li>
                          </ul>
                        </div>
                      </div>
                      ${units.enum_units(subsection)}

                      <%include file="widgets/_ui-dnd-indicator-after.html" />
                    </li>
                    % endfor
                    <li class="ui-splint ui-splint-indicator">
                      <%include file="widgets/_ui-dnd-indicator-initial.html" />
                    </li>
                  </ol>

                  <div class="list-header new-subsection">
                    <a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
                      <i class="icon-plus"></i> ${_("New Subsection")}
                    </a>
                  </div>

                </div>

                <%include file="widgets/_ui-dnd-indicator-after.html" />
              </section>
              % endfor
            </article>
          </div>

      </article>
      <aside class="content-supplementary" role="complimentary">
        <div class="bit">
          <h3 class="title-3">${_("What can I do on this page?")}</h3>
          <p>${_("You can create new sections and subsections, set the release date for sections, and create new units in existing subsections.  You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.")}</p>

            <p>${_("In addition, you can drag and drop sections, subsections, and units to reorganize your course.")}</p>
        </div>
      </aside>
    </section>
  </div>
  <footer></footer>

  <div
    class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
    aria-describedby="dialog-edit-sectionrelease-description"
    aria-labelledby="dialog-edit-sectionrelease-title"
    aria-hidden=""
    role="dialog">
    <div class="dialog confirm">
      <form class="edit-sectionrelease-dialog" action="#">
        <div class="form-content">
          <h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2>
          <p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, 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>
          <ul class="list-input picker datepair">
            <li class="field field-start-date">
              <label for="start_date">${_("Release Day")}</label>
              <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
            </li>
            <li class="field field-start-time">
              <label for="start_time">${_("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"/>
            </li>
          </ul>
        </div>
        <div class="actions">
          <h3 class="sr">${_("Form Actions")}</h3>
          <ul>
            <li class="action-item">
              <a href="#" class="button action-primary action-save">${_("Save")}</a>
            </li>
            <li class="action-item">
              <a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a>
            </li>
          </ul>
        </div>
      </form>
    </div>
  </div>



</%block>