<%inherit file="base.html" />
<%namespace name='static' file='static_content.html'/>
<%!
  from django.utils.translation import ugettext as _
  from django.core.urlresolvers import reverse
%>
<%block name="title">Static Pages</%block>
<%block name="bodyclass">is-signedin course view-static-pages</%block>

<%block name="jsextra">
<script type='text/javascript'>
    require(["js/models/explicit_url", "coffee/src/views/tabs",
        "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
            function (TabsModel, TabsEditView) {
                var model = new TabsModel({
                    id: "${course_locator}",
                    explicit_url: "${course_locator.url_reverse('tabs')}"
                });

                new TabsEditView({
                    el: $('.main-wrapper'),
                    model: model,
                    mast: $('.wrapper-mast')
                });
            });
  </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>${_("Static Pages")}
    </h1>

    <nav class="nav-actions">
      <h3 class="sr">${_("Page Actions")}</h3>
      <ul>
        <li class="nav-item">
        <a href="#" class="button new-button new-tab"><i class="icon-plus"></i> ${_("New Page")}</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <div class="introduction has-links">
      <p class="copy">${_("Use Static Pages to share a syllabus, a calendar, handouts, or other supplements to your courseware.")}</p>
      <p class="copy">${_("NOTE: all content on Static Pages will be visible to anyone who knows the URL, regardless of whether they are registered in the course or not.")}</p>
      <nav class="nav-introduction-supplementary">
        <ul>
          <li class="nav-item">
          <a rel="modal" href="#preview-lms-staticpages"><i class="icon-question-sign"></i>${_("What do static pages look like in my course?")}</a>
          </li>
        </ul>
      </nav>
    </div>
  </section>
</div>

<div class="main-wrapper">
  <div class="inner-wrapper">
    <article class="unit-body">

      <div class="tab-list">
        <ol class='components'>
          % for locator in components:
          <li class="component" data-locator="${locator}"/>
          % endfor

          <li class="new-component-item">

          </li>
        </ol>
      </div>
    </article>
  </div>
</div>

<div class="content-modal" id="preview-lms-staticpages">
  <h3 class="title">${_("Static Pages in Your Course")}</h3>
  <figure>
    <img src="${static.url("img/preview-lms-staticpages.png")}" alt="${_('Preview of Static Pages in your course')}" />
    <figcaption class="description">${_("The names of your Static Pages appear in your course's main navigation bar, along with Courseware, Course Info, Discussion, Wiki, and Progress.")}</figcaption>
  </figure>

  <a href="#" rel="view" class="action action-modal-close">
    <i class="icon-remove-sign"></i>
    <span class="label">${_("close modal")}</span>
  </a>
</div>
</%block>
