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

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

{% block pagestyle %}
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.css">
<!-- <link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css"> -->
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/data_table_list.css">
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css">
{% endblock %}

{% block pagescripts %}
<script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function() {
  // If there were form errors, open the form and jump to it
  var jump_to_form = {% if jump_to_form %}true{% else%}false{% endif %};
  if (jump_to_form) {
    $("#add-course-form").show();
    $('#add-course-btn').hide();
    document.getElementById('add-course-form').scrollIntoView(true);
  }

  // load dataTable for course data
  $('#data_table_list').dataTable({
    // remove the default filter label
    'oLanguage': {
      'sSearch': '',
    },
    // we will set column widths explicitly
    'bAutoWidth': false,
    // don't provide a option for the user to change the table page length
    'bLengthChange': false,
    // sepcify the number of rows in a page
    'iDisplayLength': 20,
    // Position the filter bar at the top
    'sDom': '<"top"f>rt<"bottom"p><"clear">', 
    // Specify options for each column
    "aoColumnDefs": [ 
      {
        // 4th element: thanks
        "aTargets": [ 3 ],
        "bSortable": true,
        "bVisible": true
      },
      {
        // 3rd element: notes
        "aTargets": [ 2 ],
        "bSortable": true,
        "bVisible": true
      },
      {
        // 2nd element: date
        "aTargets": [ 1 ],
        "bSortable": true,
        "bVisible": true
      },
      {
        // 1st element: "sort by" label
        "aTargets": [ 0 ],
        "bSortable": false,
        "bVisible": true
      }
    ],
    // Initial sorting
    'aaSorting': [[2,'desc']]
  });
  $('.dataTables_filter input').attr("placeholder", "search courses");
  // TODO: can't prepend html to .dataTables_filter input html for fontawesome search icon
});
</script>
{% endblock %}

{% block content %}
<section id="home_content">
  <div id="page_header" class="">
    <div id="subhead" class="row">
      <div class="small-3 large-2 columns">
        <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="A depiction of books">
      </div>
      <div class="small-9 large-10 columns">
        <div class="row subhead-spacer hide-for-small"> </div>
        <span>Access a growing database of <span style="color: #f05a28;">{{ note_count }}</span> college lecture notes</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <!-- Main course table -->
      <table id="data_table_list">
        <thead>
          <tr>
            <th id="data-table-sort-by"> Sort by: </th>
            <th id="data-table-date"> Date </th>
            <th id="data-table-note-count"> #Notes </th>
            <th id="data-table-thanks"> Popularity </th>
            <th class="no-display" id="data-table-upload"> Upload </th>
            <th class="no-display" id="data-table-course-name"> Course Name </th>
            <th class="no-display" id="data-table-school-name"> Institution </th>
            <th class="no-display" id="data-table-instructor-name"> Instructor </th>
          </tr>
        </thead>
        <tbody>
        {% for course in object_list %}
          {% include 'courses/course_list_entry.html' %}
        {% endfor %}
        </tbody>
      </table>
    </div><!-- .ten columns -->
  </div> <!-- .row -->

  <div class="row">
    <div id="add-course-divider" class="small-10 columns small-offset-1"> <hr/> </div>
  </div>

  <div class="row">
    <div class="small-12 columns large-10 large-offset-1">
      <div id="add-course-btn">
        <i class="fa fa-arrow-circle-o-up"></i> add a course
      </div>
        {% include 'partial/add_course.html' %}
    </div><!-- .ten columns -->
  </div> <!-- .row -->

  <div class="row">
    <div class="small-10 columns small-offset-1"> <hr/> </div>
  </div>

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

{% endblock %}

{% block bodyscripts %}
{% endblock bodyscripts %}
