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

{% block title %}
  Search Results
{% endblock %}

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

{% block pagescripts %}
  {% compress js %}
    <script src="{{ STATIC_URL }}js/note-list.js"></script>
  {% endcompress %}
  <script>
    var dataTable_sDom = '<"top">rt<"bottom"><"clear">';
  </script>
{% endblock %}

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

  <div id="results_header">
    <div class="row">
      <div class="small-12 columns search-header museo700">
        You searched for "<strong>{{ query }}</strong>" in
        {% if course %}
          <strong>{{ course.name }}</strong>
        {% else %}
          all notes
        {% endif %}
      </div>
    </div>
  </div>

  <div id="note-search-bar" class="row">
    <div class="small-12 columns">
      <form class="search-notes" action="{% url 'note_search' %}" method="GET">
        <span>
        <input type="hidden" name="course_id" value="{{ course.id }}" />
        {% if course %}
          <input name="query" class="search" type="text" placeholder="Search Notes in {{ course.name }}" />
        {% else %}
          <input name="query" class="search" type="text" placeholder="Search All Notes" />
        {% endif %}
        <button type="submit" class="search-icon"><i class="fa fa-search inline"></i></button>
        </span>
      </form>
    </div>
  </div>

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

  <div id="results_container">
    <div class="row">
      {% if object_list %}
        <div class="small-12 columns">
          <table id="data_table_list">
            <thead class="hide">
              <tr>
                <th id="data-table-date"> Date </th>
                <th id="data-table-thank-count"> Popularity </th>
                <th id="data-table-note-preview"> Preview </th>
              </tr>
            </thead>
            <tbody>
              {% for tuple in object_list %}
                {% include 'notes/note_list_entry.html' with note=tuple.0 note_preview=tuple.1 %}
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
          <div id="no_results" class="small-12 columns center column">
            <h4>Sorry! No results were found.</h4>
            {% if error %}
              <h4>There was an error with your search.</h4>
            {% endif %}
          </div>
        {% endif %}
    </div>

    <div id="search_nav_buttons" class="row">
      <div class="small-12 columns center">
        {% if has_prev %}
          <a href="{% url 'note_search' %}?query={{ query|urlencode }}&course_id={{ course.id }}&page={{ prev_page }}">
            <i class="fa fa-caret-left"></i>&nbsp;Previous</a>
        {% endif %}
        {% if has_next %}
          <a href="{% url 'note_search' %}?query={{ query|urlencode }}&course_id={{ course.id }}&page={{ next_page }}">
            Next&nbsp;<i class="fa fa-caret-right"></i></a>
        {% endif %}
      </div>
    </div>
  </div><!-- /course_container -->

</section>

{% endblock %}
