{% extends "base.html" %}
{% load url from future %}

{% block title %}
  {{ note.name }}
{% endblock %}

{% block pagestyle %}
  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
  <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/annotator.min.css" />
  <link rel="stylesheet" type="text/css" media="all" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.min.css">
{% endblock %}

{% block pagescripts %}
  <script type="text/javascript">
    var note_id = {{ note.id }};
    var note_thank_url = "{% url 'thank_note' note.id %}"
    var note_flag_url = "{% url 'flag_note' note.id %}"
    var edit_note_tags_url = "{% url 'edit_note_tags' note.id %}"
    var note_downloaded_url = "{% url 'downloaded_note' note.id %}"
    var note_contents_url = "{{ S3_URL }}{{ note.get_relative_s3_path }}"
    var pdfControls = {% if pdf_controls %} true {% else %} false {% endif %};
    var csrf_token = "{{ csrf_token }}";
    var annotator_js_url = "{{ STATIC_URL }}js/annotator-full.min.js";
    var annotator_css_url = "{{ STATIC_URL }}css/annotator.min.css";
    var setup_ajax_url = "{{ STATIC_URL }}js/setup-ajax.js";
    var empty_js = "{{ STATIC_URL }}js/empty.js";
  </script>
  <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
  <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
  <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.min.js" ></script>
  <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
    $(function() {
      $(document).foundation('joyride', 'start');
    });
  </script>
{% endblock %}

