{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% load cache %}
{% load ietf_filters staticfiles classname %}

{% block pagehead %}
<link rel="stylesheet" href="{% static "jquery.tablesorter/css/theme.bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "fullcalendar/core/main.css" %}">
<link rel="stylesheet" href="{% static "fullcalendar/daygrid/main.css" %}">

{% endblock %}

{% block bodyAttrs %}data-spy="scroll" data-target="#affix"{% endblock %}

{% block title %}Upcoming Meetings{% endblock %}

{% block content %}
  {% origin %}
  <div class="row">
    <div class="col-md-10">

      <h1>Upcoming Meetings
         <span class="regular pull-right">
         <a title="iCalendar subscription for upcoming meetings" href="webcal://{{request.get_host}}{% url 'ietf.meeting.views.upcoming_ical' %}">
            <span class="fa fa-stack-1"><i class="fa fa-fw fa-calendar-o fa-stack-1x"></i><i class="fa fa-fw fa-repeat fa-stack-xs"></i></span>
         </a>
         <a title="iCalendar entry for upcoming meetings" href="{% url 'ietf.meeting.views.upcoming_ical' %}"><span class="fa fa-calendar"></span></a>
         </span>
      </h1>

      <p>For more on regular IETF meetings see <a href="https://www.ietf.org/meeting/upcoming.html">here</a></p>

      {% if menu_entries %}
      <ul class="nav nav-tabs" role="tablist">
        {% for name, url in menu_entries %}
          <li {% if selected_menu_entry == name.lower %}class="active"{% endif %}>
            <a href="{{ url }}">{{ name }}</a>
          </li>
        {% endfor %}
      </ul>
      {% endif %}

      {% if menu_actions %}
        <div class="buttonlist">
          {% for name, url in menu_actions %}
            <a class="btn btn-default" href="{{ url }}">{{ name }}</a>
          {% endfor %}
        </div>
      {% endif %}
  
      {% cache 600 upcoming-meetings entries.count %}
        {% if entries %}
          <table class="table table-condensed table-striped tablesorter">
            <thead>
              <tr>
                <th>Date</th>
                <th>Group</th>
                <th>Meeting</th>
                <th class="sorter-false text-right">&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {% for entry in entries %}
                <tr>
                  {% if entry|classname == 'Meeting' %}
                    {% with meeting=entry %}
                      <td>{{ meeting.date }} - {{ meeting.end }}</td>
                      <td>ietf</td>
                      <td><a class="ietf-meeting-link" href="{% url 'ietf.meeting.views.agenda' num=meeting.number %}">IETF {{ meeting.number }}</a></td>
                      <td></td>
                    {% endwith %}
                  {% elif entry|classname == 'Session' %}
                    {% with session=entry meeting=entry.meeting%}
                      <td>{{ session.official_timeslotassignment.timeslot.utc_start_time | date:"Y-m-d H:i"}} - {{ session.official_timeslotassignment.timeslot.utc_end_time | date:"H:i e" }}</td>
                      <td><a href="{% url 'ietf.group.views.group_home' acronym=session.group.acronym %}">{{ session.group.acronym }}</a></td>
                      <td>
                        <a class="interim-meeting-link" href="{% url 'ietf.meeting.views.session_details' num=session.meeting.number acronym=session.group.acronym %}">{{ session.meeting.number }}</a>
                      </td>
                      {% if session.current_status == 'canceled' %}
                        <td class='text-right'>
                          <span class="label label-warning">CANCELLED</span>
                        </td>
                      {% else %}
                        <td class='text-right'>
                          {% include "meeting/interim_session_buttons.html" with show_agenda=True %}
                        </td>
                      {% endif %}
                    {% endwith %}
                  {% else %}
                      <td><span class="label-warning">Unexpected entry type: {{entry|classname}}</span></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  {% endif %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <h3>No upcoming meetings</h3>
        {% endif %}
      {% endcache %}
    </div>
  </div>
  <div id="calendar" class="col-md-10" ></div>
{% endblock %}

{% block js %}
<script src="{% static "jquery.tablesorter/js/jquery.tablesorter.combined.min.js" %}"></script>
<script src="{% static 'fullcalendar/core/main.js' %}"></script>
<script src="{% static 'fullcalendar/daygrid/main.js' %}"></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var glue = calendarEl.clientWidth > 720 ? ' ' : '\n';

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ],
          displayEventTime: false,
          events: [
          {% for entry in entries %}
            {% if entry|classname == 'Meeting' %}
              {% with meeting=entry %}
                {
                  title: 'IETF {{ meeting.number }}',
                  start: '{{meeting.date}}',
                  end: '{{meeting.end}}',
                  url: '{% url 'ietf.meeting.views.agenda' num=meeting.number %}'
                }{% if not forloop.last %}, {% endif %}
              {% endwith %}
            {% else %} {# if it's not a Meeting, it's a Session #}
              {% with session=entry %}
                {
                  title: '{{session.official_timeslotassignment.timeslot.utc_start_time|date:"H:i"}}-{{session.official_timeslotassignment.timeslot.utc_end_time|date:"H:i"}}'+glue+'{{session.group.acronym}}',
                  start: '{{session.official_timeslotassignment.timeslot.utc_start_time | date:"Y-m-d H:i"}}',
                  end: '{{session.official_timeslotassignment.timeslot.utc_end_time | date:"Y-m-d H:i"}}',
                  url: '{% url 'ietf.meeting.views.session_details' num=session.meeting.number acronym=session.group.acronym %}'
                }
              {% endwith %}
              {% if not forloop.last %}, {% endif %}
            {% endif %}
          {% endfor %}
          ],
          eventRender: function(info) {
            $(info.el).tooltip({title: info.event.title});             
          },
          timeFormat: 'H:mm',
        });

        calendar.render();
      });

      $(".modal").on("show.bs.modal", function () {
	  var i = $(this).find(".frame");
	  if ($(i).data("src")) {
	      $.get($(i).data("src"), function (data, status, xhr) {
		  var t = xhr.getResponseHeader("content-type");
		  if (t.indexOf("text/plain") > -1) {
		      data = "<pre class='agenda'>" + data + "</pre>";
		  } else if(t.indexOf("text/html") > -1) {
		      // nothing to do here
		  } else {
		      data = "<p>Unknown type: " + xhr.getResponseHeader("content-type") + "</p>";
		  }
		  $(i).html(data);
	      });
	  }
	  var j = $(this).find(".frame2");
	  if ($(j).data("src")) {
	      $.get($(j).data("src"), function (data, status, xhr) {
		  var t = xhr.getResponseHeader("content-type");
		  if (t.indexOf("text/plain") > -1) {
		      data = "<pre class='agenda'>" + data + "</pre>";
		  } else if(t.indexOf("text/html") > -1) {
		      // nothing to do here
		  } else {
		      data = "<p>Unknown type: " + xhr.getResponseHeader("content-type") + "</p>";
		  }
		  $(j).html(data);
	      });
	  }
      });
    </script>
{% endblock %}