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

{% block pagescripts %}
  <script>
    var json_school_course_list = "{% url 'json_school_course_list' %}";
    var json_school_course_instructor_list = "{% url 'json_school_course_instructor_list' %}";
    var csrf_token = "{{ csrf_token }}";
    var course_flag_url = "{% url 'flag_course' course.id %}";
    var course_edit_url = "{% url 'edit_course' course.id %}";
    var dataTable_sDom = '<"top">rt<"bottom"p><"clear">';
  </script>
  {% compress js %}
    <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
    <script src="{{ STATIC_URL }}js/course.js"></script>
    <script src="{{ STATIC_URL }}js/course-detail.js" ></script>
    <script src="{{ STATIC_URL }}js/note-list.js" ></script>
    <script src="{{ STATIC_URL }}js/filepicker.js"></script>
  {% endcompress %}
{% endblock %}

{% block pagestyle %}
  {% compress css %}
    <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
  {% endcompress %}
{% endblock %}

{% block title %}
  Share Notes for {{ course.name }} | {% if course.school %}{{ course.school.name }}{% else %}{{ course.department.school.name }}{% endif %}
{% endblock %}

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

    <div id="course-header">
      <div class="row header-byline">
        <div class="small-12 columns">
          {% if course.school %}
            <span id="course-header-school">{{ course.school.name }}</span>
          {% else %}
            <span id="course-header-school">{{ course.department.school.name }}</span>
          {% endif %}
          &nbsp;&nbsp;&bull;&nbsp;&nbsp;
          {% if course.department %}<span class="course-header-department">{{ course.department.name }}</span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;{% endif %}
          {% if course.instructor_name %}
            <span id="course-header-instructor">{{ course.instructor_name }}</span>
          {% else %}
            <span id="course-header-instructor">
              {% for prof in course.professor.all %}
                {{ prof.name }}{% if not forloop.last %},{% endif %}
              {% endfor %}
            </span>
          {% endif %}
        </div>
      </div>

      <div class="row museo700">
        <div class="small-12 columns">
          <span id="course-header-name" class="header-title">{{ course.name }}</span>

          &nbsp;&nbsp;
          <div class="hide-for-large-up"></div>

          <span style="display: inline;">
            <span class="show-for-large-up">
              {% if user.is_authenticated %}
                {% comment %}
                {% if user.get_profile.can_edit_items %}
                  <button id="edit-button" data-reveal-id="edit-course-form" class="modify-button"> <i class="fa fa-edit"></i> Edit this course</button>&nbsp;&nbsp;
                {% endif %}
                {% endcomment %}

                {% if already_flagged %}
                  <i class="fa fa-flag"></i> You have reported this course as inappropriate
                {% else %}
                  <button id="flag-button" class="modify-button"><i class="fa fa-flag"></i> Report course as inappropriate</button>
                {% endif %}
              {% endif %}
            </span>
          </span>

        </div>
      </div>

      <div class="row {% if not course.url %}hide{% endif %}">
        <div id="course_link" class="small-12 columns">
          <a id="course_url" rel="nofollow" target="_blank" href="{{ course.url }}">
            {{ course.url|slice:":50" }}
            <i class="fa fa-external-link-square"></i>
          </a>
        </div>
      </div>

      <div id="end-header" class="row">
      </div>

    </div><!-- /course_header -->

    {% comment %}
    {% if user.get_profile.can_edit_items %}
      {% include 'partial/edit_course.html' %}
    {% endif %}
    {% endcomment %}

    <div id="note-search-bar" class="row">
      <div class="small-12 large-3 columns">
        {{ file_upload_form.fp_file }}
      </div>
      <div class="small-12 large-9 columns">
        <form class="search-notes" action="{% url 'note_search' %}" method="GET">
          <input type="hidden" name="course_id" value="{{ course.id }}" />
          <input name="query" class="search" type="text" placeholder="Search Notes" />
          <button type="submit" class="search-icon"><i class="fa fa-search inline"></i></button>
        </form>
      </div>
      <div class="small-12 columns">
        {% include 'partial/filepicker.html' %}
      </div>
    </div>

    <div class="row filter-options show-for-large-up">
      <div class="large-3 columns">
        <div class="sort-label">Sort By</div>
        <div class="select-wrapper">
          <select class="note-sort">
            <option value="0" selected>Date Added</option>
            <option value="1">Popularity</option>
          </select>
        </div>
      </div>

      <div class="large-3 columns end">
        <div class="sort-label">Category</div>
        <div class="select-wrapper">
          <select class="note-category">
            <option value="ALL" selected>All Categories</option>
            {% for category in note_categories %}
              <option value="{{ category.0 }}">{{ category.1 }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div id="course_container">
      <div class="row">
        <div class="small-12 columns">
          {% if not note_set %}
            <p>This course has no notes yet.</p>
          {% else %}
            <!-- Main course table -->
            <table id="data_table_list">
              <thead class="hide">
                <tr>
                  <th class="no-display" id="data-table-date"> Date </th>
                  <th class="no-display" id="data-table-thanks"> Popularity </th>
                  <th class="no-display" id="data-table-category"> Category </th>
                  <th class="no-display" id="data-table-note"> Note </th>
                </tr>
              </thead>
              <tbody>
                {% for note in note_set %}
                  {% include 'notes/note_list_entry.html' with note=note %}
                {% endfor %}
              </tbody>
            </table>
          {% endif %}
        </div>
      </div> <!-- .row -->

    </div><!-- /course_container -->

  </section><!--/course_content-->

{% endblock %}