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

{% block title %}
  Share College Course Notes
{% endblock %}

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

{% block pagescripts %}
  <script>
    // If there were form errors, open the form and jump to it
    var jump_to_form = {% if jump_to_form %} true {% else%} false {% endif %};
    var csrf_token = "{{ csrf_token }}";
    var dataTable_sDom = '<"top">rt<"bottom"p><"clear">';
    var course_list_ajax_url = "{% url 'course_list_ajax' %}";
  </script>
  {% compress js %}
    <script type="text/javascript" src="{{ STATIC_URL }}js/setup-ajax.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/course.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/add-course.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/course-list.js"></script>
  {% endcompress %}
{% endblock %}

{% block raw_content %}
  <section id="home_content">
    <div id="page_header">
      <div id="splash" class="museo700">
        <div id="splash_copy" class="row">
          <div class="small-12 large-8 columns large-offset-2">
            Access a growing database of <span class="note_count">{{ note_count }}</span> college lecture notes.
          </div>
        </div>
        <div class="row">
          <div class="small-12 columns">
            <a href="{% url 'about' %}">
              <button id="intro-video-button">About KarmaNotes&nbsp;&nbsp;<i class='fa fa-caret-right fa-lg'></i></button>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div id="course-search-bar">
      <div class="row">
        <div class="small-12 large-3 columns">
          <button id="add-course-btn" class="inline-button important museo700" data-reveal-id="add-course-form">Add a Course</button>
        </div>
        <div class="small-12 large-9 columns">
          <span><input id="search-courses" class="search adelle-sans" type="text" placeholder="Search Courses and Schools" />
          <i class="fa fa-search inline search-icon"></i></span>
        </div>
      </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 id="sort-by">
            <option value="1">Date Added</option>
            <option value="2">Number of Notes</option>
            <option value="3" selected>Popularity</option>
          </select>
        </div>
      </div>
      <div class="large-3 columns show-for-large-up end">
        <div class="sort-label">School</div>
        <div class="select-wrapper">
          <select id="school-filter">
            <option value="ALL" selected>All Schools</option>
            {% for school in schools %}
              <option value="{{ school.name }}">{{ school.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div id="data-table-entry-prototype">
      <div class="data-table-entry hide">
        <div class="table-entry-first-line">
          <span class="table-school"></span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
          <span class="table-department"></span>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
          <span class="table-instructor"></span>
        </div>

        <div class="table-entry-second-line museo700">
          <span class="table-course-name-wrapper"><a class="table-course-link"><span class="table-course-name"></span></a></span>
        </div>

        <div class="table-entry-third-line">
          <span class="table-note-count"><i class="fa fa-file-text-o"></i>&nbsp;&nbsp;<span class="file-count"></span> Notes</span>
          <span class="table-thanks-count"><i class="fa fa-thumbs-up"></i>&nbsp;&nbsp;<span class="thanks-count"></span> Thanks </span>
          <span>Updated <span class="updated-at"></span></span>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="small-12 columns">
        <!-- Main course table -->
        <table id="data_table_list">
          <thead class="hide">
            <tr>
              <th class="no-display" id="data-table-course">Course</th>
              <th class="no-display" id="data-table-date">Date</th>
              <th class="no-display" id="data-table-note-count"># Notes</th>
              <th class="no-display" id="data-table-thanks">Popularity</th>
            </tr>
          </thead>
        </table>
      </div>
    </div> <!-- .row -->

    {% include 'partial/add_course.html' %}

  </section> <!-- #results_content -->

{% endblock %}