<%inherit file="base.html" />
<%def name="online_help_token()"><% return "outline" %></%def>
<%!
import json
import logging
from util.date_utils import get_default_time_display
from django.utils.translation import ugettext as _
from contentstore.utils import reverse_usage_url
%>
<%block name="title">${_("Course Outline")}</%block>
<%block name="bodyclass">is-signedin course view-outline</%block>

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

<%block name="requirejs">
    require(["js/factories/outline"], function (OutlineFactory) {
        OutlineFactory(${json.dumps(course_structure) | n}, ${json.dumps(initial_state) | n});
    });
</%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-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor']:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
</script>
% endfor
</%block>

<%block name="page_alert">
  %if notification_dismiss_url is not None:
  <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
    <div class="alert announcement has-actions">
      <i class="feedback-symbol fa fa-bullhorn"></i>

      <div class="copy">
        <h2 class="title title-3">${_("This course was created as a re-run. Some manual configuration is needed.")}</h2>

        <p>${_("No course content is currently visible, and no students are enrolled. Be sure to review and reset all dates, including the Course Start Date; set up the course team; review course updates and other assets for dated material; and seed the discussions and wiki.")}</p>
      </div>

      <ul class="nav-actions">
        <li class="action action-dismiss">
          <a href="#" class="button dismiss-button" data-dismiss-link='${notification_dismiss_url}'>
            <i class="icon fa fa-times-circle"></i>
            <span class="button-copy">${_("Dismiss")}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  %endif
</%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" aria-label="${_('Page Actions')}">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                <li class="nav-item">
                    <a href="#" class="button button-new" data-category="chapter" data-parent="${context_course.location | h}" data-default-name="${_('Section')}" title="${_('Click to add a new section')}">
                        <i class="icon fa fa-plus"></i>${_('New Section')}
                    </a>
                </li>
                %if reindex_link:
                    <li class="nav-item">
                        <a href="${reindex_link}" class="button button-reindex" data-category="reindex" title="${_('Reindex current course')}">
                            <i class="icon-arrow-right"></i>${_('Reindex')}
                        </a>
                    </li>
                %endif
                <li class="nav-item">
                    <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all is-hidden">
                        <span class="collapse-all"><i class="icon fa fa-arrow-up"></i> <span class="label">${_("Collapse All Sections")}</span></span>
                        <span class="expand-all"><i class="icon fa fa-arrow-down"></i> <span class="label">${_("Expand All Sections")}</span></span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="${lms_link}" rel="external" class="button view-button view-live-button"
                       title="${_('Click to open the courseware in the LMS in a new tab')}">${_("View Live")}</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

<div class="wrapper-content wrapper">
    <section class="content">
        <article class="content-primary" role="main">
            <div class="course-status">
                <div class="status-release">
                    <h2 class="status-release-label">${_("Course Start Date:")}</h2>
                    <p class="status-release-value">${course_release_date}</p>

                    <ul class="status-actions">
                      <li class="action-item action-edit">
                        <a href="${settings_url}" class="edit-button action-button" data-tooltip="${_("Edit Start Date")}">
                            <i class="icon fa fa-pencil"></i>
                            <span class="action-button-text sr">${_("Edit Start Date")}</span>
                        </a>
                      </li>
                    </ul>
                </div>
            </div>

            <div class="wrapper-dnd">
                <%
                course_locator = context_course.location
                %>
                <h2 class="sr">${_("Course Outline")}</h2>
                <article class="outline outline-complex outline-course" data-locator="${course_locator | h}" data-course-key="${course_locator.course_key | h}">
                </article>
            </div>
            <div class="ui-loading">
                <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">${_("Loading")}</span></p>
            </div>
        </article>
        <aside class="content-supplementary" role="complementary">
            <div class="bit">
                <h3 class="title-3">${_("Creating your course organization")}</h3>
                <p>${_("You add sections, subsections, and units directly in the outline.")}</p>
                <p>${_("Create a section, then add subsections and units. Open a unit to add course components.")}</p>
                <h3 class="title-3">${_("Reorganizing your course")}</h3>
                <p>${_("Drag sections, subsections, and units to new locations in the outline.")}</p>
                <h3 class="title-3">${_("Setting release dates and grading policies")}</h3>
                <p>${_("Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.")}</p>
                <h3 class="title-3">${_("Changing the content students see")}</h3>
                <p>${_("To publish draft content, select the Publish icon for a section, subsection, or unit.")}</p>
                <p>${_("To hide content from students, select the Configure icon for a section, subsection, or unit, then select {em_start}Hide from students{em_end}.").format(em_start='<strong>', em_end="</strong>")}</p>
            </div>
            <div class="bit external-help">
                <a href="${get_online_help_info(online_help_token())['doc_url']}" target="_blank" class="button external-help-button">${_("Learn more about the course outline")}</a>
            </div>

        </aside>
    </section>
</div>
</%block>
