{% extends "course/course-base.html" %}

{% load static %}

{% block title %}
  {{ course_desc.number}}
  Calendar - CourseFlow
{% endblock %}

{%block header_extra %}
  <link rel='stylesheet' href='{% static "fullcalendar/dist/fullcalendar.css" %}' />
  <script src='{% static "moment/moment.js" %}'></script>
  <script src='{% static "fullcalendar/dist/fullcalendar.js" %}'></script>
{% endblock %}

{% block content %}
  <h1>{{ course_desc.number}} Calendar</h1>

  <div id="coursecal" style="margin-top:3em"></div>


  <script type="text/javascript">
    $(document).ready(function() {
        $('#coursecal').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          timezone: "local",

          events: {{ events_json|safe }}
        })
    });
  </script>

  <b>Note:</b> Some calendar entries are clickable and link to entries
  below.

  <div style="margin-top:3ex">
  {% for event_info in event_info_list %}
    <div id="event-{{ event_info.id }}" class="panel panel-default cf-calendar-event">
      <div class="panel-heading">
        <b>{{ event_info.human_title }}</b>
        ({{ event_info.start_time }}{% if event_info.end_time %} - {{ event_info.end_time }}{% endif %})
      </div>
      <div class="panel-body">
        {{ event_info.description|safe }}
      </div>
    </div>
  {% endfor%}
  </div>

{% endblock %}