{% 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 scripts %}
{% include "monitorjobs.html" %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
{% endblock %}

{% block content %}
<div id="workouts" class="grid_6 alpha">

  {% if form.errors %}
  <p style="color: red;">
    Please correct the error{{ form.errors|pluralize }} below.
  </p>
  {% endif %}
  
  <h1>Edit Workout {{ workout.name }}</h1>
  <div class="grid_6 alpha">
    <div class="grid_2 alpha">
      <p>
	<a class="button red small" href="/rowers/workout/{{ workout.id }}/deleteconfirm">Delete</a>
      </p>
    </div>
    <div class="grid_2">
      <p>
	<a class="button gray small" href="/rowers/workout/{{ workout.id }}/export">Export</a>
        
      </p>
    </div>
    <div class="grid_2 omega tooltip">
      <p>
	<a class="button gray small" href="/rowers/workout/{{ workout.id }}/advanced">Advanced</a>
      </p>
      <span class="tooltiptext">Advanced Functionality (More interactive Charts)</span>
      
    </div>
  </div>
  <div class="grid_6 alpha">
    <div class="grid_2 alpha">
      <p>
        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/workflow">Workflow View</a>
      </p>
    </div>
    <div class="grid_2">
      <p>
        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/map">Map View</a>
      </p>
    </div>
    <div class="grid_2 omega">
      <p>
        <a class="button gray small" href="/rowers/workout/{{ workout.id }}/stats">Statistics</a>
      </p>
    </div>
  </div>
  <div class="grid_6 alpha">
  <table width=100%>
    <tr>
{% localtime on %}  
<th>Date/Time:</th><td>{{ workout.startdatetime|localtime}}</td>
{% endlocaltime %}
    </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>Comments</th>
      <td>
          <a href="/rowers/workout/{{ workout.id }}/comment">Comment ({{ aantalcomments }})</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>
  </div>
  <div id="form-div" class="grid_6 alpha">
    <form id="importantform"
          enctype="multipart/form-data" action="" method="post">
    <table width=100%>
      {{ form.as_table }}
    </table>
    {% csrf_token %}
    <div class="grid_2 prefix_2 alpha tooltip">
      {% if workout.privacy == 'visible' %}
      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/setprivate">Set Private</a>
      <span class="tooltiptext">Only you can see this workout</span>
      {% else %}
      <a class="button blue small" href="/rowers/workout/{{ workout.id }}/makepublic">Make Public</a>
      <span class="tooltiptext">Make this workout visible to your teams and followers</span>
      {% endif %}
    </div>
    <div id="formbutton" class="grid_1 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>
  <div class="grid_6 alpha">
    <div class="grid_2 alpha">
      <p>
	<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addtimeplot">Add Time Plot</a>
      </p>
    </div>
    <div class="grid_2">
      <p>
	<a class="button blue small" href="/rowers/workout/{{ workout.id }}/adddistanceplot">Add Distance Plot</a>
      </p>
    </div>
    <div class="grid_2 omega">
      <p>
	<a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpiechart">Add Pie Chart</a>
      </p>
    </div>
    <div class="grid_6 alpha">
      
      <div class="grid_2 prefix_4 alpha">
	<p>
	  <a class="button blue small" href="/rowers/workout/{{ workout.id }}/addpowerpiechart">Power Pie Chart</a>
	</p>
      </div>
      <div class="grid_6">
	<p>Generating images takes roughly 1 second per minute 
	  of your workout's duration. Please reload after a minute or so.</p>
      </div>
    </div>
    {% 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/ajax_loader_blue_350.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/ajax_loader_blue_350.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/ajax_loader_blue_350.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/ajax_loader_blue_350.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/ajax_loader_blue_350.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/ajax_loader_blue_350.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">
    <div class="grid_5 alpha">
      <h1>Workout Summary</h1>
    
      <p>
        <pre>
          {{ workout.summary }}
        </pre>
      </p>
      <div class="grid_2 alpha">
        <p>
          <a class="button green small" href="recalcsummary">Update Summary</a>
        </p>
      </div>
    </div>
    <div class="grid_1 omega">
      <div class="grid_1 alpha">
        <div class="fb-share-button" data-href="https://rowsandall.com/rowers/workout/{{ workout.id }}" data-layout="button" data-size="small" data-mobile-iframe="false">
          <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/workout/{{ workout.id }}">Share</a></div>
        </div>
      <div class="grid_1 alpha">
        <p>&nbsp;</p>
        <a class="twitter-share-button"
           href="https://twitter.com/intent/tweet"
           data-url="https://rowsandall.com/rowers/workout/{{ workout.id }}"
           data-text="@rowsandall #rowingdata">Tweet</a>
        </div>
    </div>
  </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>
    

    <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>


    {{ mapdiv|safe }}

    
    {{ mapscript|safe }}

    </div>
  </div>

{% endblock %}