{% extends "site_base.html" %}

{% load i18n %}
{% load cache %}
{% load lca2018_tags %}

{% block head_title %}Conference Schedule{% endblock %}
{% block page_title %}Conference Schedule{% endblock %}

{% block content %}
  <div class="float-right d-print-none">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="downloadMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Download
      </button>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadMenuButton">
        <h6 class="dropdown-header">Format</h6>
        <a class="dropdown-item" href="{% url "ical_feed" %}">iCal (ICS)</a>
        <a class="dropdown-item" href="{% url "schedule_json" %}">JSON</a>
      </div>
    </div>
  </div>

  <div class="row d-print-none">
    <div class="col">
      <ul class="nav nav-pills flex-column flex-md-row" id="schedule-tabs" role="tablist">
        {% for section in sections %}
        {% for timetable in section.days %}
          <li class="nav-item flex-md-fill text-md-center">
            {% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
          </li>
        {% endfor %}
      {% endfor %}
      </ul>
    </div>
  </div>

  <div class="tab-content d-print-block my-3" id="schedule-tabContent">
    {% for section in sections %}
      {% cache 600 "schedule-table" section.schedule.section %}
      {% for timetable in section.days %}
      <div class="row tab-pane fade {% if forloop.first %}show active{% endif %} d-print-block" id="{{ timetable.day.date|date:"l"|lower}}" role="tabpanel" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab">
        <div class="col-12">
          <h2 class="my-4">
            {{ section.schedule.section.name }}
            <span class="clearfix d-sm-block d-md-none"></span>
            <small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small>
          </h2>
          <div class="table-responsive d-none d-md-block">
            {% include "symposion/schedule/_grid.html" %}
          </div>
          <div class="mobile-schedule d-sm-block d-md-none">
            {% include "symposion/schedule/_mobile.html" %}
          </div>
        </div>
      </div>
      {% endfor %}
      {% endcache %}
    {% endfor %}
  </div>
{% endblock %}

{% block scripts_extra %}
  <script type="text/javascript">

    var fragment = window.location.hash.toLowerCase().substring(1);

    if (fragment) {
      var fragmentid = "#schedule_day_" + fragment + "-tab";
      $(fragmentid).tab('show');
    } else {
      var OFFSET = -10 * (60 * 60 * 1000); // Gold Coast is 10 hours ahead of UTC in Jan.
      var JAN = 0; // because January is 0, not 1

      var fragments = [
        {"day": "monday", "time": Date.UTC(2020, JAN, 13)},
        {"day": "tuesday", "time": Date.UTC(2020, JAN, 14)},
        {"day": "wednesday", "time": Date.UTC(2020, JAN, 15)},
        {"day": "thursday", "time": Date.UTC(2020, JAN, 16)},
        {"day": "friday", "time": Date.UTC(2020, JAN, 17)},
        {"day": "saturday", "time": Date.UTC(2020, JAN, 18)},
      ];

      var now = new Date().getTime();

      for (var i = 0; i < 5; i++) {
        var f = fragments[i];
        var g = fragments[i+1];
        if ((f.time + OFFSET) <= now && now < (g.time + OFFSET)) {
          fragment = f.day;
        }
      }
    }

    window.addEventListener("hashchange", function(event) {
      var fragment = window.location.hash.toLowerCase().substring(1);

      if (!fragment) {
        return;
      };

      var tab_id = "#schedule_day_" + fragment + "-tab";
      $(tab_id).tab('show');
    }, false);

    $(".nav-item").click(function(event) {
      // This updates the window location fragment so that
      // the URL bar is updated, and so that when you go
      // back, it loads the right page.

      // len("schedule_day_") == 13
      var day_tab = event.target.id.substring(13);
      var day = day_tab.substr(0, day_tab.length-4);

      if (history.pushState) {
        history.pushState(null, null, "#" + day);
      }
    });
  </script>
  {{ block.super }}
{% endblock %}