{% block raw_content %}
  <section id="note_content">

    <div class="return-to-course show-for-large-up">
      <div class="row">
        <div class="small-12 columns">
          <a href="{{ note.course.get_absolute_url }}" class="inherit-color">
            <i class="fa fa-angle-double-left"></i> See all notes for {{ note.course.name }}
          </a>
        </div>
      </div>
    </div>

    <div id="note_header">

      <div class="row header-byline">
        <div class="small-12 columns">
          <strong>Lecture note for {{ note.course.name }} </strong>
          at
          {% if note.course.department.school %}
            {{ note.course.department.school.name }}
          {% else %}
            {{ note.course.school.name }}
          {% endif %}
          &nbsp;&nbsp;
          <span style="display: inline;"><span class="show-for-large-up"><i class="fa fa-thumbs-up"></i> <span id="thank-number">{{ note.thanks }}</span> Thanks</span></span>
        </div>
      </div>

      <div class="row museo700">
        <div class="small-12 columns header-title-row">
          <span class="header-title">{{ note.name }} </span>
          <span style="display: inline;">
            <span class="show-for-large-up">
              {% if user.is_authenticated %}
                {% if already_thanked %}
                  <button id="thank-button-disabled" class="modify-button disabled opentip"
                          data-ot="You've already thanked this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Thank Note</button>
                {% else %}
                  <button id="thank-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Thank Note</button>
                  <button id="thank-button-disabled" class="modify-button disabled opentip hide"
                          data-ot="You've already thanked this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Thank Note</button>
                {% endif %}
              {% else %}
                <button id="thank-button-disabled" class="modify-button disabled opentip"
                          data-ot="Log in to thank this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Thank Note</button>
              {% endif %}

              {% if user.is_authenticated %}
                {% if already_flagged %}
                  <button id="flag-button-disabled" class="modify-button disabled opentip"
                          data-ot="You've already reported this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Report Note</button>
                {% else %}
                  <button id="flag-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Report Note</button>
                  <button id="flag-button-disabled" class="modify-button disabled opentip hide"
                          data-ot="You've already reported this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Report Note</button>
                {% endif %}
              {% else %}
                <button id="flag-button-disabled" class="modify-button disabled opentip"
                          data-ot="Log in to report this note"
                           {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-thumbs-up"></i> Report Note</button>
              {% endif %}

              {% if user.is_authenticated %}
                <a href="{{ note.get_fp_url }}">
                  <button id="note-download-button" class="modify-button opentip"
                          data-ot="It costs 2 karma points to download a note"
                          {% include 'partial/opentip_settings.html' %}>
                    <i class="fa fa-download"></i> Download Note</button></a>
              {% else %}
                <button id="note-download-button-disabled" class="modify-button disabled opentip"
                          data-ot="Log in to download this note"
                           {% include 'partial/opentip_settings.html' %}>
                  <i class="fa fa-download"></i> Download Note</button>
              {% endif %}

              {% if user.get_profile.can_edit_items %}
                <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
                  <i class="fa fa-pencil-square-o"></i> Edit Tags
                </button>
              {% endif %}
            </span>
          </span>
        </div>
      </div>

      <div id="note-tags" class="row show-for-large-up">
        <div class="small-12 columns">
          <strong>Tags: </strong>
          <span class="tags">
            {% for tag in note.tags.all %}
              <span class="tag-span">{{ tag.name }}</span>
            {% endfor %}
          </span>
        </div><!-- /note_tags -->
      </div>

      <div id="note-tag-dialog" class="reveal-modal" data-reveal>
        <a class="close-reveal-modal">&#215;</a>
        <div class="row">
          <div class="small-12 columns">
            <p>Edit this note's tags:
            <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"></p>
            <button id="save_note_tags" type="submit" value="tags-form"><i class="fa fa-save"></i> Save</button>
          </div>
        </div>
      </div>

      {% if note.license %}
        <div class="row">
          <div id="note_pedigree" class="twelve columns activity_details_status">
            {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{ note.upstream_link }}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
          </div><!-- /note_pedigree -->
        </div>
      {% endif %}

    </div><!-- /note header -->

    <div class="row">
      <div id="tabs" class="small-12 columns">
        <dl class="tabs show-for-large-up" data-tab data-options="deep_linking: true; scroll_to_content: false">
          <dd class="active"><a href="#note_container">Note</a></dd>
          <dd id="keywords-tab-button"><a href="#keywords">Key Terms & Definitions</a></dd>
        </dl>
        <div id="tabs-content" class="tabs-content">
          <div id="note_container" class="content active">
            {% if pdf_controls %}
              <div id="zoom-buttons" class="row show-for-medium-up">
                <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
                  <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
                </div>
                <div class="small-4 columns">
                  <span>Jump to page:
                  <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
                </div>
                <div class="small-2 small-centered columns center">
                  <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
                  <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
                </div>
              </div>
            {% endif %}

            <div class="row">
              <div class="small-12 small-centered columns medium-12 large-12 body_copy">
                {% if note.static_html %}
                  <div id="note-content-wrapper" class="note-text">
                    {% if note.has_markdown %}
                      <span id="note-markdown" data-markdown="{{note.notemarkdown.markdown}}"></span>
                    {% else %}
                      <iframe style="border:none; width:100%; min-height: 1000px;"
                            id="noteframe"></iframe>
                      <noscript>
                        {{ note.text }}
                      </noscript>
                    {% endif %}
                  </div> <!-- .note-text -->

                {% else %} {# note.static_html #}
                  <div class="note-error">
                    This document's content is currently unavailable. Please try again later.
                  </div>
                {% endif %} {# note.static_html #}
              </div><!-- /body_copy -->
            </div>
          </div><!-- /note_container -->

          <div id="keywords" class="content">
            <div class="row">
              <div class="small-12 columns">
                <p>These key terms and definitions have been defined by KarmaNotes users.
                You can edit them for accuracy and add more if you like.</p>
                <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
                <table id="keywords-data-table">
                  <thead>
                    <tr>
                      <td>Key Terms</td>
                      <td>Definitions</td>
                    </tr>
                  </thead>
                  {% for keyword in keywords %}
                    <tr>
                      <td>{{ keyword.word }}</td>
                      <td>{{ keyword.definition }}</td>
                    </tr>
                  {% endfor %}
                </table>

                <form id="keyword-form" action="{{ note.get_absolute_url }}#keywords" method="post" class="hide">
                  {% csrf_token %}
                  {{ keyword_formset.management_form }}
                  <div class="hide" id="keyword-form-prototype">
                    <div class="row keyword-form-row">
                      <div class="small-12 large-4 columns">
                        {{ keyword_prototype_form.keyword }}
                      </div>
                      <div class="small-12 large-8 columns">
                        {{ keyword_prototype_form.definition }}
                        {{ keyword_prototype_form.id }}
                      </div>
                    </div>
                    <hr class="hide-for-large-up" />
                  </div>
                  <div id="keyword-form-rows">
                    {% for form_row in keyword_formset %}
                      <div class="row keyword-form-row" data-index="{{ forloop.counter0 }}">
                        <div class="small-12 large-4 columns">
                          {{ form_row.keyword }}
                        </div>
                        <div class="small-12 large-8 columns">
                          {{ form_row.definition }}
                          {{ form_row.id }}
                        </div>
                      </div>
                      <hr class="hide-for-large-up" />
                    {% endfor %}
                  </div>
                  <div class="row hide-for-medium-down">
                    <div class="small-12 columns">
                      <p class="keywords-hint">(Click <i class="fa fa-plus"></i> or press TAB in the last definition for another row)</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="small-2 columns">
                      <button type="submit" name="action" value="keyword-form">Save</button>
                    </div>
                    <div class="small-9 large-10 columns center">
                      <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section><!--/note_content-->

  <ol class="joyride-list" data-joyride
        data-options="cookie_monster: true; cookie_name: note_detail_joyride">
    <li data-id="note-content-wrapper" data-text="Awesome!" data-options="tip_location: top">
      <p>You can highlight important words or phrases in this note to add definitions for them.</p>
    </li>
    <li data-id="keywords-tab-button" data-text="Awesome!" data-options="tip_location: top">
      <p>Keywords you define will appear here, and you can define new ones here too.</p>
    </li>
  </ol>

{% endblock %}