<%inherit file="base.html" />
<%def name="online_help_token()"><% return "unit" %></%def>
<%!
from contentstore import utils
from contentstore.views.helpers import EDITING_TEMPLATES
from django.utils.translation import ugettext as _
%>
<%namespace name='static' file='static_content.html'/>
<%namespace name="units" file="widgets/units.html" />
<%block name="title">${_("Individual Unit")}</%block>
<%block name="bodyclass">is-signedin course unit view-unit feature-upload</%block>

<%block name="header_extras">
% for template_name in EDITING_TEMPLATES:
<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'>
require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit", "js/collections/component_template",
    "jquery.ui", "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
    function(doc, $, ModuleModel, UnitEditView, ComponentTemplates) {
  window.unit_location_analytics = '${unit_usage_key}';

  var templates = new ComponentTemplates(${component_templates | n}, {parse: true});

  new UnitEditView({
    el: $('.main-wrapper'),
    view: 'unit',
    model: new ModuleModel({
      id: '${unit_usage_key}',
      state: '${unit_state}'
    }),
    templates: templates
  });

  $('.new-component-template').each(function(){
      $emptyEditor = $(this).find('.empty');
      $(this).prepend($emptyEditor);
  });
});
  </script>
</%block>

<%block name="content">
  <div class="main-wrapper edit-state-${unit_state}" data-locator="${unit_usage_key}" data-course-key="${unit_usage_key.course_key}">
    <div class="inner-wrapper">
      <div class="alert editing-draft-alert">
        <p class="alert-message"><strong>${_("You are editing a draft.")}</strong>
        % if published_date:
        ${_("This unit was originally published on {date}.").format(date=published_date)}
        % endif
        </p>
        <a href="${published_preview_link}" target="_blank" class="alert-action secondary">${_("View the Live Version")}</a>
      </div>
      <div class="main-column">
        <article class="unit-body window">
        <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
          <ol class="components">
            % for usage_key in child_usage_keys:
            <li class="component" data-locator="${usage_key}" data-course-key="${usage_key.course_key}"/>
            % endfor
          </ol>
          <div class="add-xblock-component new-component-item adding"></div>
        </article>
      </div>

      <%
        index_url = utils.reverse_course_url('course_handler', context_course.id)
        subsection_url = utils.reverse_usage_url('subsection_handler', subsection.location)
      %>
      <div class="sidebar">
        <div class="unit-settings window">
          <h4 class="header">${_("Unit Settings")}</h4>
          <div class="window-contents">
            <div class="row visibility">
              <label for="visibility-select" class="inline-label">${_("Visibility:")}</label>
              <select name="visibility-select" id="visibility-select" class='visibility-select'>
                <option value="public">${_("Public")}</option>
                <option value="private">${_("Private")}</option>
              </select>
            </div>
            <div class="row published-alert">
              <p class="edit-draft-message">${_('This unit has been published. To make changes, you must {link_start}edit a draft{link_end}.').format(link_start='<a href="#" class="create-draft">', link_end='</a>')}</p>
              <p class="publish-draft-message">${_('This is a draft of the published unit. To update the live version, you must {link_start}replace it with this draft{link_end}.').format(link_start='<a href="#" class="publish-draft">', link_end='</a>')}</p>
            </div>
            <div class="row status">
              <p>
               % if release_date is not None:
                  ${_("This unit is scheduled to be released to <strong>students</strong> on <strong>{date}</strong> with the subsection {link_start}{name}{link_end}").format(
                      date=release_date,
                      name=subsection.display_name_with_default,
                      link_start=u'<a href="{url}">'.format(url=subsection_url),
                      link_end=u'</a>',
                  )}
               % else:
                  ${_("This unit is scheduled to be released to <strong>students</strong> with the subsection {link_start}{name}{link_end}").format(
                      name=subsection.display_name_with_default,
                      link_start=u'<a href="{url}">'.format(url=subsection_url),
                      link_end=u'</a>',
                  )}
               % endif
              </p>
            </div>
            <div class="row unit-actions">
              <a href="#" class="delete-draft delete-button">${_("Delete Draft")}</a>
              <a href="${draft_preview_link}" target="_blank" class="preview-button">${_("Preview")}</a>
              <a href="${published_preview_link}" target="_blank" class="view-button">${_("View Live")}</a>
            </div>
          </div>
        </div>
        <div class="window unit-location">
          <h4 class="header">${_("Unit Location")}</h4>
          <div class="window-contents">
            <div class="row wrapper-unit-id">
              <p class="unit-id">
                <label for="unit-location-id-input">${_("Unit Identifier:")}</label>
                <input type="text" class="url value" id="unit-location-id-input" value="${unit.location.name}" readonly />
              </p>
            </div>
            <div class="unit-tree-location">
              <ol>
                <li class="section">
                  <a href="${index_url}" class="section-item section-name">
                    <span class="section-name">${section.display_name_with_default}</span>
                  </a>
                  <ol>
                    <li class="subsection">
                      <a href="${subsection_url}" class="section-item">
                        <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                      </a>
                      ${units.enum_units(subsection, actions=False, selected=unit.location)}
                    </li>
                  </ol>
                </li>
              </ol>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</%block>
