{% extends "newbase.html" %}
{% load static %}
{% load rowerfilters %}
{% load tz %}

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

{% block scripts %}
{% include "monitorjobs.html" %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
      console.log({{ activeminutesmin }}, {{ activeminutesmax}}, 'active range');
      $( "#slider-range" ).slider({
	  range: true,
	  min: 0,
	  max: {{ maxminutes }},
	  values: [ {{ activeminutesmin }}, {{ activeminutesmax }} ],
	  slide: function( event, ui ) {
              $( "#amount" ).val(ui.values[ 0 ] + " min - " + ui.values[ 1 ] + " min " );
	      $("#id_activeminutesmin").val(ui.values[0]);
	      $("#id_activeminutesmax").val(ui.values[1]);
	  }
      });
      $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
			 " min - " + $( "#slider-range" ).slider( "values", 1 ) + " min ");
  } );
</script>
{% endblock %}

{% block main %}
<p>
  {% if workout|previousworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|previousworkout:rower.user }}/editintervals/"
     title="Jump to preceding workout"><em>Previous</em></a>&nbsp;
  {% endif %}
  {% if workout|nextworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|nextworkout:rower.user }}/editintervals/"
     title="Jump to following workout"><em>Next</em></a>
  {% endif %}
</p>
<p>
  <table width=100%>
    <tr>
      <th>Name</th><td>{{ workout.name }}</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|encode }}/">https://rowsandall.com/rowers/workout/{{ workout.id|encode }}</a>
      <td>
    </tr>
  </table>
</p>

<h1>Edit Workout Interval Data</h1>
<p>
  Use "Interval Shorthand", "Feeling lucky?", or "Intervals by power/pace" methods below to edit work and rest
  intervals. To save your work, press the Save button above the updated summary.
</p>
<ul class="main-content">
  <li class="grid_2">
    <h1>Updated Summary</h1>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/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 %}
      <p>
	<input type="submit" value="Save">
      </p>
      <span>
	<a href="">Reset to last saved</a>
	&nbsp;
	<a href="/rowers/workout/{{ workout.id|encode }}/restore/">Restore Original data</a>
	&nbsp;
	<a href="/rowers/workout/{{ workout.id|encode }}/split_intervals/">Split Workout by Intervals</a>
      </span>
    </form>
    <p>
      <pre>
	{{ intervalstats }}
      </pre>
    </p>
  </li>
  <li class="grid_2">
    <script src="https://d3js.org/d3.v6.js"></script>
    
    {{ the_div |safe }}
    {{ interactiveplot |safe }}
    
  </li>
  <li class="grid_2">
    <h1>Feeling lucky?</h1>
    <p>This new, experimental feature tries to find intervals by looking for patterns in the data. It does not
      autodetect rest and work intervals yet. The resulting "interval string" is copied to the Interval Shorthand
      section below, where you can edit it.
      <form enctype="multipart/form-data" method="post">
	<input type="hidden" name="ruptures" value="ruptures">
	<table width=100%>
	  {{ ruptureform.as_table }}
	</table>
	{% csrf_token %}
	<input class="button" type="submit" value="I'm feeling lucky">
      </form>
    </p>
  </li>
  <li class="grid_2">
    <h1>Interval Shorthand</h1>
    <p>
      See the how-to <a href="#howto">at the bottom of this page</a> for details on how to use this form.
    </p>
    <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/editintervals/" method="post">
      <table width=100%>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <input class="button" type="submit" value="Update">
    </form>
  </li>
  <li class="grid_2">
    <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. Use the slider to limit the active range. Everything outside the active range will
      become rest (warming up and cooling down).
    </p>
    
    <form ecntype="multipart/form-data" method="post">
      <div id="slider-range"></div>
      <p>
	<label for="amount">Active Range:</label>
	<input type="text" id="amount" readonly style="border:0; color:#1c75bc; font-weight:bold;">
      </p>
      <table>
        {{ powerupdateform.as_table }}
      </table>
      
      {% csrf_token %}
      <input class="button" type="submit" value="Submit">
    </form>
  </li>
  <li class="grid_2">
    <h1 id="howto">Interval Shorthand How-To</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>
  </li>
  {% if courses %}
  <li>
    <h1>Interval by Course</h1>
    <p>
      This functionality allows you to record a time on a set course that you've rowed during the workout.
      The summary will be updated to show time on course, and you can compare this with other
      attempts.
    </p>
    <p>
      {% if rower.share_course_results %}
      You are currently sharing your course results with all Rowsandall users.
      Click <a href="/rowers/me/edit/?courseshare=false">here</a> to hide your course results.
      {% else %}
      You are currently hiding your course results (except for your participation in online challenges).
      Click <a href="/rowers/me/edit/?courseshare=true">here</a> to hide your course results.
      {% endif %}
    </p>
    <form ecntype="multipart/form-data" method="post">
      <table>
	{{ courseselectform.as_table }}
      </table>
      {% csrf_token %}
      <input class="button" type="submit" value="Select Course">
    </form>
  </li>
  {% endif %}
</ul>
{% endblock %}


{% block sidebar %}
{% include 'menu_workout.html' %}
{% endblock %}