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

{% block title %}Change Workout {% 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 Interval Data</h1>
  <div class="grid_6 alpha">
    <div class="grid_2 alpha">
      <p>
	<a class="button gray small" href="/rowers/workout/{{ workout.id }}/edit">Edit</a>
      </p>
    </div>
    <div class="grid_2">
      <p>
	<a class="button gray small" href="/rowers/workout/{{ workout.id }}/workflow">Workflow View</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>
  

  {% localtime on %}
  <table width=100%>
    <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 %}
  <h1>Interval Translator</h1>
  <p>This is a quick way to enter the intervals using a special mini-language.</p>
  <p>You enter something like <em>8x500m/3min</em>, press "Update" and the site will interpret this for you and update the summary on the right. If you're happy with the result, press the green Save button to update the values. Nothing will be changed permanently until you hit Save.</p>
  
  <p>Special characters are <em>x</em> (times), <em>+</em> and <em>/</em> (denotes a rest interval), as well as <em>(</em> and <em>)</em>. Units are <em>min</em> (minutes), <em>sec</em> (seconds), <em>m</em> (meters) and <em>km</em> (km). </p>
  
  <p>A typical interval is described as "<b>10min/5min</b>", with the work part before the "<b>/</b>" and the rest part after it. A zero rest can be omitted, so a single 1000m piece could be described either as "<b>1km</b>" or "<b>1000m</b>". The basic units can be combined with "<b>+</b>" and "<b>Nx</b>". You can use parentheses as in the example below.</p>
  
  <p>Here are a few examples.</p>
  <table class="listtable" width=100%>
    <tr>
      <td>8x500m/2min</td><td>8 times 500m with 2 minutes rest</td>
    </tr>
    <tr>
      <td>10km</td><td>Single distance of 10km</td>
    </tr>
    <tr>
      <td>6min/3min + 5min/3min + 3min/3min + 3min </td>
      <td>Four intervals of 6, 5, 3 and 3 minutes length, 3 minutes rest</td>
    </tr>
    <tr>
      <td>8x500m/3:30min </td>
      <td>8 times 500m with 3 minutes 30 seconds rest</td>
    </tr>
    <tr>
      <td>4x((500m+500m)/5min)</td><td>4 times 1km, but each km is reported as two 500m intervals without rest. Note the nested parentheses.</td>
    </tr>
    <tr>
      <td>2x500m/500m</td><td>A 2k rowed as 500m "on", 500m "off"</td>
    </tr>
  </table>

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

  <h1>Intervals by Power/Pace</h1>

  <p>With this form, you can specify a power or pace level. Everything faster/harder than the
    specified pace/power will become a work interval. Everything slower will become a rest
    interval.
  </p>

  <form ecntype="multipart/form-data" method="post">
  <table>
    {{ powerupdateform.as_table }}
  </table>

  {% csrf_token %}
  <div id="formbutton" class="grid_1 prefix_4 suffix_1">
    <input class="button green" type="submit" value="Submit">
  </div>
  </form>
    
  
</div>

<div id="advancedplots" class="grid_6 omega">
  <div class="grid_6 alpha">
    
    <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>
    
    {{ interactiveplot |safe }}

    <script>
      // Set things up to resize the plot on a window resize. You can play with
      // the arguments of resize_width_height() to change the plot's behavior.
      var plot_resize_setup = function () {
      var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
      var plot = Bokeh.index[plotid];
      var plotresizer = function() {
      // arguments: use width, use height, maintain aspect ratio
      plot.resize_width_height(true, true, true);
      };
      window.addEventListener('resize', plotresizer);
      plotresizer();
      };
      window.addEventListener('load', plot_resize_setup);
    </script>
    <style>
      /* Need this to get the page in "desktop mode"; not having an infinite height.*/
      html, body {height: 100%; margin:5px;}
    </style>
    
    
    <div id="interactiveplot" class="grid_6 omega">
      {{ the_div |safe }}
    </div>
  </div>
  
  
  <div id="summary" class="grid_6 omega">
    <h1>Updated Summary</h1>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id }}/editintervals" method="post">
      {% csrf_token %}
      <input type="hidden" name="{{ savebutton }}" value="{{ intervalstring }}">
      <input type="hidden" name="nrintervals" value={{ nrintervals }}>
      {% for key,value in formvalues.items %}
      <input type="hidden" name="{{ key }}" value="{{ value|safe }}">
      {% endfor %}
      {% for field in detailform %}
      {{ field.as_hidden }}
      {% endfor %}
      <div class="grid_1 alpha">
	<input class="button green" type="submit" value="Save">
      </div>
      <div class="grid_2">
	<a class="button green" href="">Reset to last saved</a>
      </div>
      <div class="grid_2 omega">
	<a class="button green" href="/rowers/workout/{{ workout.id }}/restore">Restore Original data</a>
      </div>
    </form>
    <div class="grid_6 alpha">
      <p>
        <pre>
          {{ intervalstats }}
        </pre>
      </p>
    </div>
  </div>
  
  <div id="summary" class="grid_6 omega">
    <h1>Detailed Summary Edit</h1>
    <p>This is still experimental and there are known bugs. Use at your own risk. Nothing is stored permanently until you hit Save on the summary above. You can use the restore original button to restore the original values.</p>
    <div class="grid_6 alpha">
      <div class="grid_1 alpha"><strong>#</strong></div>
      <div class="grid_1">
	<strong>Time</strong>
      </div>
      <div class="grid_1">
	<strong>Distance</strong>
      </div>
      <div class="grid_1 suffix_2 omega">
	<strong>Type</strong>
      </div>
    </div>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id }}/editintervals" method="post">
      {% for i in nrintervals|times %}
      <div class="grid_6 alpha">
	<div class="grid_1 alpha">{{ i }}</div>
	<div class="grid_1">
	  {% get_field_id i "intervalt_" detailform %}
	</div>
	<div class="grid_1">
	  {% get_field_id i "intervald_" detailform %}
	</div>
	<div class="grid_2 suffix_1 omega">
	  {% get_field_id i "type_" detailform %}
	</div>
      </div>
      {% endfor %}
      {% csrf_token %}
      <div id="formbutton" class="grid_1 prefix_4 suffix_1">
	<input type="hidden" name="nrintervals" value={{ nrintervals }}>
        <input class="button green" type="submit" value="Update">
      </div>
    </form>
  </div>
</div>
{% endblock %}