{% extends "utility_page.html" %}

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

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

{% block body_class %}bg-primary text-secondary{% endblock body_class %}
{% block right %}
{% endblock %}
{% block navbar %}{% include 'nav.html' with color='green' %}{% endblock %}
{% block main_class %}container-fluid{% endblock %}

{% block content %}

  <div class="schedule-header text-center">
    <h1>Schedule</h1>
    <h3 id="schedule-date">Wednesday 23 January 2019</h3>

    <nav class="mb-4">
      <div class="nav schedule-nav" id="schedule-nav" role="tablist">
        {% for section in sections %}
        {% for timetable in section.days %}
        <a
          class="nav-item nav-link {% if forloop.first %}active{% endif %}" id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab" data-toggle="tab" href="#{{ timetable.day.date|date:"l"|lower}}" role="tab" aria-controls="{{ timetable.day.date|date:"l"|lower}}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
          {{ timetable.day.date|date:"l"}}
        </a>
        {% endfor %}
        {% endfor %}
      </div>
    </nav>
  </div>

  <div class="schedule-page bg-secondary text-primary pt-4 pb-4 mb-0">
    <div class="container">
      <div class="tab-content">
        {% for section in sections %}
        {% for timetable in section.days %}
        <div
          class="tab-pane fade {% if forloop.first %}show active{% endif %}"
          id="{{ timetable.day.date|date:"l"|lower}}"
          role="tabpanel"
          aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
          >
          <div class="table-responsive hidden-md-down">
          {% cache 180 cache-schedule timetable.day.date %}
            {% include "symposion/schedule/_grid.html" %}
          {% endcache %}
          </div>
          <div class="mobile-schedule">
          {% cache 180 cache-schedule-mobile timetable.day.date %}
            {% include "symposion/schedule/_mobile.html" %}
          {% endcache %}
          </div>
        </div>
        {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}

{%block footer_class %}footer-no-margin{% endblock %}

{% block scripts_extra %}
  <script type="text/javascript">
    var dates = {
      'wednesday': '23',
      'thursday': '24',
      'friday': '25'
    };
    var trailing = ' January 2019';

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      var day = e.target.attributes['aria-controls'].value;
      $('#schedule-date').text(day + ' ' + dates[day] + trailing);
    })
  </script>
  {{ block.super }}
{% endblock %}