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


{% block pagescripts %}
    <script src="{{ STATIC_URL }}/js/bootstrap-modal.js" ></script>
    <script src="{{STATIC_URL}}ajaxuploader/js/fileuploader.js" ></script>
    <script>
        var course_pk = {{ course.id }};
        var course_name = "{{ course.name }}";

        $(function(){
            var uploader = new qq.FileUploader( {
                action: "{% url 'ajax_upload' %}",
                element: $('#file-uploader')[0],
                multiple: true,
                onComplete: function( id, fileName, responseJSON ) {
                  if( responseJSON.success )
                    console.log( "success!" ) ;
                    $('form#upload_form').attr('action', responseJSON.note_url);
                    $('input.submit_upload').show();
                },
                onAllComplete: function( uploads ) {
                  // uploads is an array of maps
                  // the maps look like this: { file: FileObject, response: JSONServerResponse }
                  console.log( "All complete!" ) ;
                },
                params: {
                  'csrf_token': '{{ csrf_token }}',
                  'csrf_name': 'csrfmiddlewaretoken',
                  'csrf_xname': 'X-CSRFToken',
                  'course_id': {{ course.id }},
                },
              }) ;
        });
    </script>
{% endblock %}


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


{% block lightboxen %}
  {% include 'lightbox/upload.html' %}
{% endblock %}


{% block title %}
  Share Notes for {{ course.name }} | {{ course.school.name }}
{% endblock %}


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

    <div id="course_header" class="hero_gradient_bar">
      <div class="row">
        <div id="course_subhead" class="twelve columns">
          course
        </div><!-- /course_subhead -->
      </div>

      <div class="row">
        <div id="note_name" class="twelve columns">
          {{ course.name }}
        </div><!-- /note_name -->
      </div>

      <div class="row">
        <div id="course_meta" class="twelve columns">
          <div class="activity_details_context">
            {% comment %}
            <!-- Version of the instructor//school with links to instructor//school
            <a href="#" class="prof_link">{{ course.instructor_name }}</a> // <a href="{{ course.school.get_absolute_url }}" class="school_link">{{ course.school.name }}</a>
            {% endcomment %}
            {{ course.instructor_name }} // {{ course.school.name }}
          </div><!-- /activity_details_context -->
        </div><!-- /course_meta -->
      </div>


      {% comment %}
      <div class="row">
        <div id="course_actions" class="two columns centered">
          <div class="row">
            <div class="six columns">
              {% if course in user.get_profile.courses.all %}
                <div class="course_meta_action course_meta_drop" data-id="{{ course.id }}">
                  drop
                </div>
              {% else %}
                <div class="course_meta_action course_meta_join" data-id="{{ course.id }}">
                  join
                </div>
              {% endif %}
            </div>
            <div id="course_meta_action_gear" class="six columns">
              <img src="/static/img/course_action_gear.png" alt="course_action_gear" width="39" height="37" />
            </div>
          </div>
        </div>
      </div>
      {% endcomment %}

      <div class="row">
        <div id="course_description" class="eight columns centered">
         {% if course.desc %}
            {{ course.desc }}
         {% endif %}
          <!-- TODO: We don't provide a course description -->
        </div><!-- /course_description -->
      </div>

      <div class="row">
        <div class="three columns centered">
          <div id=upload_button_container class=button_bevel >
            <div id=upload_button course=button_interior data-id="{{ course.id }}">
              upload
            </div>
          </div>
        </div>
      </div>

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

    <div class="row">
      <div class="ten columns offset-by-one">
        <div class="column_header" style="margin: 17px 0 -25px 0">
          Latest uploaded notes
        </div><!-- /column_header -->
      </div>
    </div> <!-- .row -->

    <div id="course_container">
      <div class="row">
        <div class="ten columns offset-by-one">

          {% for note in course.note_set.all %}

          <div class="row notes_result_container wide">
            <div class="twelve columns notes_result {% if forloop.counter|divisibleby:"2" %}row_alt_on{% endif %}">
              <div class="activity_timestamp">
                {{ note.uploaded_at|date:"gA" }} // {{ note.uploaded_at|date:"D M d o" }}
              </div>

              <div class="activity_details_action">
                <a href="{{ note.get_absolute_url }}" class="activity_target">{{ note.name }}</a>
                {% comment %}
                <!-- file name and info with uploader info -->
                <a href="#" class="activity_actor">{{ note.owner.get_profile.get_name }}</a> added <a href="{{ note.get_absolute_url }}" class="activity_target">{{ file.name }}</a>
                {% endcomment %}
              </div>

              <div class="activity_details_context">
                <a href="{{ course.get_absolute_url }}" class="course_link">{{ course.name }}</a>//<a href="{{ course.school.get_absolute_url }}" class="school_link">{{ course.school.name }}</a>
              </div>
              <div class="activity_details_callout">
                <div class="row">
                  <div class="one column">
                    <img src="/static/img/dashboard_activity_callout_icon_notebook.png" alt="dashboard_activity_callout_icon_notebook" width="44" height="44" />
                  </div>
                  <div class="eleven columns activity_details_callout_copy">

                    {% if note.text %}
                      {{ note.text|slice:":500" }}&hellip;
                    {% else %}
                      {{ note.description }}
                    {% endif %}
                  </div>
                </div>
              </div>
              {% comment %}
              <!-- # users have liked, # users have viewed -->
              <div class="row">
                <div class="twelve columns activity_details_status">
                  So far, <span class="activity_details_status_number">{{ note.numUpVotes }}</span> people have completely fallen in love with with these notes. <span class="activity_details_status_secondary_number">{{ note.viewCount }}</span> people have viewed them.
                </div><!-- /activity_details_status -->
              </div>
              {% endcomment %}
            </div><!-- /notes_result -->
          </div><!-- /notes_result_container -->
          {% endfor %}
        </div>
      </div>

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

    {% comment %}
    <div class="row">
      <div class="twelve columns">
        <div id="search_pagination" style="width: 232px"><!-- WIDTH SHOULD BE SET DYNAMICALLY TO ENABLE MARGIN: AUTO -->
          <div id="search_pagination_left">
            <img src="img/search_arrow_left.png" alt="search_arrow_left" width="5" height="10" />
          </div><!-- /search_pagination_left -->
          <div id="search_pagination_numbers">
            <ul>
              <li class="button_interior">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div><!-- /search_pagination_numbers -->
          <div id="search_pagination_right">
            <img src="img/search_arrow_right.png" alt="search_arrow_right" width="5" height="10" />
          </div><!-- /search_pagination_right -->
        </div><!-- /search_pagination -->
      </div>
    </div>
    {% endcomment %}
  </section><!--/note_content-->
{% endblock %}