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

{% load ietf_filters %}

{% block title %}
  IETF {{ schedule.meeting.number }} meeting agenda
  {% if "-utc" in request.path %}
    (UTC)
  {% endif %}
{% endblock %}

{% block morecss %}
  iframe#weekview { height: 600px; width: 100%; }
  tr:not(:first-child) th.gap {
  height: 3em !important;
  background-color: inherit !important;
  border: none !important;
  }
  tr:first-child th.gap {
  height: 0 !important;
  background-color: inherit !important;
  border: none !important;
  }
{% endblock %}

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

{% block content %}
  {% origin %}

  <div class="row">
    <div class="col-md-10">

      {% include "meeting/meeting_heading.html" with meeting=schedule.meeting %}

      <p class="label label-info">Updated {{ updated|date:"Y-m-d \a\t G:i:s (T)" }}</p>
      <p></p>
      <p class="alert alert-info">
        <b>Note:</b> IETF agendas are subject to change, up to and during a meeting.
      </p>

      <p class="noprint ">
        {% if "-utc" in request.path %}
          <a href="{% url 'ietf.meeting.views.agenda' num=schedule.meeting.number %}">Agenda in local timezone</a>,
        {% else %}
          {% comment %}<a href="{% url 'ietf.meeting.views.agenda' base='agenda-utc' %}">Agenda in UTC timezone</a>,{% endcomment %}
          <a href="/meeting/agenda-utc">Agenda in UTC timezone</a>,
        {% endif %}
        <a href="{% url 'ietf.meeting.views.agenda' num=schedule.meeting.number ext='.txt' %}">Plaintext agenda</a>,
        <a href="https://tools.ietf.org/agenda/{{schedule.meeting.number}}/">Tools-style agenda</a>
        {% if user|has_role:"Secretariat,Area Director,IAB" %}
          ,
          <a href="{% url 'ietf.meeting.views.agenda_by_room' num=schedule.meeting.number%}">List by Room</a>,
          <a href="{% url 'ietf.meeting.views.agenda_by_type' num=schedule.meeting.number%}">List by Type</a>,
          <a href="{% url 'ietf.meeting.views.room_view' num=schedule.meeting.number%}">Room Grid</a>
        {% endif %}
      </p>

      {# cache this part for 5 minutes -- it takes 3-6 seconds to generate #}
      {% load cache %}
      {% cache 300 ietf_meeting_agenda_utc schedule.meeting.number request.path %}

        <h2>Agenda</h2>

        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-parent="#accordion" href="#customize">
	          <span class="fa fa-caret-down"></span> Customize the agenda view...
	        </a>
	      </h4>
	    </div>
	    <div id="customize" class="panel-collapse collapse">
	      <div class="panel-body">

	        <p>
	          You can customize the agenda view to show only selected sessions,
	          by clicking on groups and areas in the table below.
	          To be able to return to the customized view later, bookmark the resulting URL.
	        </p>

	        <p>Groups displayed in <b><i>italics</i></b> are BOFs.</p>


	        {% regroup schedule.groups by parent.acronym as area_sessions %}
	        <table class="table table-condensed">
	          <thead>
		    <tr>
		      {% for area in area_sessions %}
		        <th style="width:{% widthratio 1 area_sessions|length 100 %}%">
		          <button class="btn btn-default btn-block pickview {{area.grouper|lower}}">{{area.grouper|upper}}</button>
		        </th>
		      {% endfor %}
		    </tr>
	          </thead>
	          <tbody>
		    <tr>
		      {% for area in area_sessions %}
		        <td class="view {{area.grouper|lower}}">
		          <div class="btn-group-vertical btn-block">
		            {% for wg in area.list %}
		              <div class="btn-group btn-group-xs btn-group-justified">
			        <button class="btn btn-default pickview {{wg.acronym}}">
			          {% if wg.is_bof %}
			            <b><i>{{wg.acronym}}</i></b>
			          {% else %}
			            {{wg.acronym}}
			          {% endif %}
			        </button>
		              </div>
		            {% endfor %}
		          </div>
		        </td>
		      {% endfor %}
		    </tr>
	          </tbody>
	        </table>

	        <p>Also show sessions of these groups:</p>
	        <div class="btn-group btn-group-justified">
	          <div class="btn-group"><button class="btn btn-default pickviewneg active iepg"> IEPG</button></div>
	          <div class="btn-group"><button class="btn btn-default pickviewneg active tools"> Tools</button></div>
	          <div class="btn-group"><button class="btn btn-default pickviewneg active edu"> EDU</button></div>
	          <div class="btn-group"><button class="btn btn-default pickviewneg active ietf"> IETF</button></div>
	          <div class="btn-group"><button class="btn btn-default pickviewneg active iesg"> IESG</button></div>
	          <div class="btn-group"><button class="btn btn-default pickviewneg active iab"> IAB</button></div>
	        </div>
	      </div>
	    </div>
          </div>
        </div>

        <h2>Download as .ics</h2>
        <p class="buttonlist">
          {% for area in schedule.area_list %}
            <a class="btn btn-default" href="{% url "ietf.meeting.views.ical_agenda" num=schedule.meeting.number %}?{{area|upper}},-~Other,-~Plenary">{{area|upper}}</a>
          {% endfor %}
          <a class="btn btn-default" href="{% url "ietf.meeting.views.ical_agenda" num=schedule.meeting.number %}">Non-area events</a>
          <a id="ical-link" class="hidden btn btn-primary" href="{% url "ietf.meeting.views.ical_agenda" num=schedule.meeting.number %}">Customized schedule</a>
        </p>


        <h2>
          Schedule
          {% if schedule.meeting.agenda_note %}
            <span class="label label-danger">{{ schedule.meeting.agenda_note|removetags:"h1"|safe }}</span>
          {% endif %}
        </h2>

        <iframe seamless class="hidden" id="weekview"></iframe>

        <table class="table table-condensed table-striped">
          {% for item in filtered_assignments.all %}

            {% ifchanged item.timeslot.time|date:"Y-m-d" %}
              <tr><th class="gap" colspan="6"></th></tr>
              <tr class="warning">
                <th colspan="6" class="anchor-target" id="{{item.timeslot.time|slugify}}">
	          {% if "-utc" in request.path %}
	            {{ item.timeslot.utc_start_time|date:"l, F j, Y" }} (UTC)
	          {% else %}
	            {{ item.timeslot.time|date:"l, F j, Y" }} ({{item.timeslot.tzname}})
	          {% endif %}
	        </th>
              </tr>
            {% endifchanged %}

            {% if item.timeslot.type.slug == 'session' %}
              {% ifchanged %}
                <tr class="info">
	          <th class="text-nowrap text-right">
	            {% if "-utc" in request.path %}
	              {{item.timeslot.utc_start_time|date:"G:i"}}-{{item.timeslot.utc_end_time|date:"G:i"}}
	            {% else %}
	              {{item.timeslot.time|date:"G:i"}}-{{item.timeslot.end_time|date:"G:i"}}
	            {% endif %}
	          </th>
	          <th colspan="5">
	            {% if "-utc" in request.path %}
	              {{ item.timeslot.utc_start_time|date:"l"}}
	            {% else %}
	              {{ item.timeslot.time|date:"l"}}
	            {% endif %}
	            {{item.timeslot.name|capfirst_allcaps}}
	          </th>
                </tr>
              {% endifchanged %}
            {% endif %}

            {% if item.timeslot.type.slug == 'break' or item.timeslot.type.slug == 'reg' or item.timeslot.type.slug == 'other' %}
              {% with session_id=item.timeslot.time|date:"D-Hi"|lower|add:"-"|add:item.session.group.acronym|lower|add:"-"|add:item.timeslot.get_location|slugify %}
                <tr id="row-{{session_id}}">
	          <td class="text-nowrap text-right">
	            {% if "-utc" in request.path %}
	              {{item.timeslot.utc_start_time|date:"G:i"}}-{{item.timeslot.utc_end_time|date:"G:i"}}
	            {% else %}
	              {{item.timeslot.time|date:"G:i"}}-{{item.timeslot.end_time|date:"G:i"}}
	            {% endif %}
	          </td>
                  <td colspan="3">
                    {% if item.timeslot.show_location and item.timeslot.get_location %}
                      <a href="https://tools.ietf.org/agenda/{{schedule.meeting.number}}/venue/?room={{ item.timeslot.get_location|slugify }}">{{item.timeslot.get_location|split:"/"|join:"/<wbr>"}}</a>
	            {% endif %}
	          </td>
                  <td colspan="2">
	            {{item.timeslot.name}}
	          </td>
                </tr>
              {% endwith %}
            {% endif %}

            {% if item.timeslot.type.slug = 'session' or item.timeslot.type.slug == 'plenary' %}
              {% if item.session.group %}
                {% with session_id=item.timeslot.time|date:"D-Hi"|lower|add:"-"|add:item.area|default:"unknown"|lower|add:"-"|add:item.session.group.acronym|lower %}
                  <tr id="row-{{session_id}}" {% if item.timeslot.type.slug == 'plenary' %}class="{{item.timeslot.type.slug}}danger"{% endif %}>

	            {% if item.timeslot.type.slug == 'plenary' %}
	              <th class="text-nowrap text-right">
                        {% if "-utc" in request.path %}
	                  {{item.timeslot.utc_start_time|date:"G:i"}}-{{item.timeslot.utc_end_time|date:"G:i"}}
	                {% else %}
	                  {{item.timeslot.time|date:"G:i"}}-{{item.timeslot.end_time|date:"G:i"}}
	                {% endif %}
	              </th>
                      <td colspan="3">
                        {% if item.timeslot.show_location and item.timeslot.get_location %}
	                  <a href="https://tools.ietf.org/agenda/{{schedule.meeting.number}}/venue/?room={{ item.timeslot.get_location|slugify }}">{{item.timeslot.get_location|split:"/"|join:"/<wbr>"}}</a>
	                {% endif %}
	              </td>

	            {% else %}
                      <td></td>

	              <td>
                        {% if item.timeslot.show_location and item.timeslot.get_location %}
	                  <a href="https://tools.ietf.org/agenda/{{schedule.meeting.number}}/venue/?room={{ item.timeslot.get_location|slugify }}">{{item.timeslot.get_location|split:"/"|join:"/<wbr>"}}</a>
	                {% endif %}
	              </td>

                      <td><span class="hidden-xs">{{item.session.group.parent.acronym}}</span></td>

	              <td>
	                {% if item.session.group.charter %}
	                  <a href="{{item.session.group.charter.get_absolute_url}}">{{item.session.group.acronym}}</a>
	                {% else %}
	                  {{item.session.group.acronym}}
	                {% endif %}
	              </td>
	            {% endif %}

	            <td>
	              {% if item.session.agenda %}
	                <a href="/meeting/{{ schedule.meeting.number }}/agenda/{{ item.session.group.acronym }}/">
	              {% endif %}
	              {% if item.timeslot.type.slug == 'plenary' %}
	                {{item.timeslot.name}}
	              {% else %}
	                {{item.session.group.name}}
	              {% endif %}
	              {% if item.session.agenda %}
	                </a>
	              {% endif %}

	              {% if item.session.group.state.name = "BOF" %}
	                <span class="label label-success pull-right">BOF</span>
	              {% endif %}

	              {% if item.session.agenda_note %}
	                <br><span class="text-danger">{{item.session.agenda_note}}</span>
	              {% endif %}

	              <div class="modal fade" id="modal-{{ session_id }}" tabindex="-1" role="dialog" aria-labelledby="label-{{ session_id }}" aria-hidden="true">
	                <div class="modal-dialog modal-lg">
	                  <div class="modal-content">
		            <div class="modal-header">
		              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		              <h4 class="modal-title" id="label-{{session_id}}">
		                Meeting materials for
		                {% if item.timeslot.type.slug == 'plenary' %}{{item.timeslot.name}}{% else %}{{item.session.group.name}}{% endif %}

		              </h4>
		            </div>
		            <div class="modal-body">
		              {% if item.session.agenda %}
		                {% if item.session.agenda.file_extension == "txt" or item.session.agenda.file_extension == "html" or item.session.agenda.file_extension == "htm" %}
		                  <h4>Agenda</h4>
		                  <div class="frame" data-src="{{item.session.agenda.href}}"></div>
		                {% else %}
		                  <span class="label label-info">Agenda submitted as {{item.session.agenda.file_extension|upper}}</span>
		                {% endif %}
		              {% else %}
		                <span class="label label-warning">No agenda submitted</span>
		              {% endif %}

		              {% if item.session.slides %}
		                <h4>Slides</h4>
		                <ul class="fa-ul list-unstyled">
		                  {% for slide in item.session.slides %}
		                    <li>
		                      <span class="fa-li fa fa-file-{{slide.file_extension|lower}}-o"></span>
		                      <a href="{{ slide.href }}">{{ slide.title|clean_whitespace }}</a>
		                    </li>
		                  {% endfor %}
		                </ul>
		              {% endif %}
		            </div>
		            <div class="modal-footer">
		              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		            </div>
	                  </div>
	                </div>
	              </div>
	            </td>
                    <td class="text-nowrap">
                    <span class="hidden-xs">
	              {% if item.session.agenda %}
	                <button class="btn btn-default btn-xs" data-toggle="modal" data-target="#modal-{{session_id}}"><span class="fa fa-arrows-alt" title="Show meeting materials"></span></button>
	                <a class="btn btn-default btn-xs" href="/meeting/{{schedule.meeting.number}}/agenda/{{item.session.group.acronym}}-drafts.tgz" title="Download meeting materials as .tar archive"><span class="fa fa-file-archive-o"></span></a>
	                <a class="btn btn-default btn-xs" href="/meeting/{{ schedule.meeting.number }}/agenda/{{item.session.group.acronym}}-drafts.pdf" title="Download meeting materials as PDF file"><span class="fa fa-file-pdf-o"></span></a>
	              {% endif %}
	              </span>
	            </td>
                  </tr>
                {% endwith %}
              {% endif %}
            {% endif %}
          {% endfor %}
        </table>

    </div>
    <div class="col-md-2 hidden-print bs-docs-sidebar" id="affix">
      <ul class="nav nav-pills nav-stacked small" data-spy="affix">
        {% for item in filtered_assignments.all %}
          {% ifchanged item.timeslot.time|date:"Y-m-d" %}
            <li><a href="#{{item.timeslot.time|slugify}}">{{ item.timeslot.time|date:"l, F j, Y" }}</a></li>
          {% endifchanged %}
        {% endfor %}
      </ul>
    </div>
  </div>

      {% endcache %}
{% endblock %}

{% block js %}
  <script>
   function toggle_visibility() {
       var h = window.location.hash;
       h = h.replace(/^#?,?/, '');

       // reset UI elements to default state
       $(".pickview").removeClass("active disabled");
       $(".pickviewneg").addClass("active");

       if (h) {
           // if there are items in the hash, hide all rows that are
           // hidden by default, show all rows that are shown by default
           $('[id^="row-"]').hide();
           $.each($(".pickviewneg").text().trim().split(/ +/), function (i, v) {
               v = v.trim().toLowerCase();
               $('[id^="row-"]').filter('[id*="-' + v + '"]').show();
           });

           // show the customizer
           $("#customize").collapse("show");

           // loop through the has items and change the UI element and row visibilities accordingly
           $.each(h.split(","), function (i, v) {
               if (v.indexOf("-") == 0) {
                   // this is a "negative" item: when present, hide these rows
                   v = v.replace(/^-/, '');
                   $('[id^="row-"]').filter('[id*="-' + v + '"]').hide();
                   $(".view." + v).find("button").removeClass("active disabled");
                   $("button.pickviewneg." + v).removeClass("active");
               } else {
                   // this is a regular item: when present, show these rows
                   $('[id^="row-"]').filter('[id*="-' + v + '"]').show();
                   $(".view." + v).find("button").addClass("active disabled");
                   $("button.pickview." + v).addClass("active");
               }
           });

           // show the week view
           $("#weekview").attr("src", "week-view.html" + window.location.hash).removeClass("hidden");

           // show the custom .ics link
           $("#ical-link").attr("href",$("#ical-link").attr("href").split("?")[0]+"?"+h);
           $("#ical-link").removeClass("hidden");

       } else {
           // if the hash is empty, show all and hide weekview
           $('[id^="row-"]').show();
           $("#ical-link, #weekview").addClass("hidden");
       }
   }

   $(".pickview, .pickviewneg").click(function () {
       var h = window.location.hash;
       var item = $(this).text().trim().toLowerCase();
       if ($(this).hasClass("pickviewneg")) {
           item = "-" + item;
       }

       re = new RegExp('(^|#|,)' + item + "(,|$)");
       if (h.match(re) == null) {
           if (h.replace("#", "").length == 0) {
               h = item;
           } else {
               h += "," + item;
           }
           h = h.replace(/^#?,/, '');
       } else {
           h = h.replace(re, "$2").replace(/^#?,/, '');
       }
       window.location.hash = h.replace(/^#$/, '');
       toggle_visibility();
   });

   $(document).ready(function () {
       toggle_visibility();
   });

   $(".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);
           });
       }
   });
  </script>
{% endblock %}