<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
import json
%>

<%block name="bodyclass">view-student-notes is-in-course course</%block>
<%block name="pagetitle">${_("Student Notes")}</%block>
<%block name="headextra">
<%static:css group='style-course'/>
</%block>

<%include file="/courseware/course_navigation.html" args="active_page='edxnotes'" />
<section class="container">
  <div class="wrapper-student-notes">
    <div class="student-notes">

      <div class="title-search-container">
        <div class="wrapper-title">
          <h1 class="page-title">
            ${_('Notes')}
            <small class="page-subtitle">${_("Highlights and notes you've made in course content")}</small>
          </h1>
        </div>

        % if notes:
        <div class="wrapper-notes-search">
          <form role="search" action="${search_endpoint}" method="GET" id="search-notes-form" class="is-hidden">
            <label for="search-notes-input" class="sr">${_('Search notes for:')}</label>
            <input type="search" class="search-notes-input" id="search-notes-input" name="note" placeholder="${_('Search notes for...')}" required>
            <button type="submit" class="search-notes-submit">
              <i class="icon fa fa-search"></i>
              <span class="sr">${_('Search')}</span>
            </button>
          </form>
        </div>
        % endif
      </div>

      <div class="wrapper-msg is-hidden error urgency-high inline-error">
        <div class="msg msg-error">
          <div class="msg-content">
            <p class="copy" aria-live="polite"></p>
          </div>
        </div>
      </div>

      <section class="wrapper-tabs">
        <div class="tab-list is-hidden">
          <h2 id="tab-view" class="tabs-label">${_('View notes by:')}</h2>
        </div>

        % if notes:
        <div class="ui-loading" tabindex="-1">
          <span class="spin">
            <i class="icon fa fa-refresh"></i>
          </span>
          <span class="copy">${_("Loading")}</span>
        </div>
        <div class="sr-is-focusable sr-tab-panel" tabindex="-1"></div>

        % else:
        <section class="placeholder is-empty">
          <article>
            <h2 class="placeholder-title">${_('You have not made any notes in this course yet. Other students in this course are using notes to:')}</h2>

            <div class="placeholder-copy">
              <ul>
                  <li>${_("Mark a passage or concept so that it's easy to find later.")}</li>
                  <li>${_('Record thoughts about a specific passage or concept.')}</li>
                  <li>${_('Highlight important information to review later in the course or in future courses.')}</li>
              </ul>

              % if position is not None:
              <div class="placeholder-cta student-notes-cta">
                <p class="placeholder-cta-copy">${_('Get started by making a note in something you just read, like {section_link}.').format(
                  section_link='<a href="{url}">{section_name}</a>'.format(
                    url=position['url'],
                    section_name=position['display_name'],
                    )
                  )}</p>
              </div>
              % endif

            </div>
          </article>
        </section>
        % endif
      </section>

    </div>
  </div>
</section>


## Include Underscore templates
<%block name="header_extras">
% for template_name in ["note-item", "tab-item"]:
<script type="text/template" id="${template_name}-tpl">
  <%static:include path="edxnotes/${template_name}.underscore" />
</script>
% endfor
</%block>
<%block name="js_extra">
% if notes:
<script type="text/javascript">
  (function (require) {
      require(['js/edxnotes/views/page_factory'], function (NotesPageFactory) {
          var pageView = new NotesPageFactory({
              notesList: ${notes},
              debugMode: ${debug}
          });
    });
  }).call(this, require || RequireJS.require);
</script>
% endif
</%block>
