<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="online_help_token()"><% return "outline" %></%def>
<%!
import logging
from util.date_utils import get_default_time_display
from django.utils.translation import ugettext as _
from openedx.core.djangolib.js_utils import dump_js_escaped_json
from contentstore.utils import reverse_usage_url
from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
from openedx.core.djangolib.markup import HTML, Text
%>
<%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(
            ${course_structure | n, dump_js_escaped_json},
            ${initial_state | n, dump_js_escaped_json}
        );
    });
</%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', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs']:
<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">
      <span class="feedback-symbol fa fa-bullhorn" aria-hidden="true"></span>

      <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}'>
            <span class="icon fa fa-times-circle" aria-hidden="true"></span>
            <span class="button-copy">${_("Dismiss")}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  %endif

    %if deprecated_blocks_info.get('blocks') or deprecated_blocks_info.get('block_types_enabled'):
      <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
        <div class="alert announcement">
          <span class="feedback-symbol fa fa-warning" aria-hidden="true"></span><span class="sr">${_("Warning")}</span>

          <div class="copy">
            <h2 class="title title-3 warning-heading-text">${_("This course uses features that are no longer supported.")}</h2>

            %if deprecated_blocks_info.get('blocks'):
              <div class="components-list">
                <p class="components-list-heading-text">${_("You must delete or replace the following components.")}</p>
                  <nav class="nav-related" aria-label="${_('Unsupported Components')}">
                    <ul>
                      % for component_parent_url, component_display_name in deprecated_blocks_info['blocks']:
                          <li class="nav-item">
                                % if component_display_name:
                                    <a href="${component_parent_url}">${component_display_name}</a>
                                % else:
                                    <a href="${component_parent_url}">${_("Deprecated Component")}</a>
                                % endif
                          </li>
                      % endfor
                    </ul>
                  </nav>
              </div>
            %endif

            % if deprecated_blocks_info.get('block_types_enabled'):
              <div class="advance-modules-list">
                <p class="advance-modules-remove-text">
                  ${Text(_("To avoid errors, {platform_name} strongly recommends that you remove unsupported features from the course advanced settings. To do this, go to the {link_start}Advanced Settings page{link_end}, locate the \"Advanced Module List\" setting, and then delete the following modules from the list.")).format(
                    platform_name=static.get_platform_name(),
                    link_start=HTML('<a href="{advance_settings_url}">').format(advance_settings_url=deprecated_blocks_info['advance_settings_url']),
                    link_end=HTML("</a>")
                  )}
                </p>
                <nav class="nav-related" aria-label="${_('Unsupported Advance Modules')}">
                  <ul>
                    % for block_type in deprecated_blocks_info['block_types']:
                      <li class="nav-item">${block_type}</li>
                    % endfor
                  </ul>
                </nav>
              </div>
            % endif
          </div>
        </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}" data-default-name="${_('Section')}" title="${_('Click to add a new section')}">
                        <span class="icon fa fa-plus" aria-hidden="true"></span>${_('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')}">
                            <span class="icon-arrow-right" aria-hidden="true"></span>${_('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"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">${_("Collapse All Sections")}</span></span>
                        <span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <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")}">
                            <span class="icon fa fa-pencil" aria-hidden="true"></span>
                            <span class="action-button-text sr">${_("Edit Start Date")}</span>
                        </a>
                      </li>
                    </ul>
                </div>
                % if SelfPacedConfiguration.current().enabled:
                    <div class="status-pacing">
                        <h2 class=status-pacing-label>${_("Course Pacing:")}</h2>
                        % if context_course.self_paced:
                            <p class="status-pacing-value">${_("Self-Paced")}</p>
                        % else:
                            <p class="status-pacing-value">${_("Instructor-Paced")}</p>
                        % endif
                    </div>
               % endif
            </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}" data-course-key="${course_locator.course_key}">
                </article>
            </div>
            <div class="ui-loading">
                <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></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>${Text(_("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=HTML("<strong>"), em_end=HTML("</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>
