{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}
{% load tz %}

{% get_current_timezone as TIME_ZONE %}

{% block title %}{{ workout.name }}{% endblock %}
{% block og_title %}{{ workout.name }}{% endblock %}
{% block description %}{{ workout.name }}
{{ workout.date }} - {{ workout.distance }}m - {{ workout.duration |durationprint:"%H:%M:%S.%f" }}{% endblock %}
{% block og_description %}{{ workout.name }}
{{ workout.date }} - {{ workout.distance }}m - {{ workout.duration |durationprint:"%H:%M:%S.%f" }}{% endblock %}

{% block meta %}
<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

{% for chart in charts %}
{{ chart.script |safe }}
{% endfor %}
{% endblock %}

{% block scripts %}
{% include "monitorjobs.html" %}
<script>
  $(function($) {
  console.log('loading script');
  var workoutid = {{ workout.id }};
  var shownotes = true;
  if("{{ rower.showfavoritechartnotes }}" == "False") {
     shownotes = false;
  }
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/workout/{{ workout.id }}/get-thumbnails', function(json) {
  var counter=0;
  $("#id_sitready").remove();
  $("#id_thumbs").append(
  "<p>Click on the thumbnails to view the full chart.</p>");
  $.each(json, function(index, element) {
  console.log('adding thumbnail');
  var counter2 = counter+1;
  if (shownotes) {
  $("#id_thumbs").append(
  "<div class=\"grid_3 alpha\">"+
    "<big>"+counter2+"</big>"+
    "<div class=\"grid_3 tooltip\">"+
      "<a href=\"/rowers/workout/"+workoutid+"/flexchart?favoritechart="+counter+"\">"+element.div+"</a>"+
      "<span class=\"tooltiptext\">"+element.notes+"</span>"+
      "</div></div>");
  } else {
  $("#id_thumbs").append(
  "<div class=\"grid_3 alpha\">"+
    "<big>"+counter2+"</big>"+
    "<div class=\"grid_3 tooltip\">"+
      "<a href=\"/rowers/workout/"+workoutid+"/flexchart?favoritechart="+counter+"\">"+element.div+"</a>"+
      "</div></div>");

  }
  $("#id_thumbscripts").append(element.script);
  counter += 1;
  });
  });
  });
</script>

{% endblock %}


{% block content %}
<div id="page" class="grid_12 alpha">
  <div class="grid_10 prefix_2 alpha">
    <h1>{{ workout.name }}</h1>
    {% if workout.user.user != user %}
    <h2>{{ workout.user.user.first_name }} {{ workout.user.user.last_name }}
    {% endif %}
  </div>
  <div id="leftpanel" class="grid_2 alpha">
    {% block left_panel %}
    <div class="grid_2 alpha">
  <p>
    <a class="button gray small" href="/rowers/me/workflowconfig2">Configure this page</a>
  </p>
</div>
     {% for templateName in leftTemplates %}
      {% include templateName %}
    {% endfor %}
    {% endblock %}
  </div>
  <div id="middlepanel" class="grid_9">
    {% block middle_panel %}
    {% for templateName in middleTemplates %}
    <div class="grid_9">
      {% include templateName %}
    </div>
     {% endfor %}
    {% endblock %}
  </div>
  <div id="rightpanel" class="grid_1">
    {% block right_panel %}
    <p>&nbsp;</p>
    {% endblock %}
</div>
{% endblock %}