{% 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">
      Monday miniconfs
      {% for section in sections %}
      {% if "Miniconf" in section.schedule.section.name %}
      {% for timetable in section.days %}
      {% if timetable.day.date|date:"Y-m-d" == "2019-01-21" %}
      {% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
      {% endif %}
      {% endfor %}
      {% endif %}
      {% endfor %}
      <br />

      Tuesday miniconfs
      {% for section in sections %}
      {% if "Miniconf" in section.schedule.section.name %}
      {% for timetable in section.days %}
      {% if timetable.day.date|date:"Y-m-d" == "2019-01-22" %}
      {% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
      {% endif %}
      {% endfor %}
      {% endif %}
      {% endfor %}
      <br />

      {% for section in sections %}
      {% if "Miniconf" not in section.schedule.section.name %}
      {% for timetable in section.days %}
      {% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
      {% endfor %}
      {% endif %}
      {% endfor %}
    </div>
  </nav>
</div>

<div class="schedule-page bg-secondary pt-4 pb-4 mb-0">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="tab-content">
          {% for section in sections %}
          {% for timetable in section.days %}
          <div class="tab-pane fade {% if timetable.day.date|date:'Y-m-d' == '2019-01-23' %}show active{% endif %}" id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}"
            role="tabpanel" aria-labelledby="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab">
            <div class="table-responsive hidden-md-down">
              {% include "symposion/schedule/_grid.html" %}
            </div>
            <div class="mobile-schedule">
              {% include "symposion/schedule/_mobile.html" %}
            </div>
          </div>
          {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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

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

  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var controls = e.target.attributes['aria-controls'].value
    var day = controls.split('-');
    day = day[day.length - 1];
    $('#schedule-date').text(day + ' ' + dates[day] + trailing);
    var loc = window.location.toString().split('?')[0] += '?schedule=' + controls;
    window.history.pushState({path: loc}, '', loc);
  })
</script>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const scheduleName = urlParams.get('schedule');
    if(scheduleName !== null) {
      $('a[href="#' + scheduleName + '"]').tab('show');
    } else {
      var currLoc = $('a[data-toggle="tab"].active').first().attr('aria-controls');
      var loc = window.location.toString().split('?')[0] += '?schedule=' + currLoc;
      window.history.replaceState({path: loc}, '', loc);
    }
  </script>
{{ block.super }}
{% endblock %}