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

{% block scripts %}
{% include "monitorjobs.html" %}
{% endblock %}

{% block title %}Change Workout {% endblock %}

{% block content %}
<div id="left" class="grid_6 alpha">
  <div id="summary" class="grid_6 alpha">
    {% if form.errors %}
    <p style="color: red;">
      Please correct the error{{ form.errors|pluralize }} below.
    </p>
    {% endif %}
  
    <h1>Comments {{ workout.name }}</h1>
  
    {% localtime on %}
    <table width=100%>
      <tr>
        <th>Rower:</th><td>{{ first_name }} {{ last_name }}</td>
      </tr><tr>
        <th>Date/Time:</th><td>{{ workout.startdatetime }}</td>
      </tr><tr>
        <th>Distance:</th><td>{{ workout.distance }}m</td>
      </tr><tr>
        <th>Duration:</th><td>{{ workout.duration |durationprint:"%H:%M:%S.%f" }}</td>
      </tr><tr>
        <th>Public link to this workout</th>
        <td>
	  <a href="/rowers/workout/{{ workout.id }}">https://rowsandall.com/rowers/workout/{{ workout.id }}</a>
        <td>
      </tr><tr>
        <th>Public link to interactive chart</th>
      <td>
	<a href="/rowers/workout/{{ workout.id }}/interactiveplot">https://rowsandall.com/rowers/workout/{{ workout.id }}/interactiveplot</a>
      <td>
      </tr>
  </table>
    {% endlocaltime %}
  </div>
  {% for c in comments %}
  <div class="grid_6 alpha">
    <div class="grid_2 alpha">
      {{ c.created }}
      <b>{{ c.user.first_name }} {{ c.user.last_name }}</b>
    </div>
    <div class="grid_4 omega">
      <div class="talk-bubble tri-right left-top">
        <div class="talktext">
          {{ c.comment }}
        </div>
      </div>
    </div>
  </div>
    {% endfor %}

  <div id="form" class="grid_6 alpha">
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id }}/comment" method="post">
      <table width=100%>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <div id="formbutton" class="grid_1 prefix_4 suffix_1 omega">
        <input class="button green" type="submit" value="Save">
        </div>
    </form>
  </div>
  
</div>

<div id="images" class="grid_6 omega">
  <h1>Images linked to this workout</h1>
        
  {% if graphs1 %}
  
  {% for graph in graphs1 %}
  {% if forloop.counter == 1 %}
  <div id="thumb-container" class="grid_2 alpha">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>	
  {% elif forloop.counter == 3 %}
  <div id="thumb-container" class="grid_2 omega">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>	
  
  {% else %}
  <div id="thumb-container" class="grid_2">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>
  {% endif %}
  {% endfor %}
  
  
  {% for graph in graphs2 %}
  {% if forloop.counter == 1 %}
  <div id="thumb-container" class="grid_2 alpha">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>	
  {% elif forloop.counter == 3 %}
  <div id="thumb-container" class="grid_2 omega">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>	
  
  {% else %}
  <div id="thumb-container" class="grid_2">
    <a href="/rowers/graph/{{ graph.id }}/">
      <img src="/{{ graph.filename }}" 
	   onerror="this.src='/static/img/rowingtimer.gif'"
	   alt="{{ graph.filename }}" width="120" height="100"></a>
  </div>
  {% endif %}
  {% endfor %}
  
  
  

  {% else %}
  <p> No graphs found </p>
  {% endif %}
</div>

<style>
  /* Need this to get the page in "desktop mode"; not having an infinite height.*/
  html, body {height: 100%; margin:5px;}
</style>

<div id="summary" class="grid_6 omega">
  <h1>Workout Summary</h1>
  
  <p>
    <pre>
      {{ workout.summary }}
    </pre>
  </p>
  
</div>



<div id="interactiveplot" class="grid_6 omega">
  <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>
  
  {{ gmscript |safe }}
  
  <style>
    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
    html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin:0;
    padding: 0;
    }
    #map_canvas_container {position: relative; top:0; right:0; bottom:0; left:0;}

    #map_canvas {position: relative; top: 0; right: 0; bottom: 0; left: 0;}

  </style>
  <div id="map_canvas">
    {{ gmdiv|safe }}
  </div>
</div>

{% endblock %}