{% 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" href="{{ STATIC_URL }}css/course_list_table.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css"> <!-- dataTables -->
<link rel="stylesheet" href="{{ STATIC_URL }}css/vendor/opentip.css"> <!-- opentip -->
{% endblock %}

{% block pagescripts %}
<script src="{{ STATIC_URL }}js/jquery.dataTables.js"></script>
<script src="{{ STATIC_URL }}js/opentip-jquery-excanvas.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
  $('#course_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
    'aoColumns': [
      { "bSearchable": false, "bSortable":false, },
      { "bSearchable": false },
      { "bSearchable": false },
      null,
      null,
      null,
      null, 
    ],
    "aoColumnDefs": [ 
    {
      "aTargets": [ 'note-count' ], // matches a 'th' element class name
      "mData": function ( source, type, val ) {
        //console.log(source);
        if (type === 'set') {
          source.count = val;
          // Store the computed dislay and filter values for efficiency
          source.count_display = val=="" ? "" : val+" Notes";
          return;
        }
        else if (type === 'display') {
          return source.count_display;
        }
        // 'sort', 'type', 'filter' and undefined all just use the integer
        return source.count;
      } 
    },
    {
      "aTargets": [ 'date' ], // matches a 'th' element class name
      "mData": function ( source, type, val ) {
        //console.log(source);
        if (type === 'set') {
          source.date = val;
          source.date_display = val=="" ? "" : "Updated on "+val;
          return;
        }
        else if (type === 'display') {
          return source.date_display;
        }
        // for types 'sort', 'type', 'filter' and undefined use raw date
        return source.date;
      }
    }],
    // 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="Pieter J. Smits, from The Noun Project">
      </div>
      <div class="small-9 large-10 columns">
        <div class="row subhead-spacer hide-for-small"> </div>
        <span>Access a growing database of {{ note_count }} college lecture notes</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <!-- Main course table -->
      <table id="course_list" class="">
        <!-- specify col widths -->
        <colgroup>
          <col span="1" style="width: 100%">
          <col span="5" style="width: 0%">
        </colgroup> 
        <thead>
          <tr>
            <th class="sort_by">Sort by:</th>
            <th class="date"> Date </th>
            <th class="note-count"> #Notes </th>
            <th class="course-name"> Course Name </th>
            <th class="school-name"> Institution </th>
            <th class="instructor-name"> Instructor </th>
          </tr>
        </thead>
        <tbody>
        {% for course in object_list %}
          <tr>
              <td class="sort_by"></td>
              <td class="slim large-4 columns">{{ course.updated_at|date:"F d, o" }} </td>
              <td class="note-count slim large-2 large-offset-2 columns">  {{ course.file_count }} </td>

              <td class="course-name large-5 columns">
                <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> 
              </td>
              <td class="upload large-1 column">
                <div class="upload">
                  <a href="{{ course.get_absolute_url }}#upload-note">
                    <i
                      data-ot="Upload directly to this course"
                      data-ot-target="true"
                      data-ot-tip-joint="top center"
                      data-ot-target-joint="bottom center"
                      data-ot-background="white"
                      data-ot-border-color="black"
                      class="icon-upload opentip"></i>
                  </a>
                </div>
              </td>
              <td class="school-name large-3 columns">      {{ course.school.name }} </td>
              <td class="instructor-name large-3 columns">  {{ course.instructor_name }} </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div><!-- .ten columns -->
  </div> <!-- .row -->

  <div class="row">
    <div 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=icon-upload></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 %}