<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>

<%!
from django.utils.translation import ugettext as _
from edxnotes.helpers import NoteJSONEncoder
from openedx.core.djangolib.markup import HTML, Text
from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
%>

<%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">
    <main id="main" aria-label="Content" tabindex="-1">
      <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 has_notes:
        <div class="wrapper-notes-search">
          <form role="search" action="${notes_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">
              <span class="icon fa fa-search" aria-hidden="true"></span>
              <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 has_notes:
        <div class="ui-loading" tabindex="-1">
          <span class="spin">
            <span class="icon fa fa-refresh" aria-hidden="true"></span>
          </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">${Text(_('Get started by making a note in something you just read, like {section_link}.')).format(
                  section_link=HTML('<a href="{url}">{section_name}</a>').format(
                    url=position['url'],
                    section_name=position['display_name'],
                    )
                  )}</p>
              </div>
              % endif

            </div>
          </article>
        </section>
        % endif
      </section>
    </main>
    </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>

% if has_notes:
    <%block name="js_extra">
    <%static:require_module module_name="js/edxnotes/views/page_factory" class_name="NotesPageFactory">
        NotesPageFactory({
            disabledTabs: ${disabled_tabs | n, dump_js_escaped_json},
            notes: ${dump_js_escaped_json(notes, NoteJSONEncoder) | n, decode.utf8},
            notesEndpoint: ${notes_endpoint | n, dump_js_escaped_json},
            pageSize: ${page_size | n, dump_js_escaped_json},
            debugMode: ${debug | n, dump_js_escaped_json}
        });
    </%static:require_module>
    </%block>
% endif
