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

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

{% block main %}
  <h1>Split Workout</h1>

  {% localtime on %}
  <ul class="main-content">
    <li class="grid_2">
      <p>
        <form enctype="multipart/form-data" action="/rowers/workout/{{ workout.id|encode }}/split/" method="post">
          <table width=100%>
            {{ form.as_table }}
          </table>
          {% csrf_token %}
          <input class="button" type="submit" value="Split">
        </form>
      </p>
    </li>
    <li class="grid_2">

      <script src="https://d3js.org/d3.v6.js"></script>
      <script async="true" type="text/javascript">
        Bokeh.set_log_level("info");
      </script>

      {{ thescript |safe }}

      {{ thediv |safe }}

      <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|encode }}">https://rowsandall.com/rowers/workout/{{ workout.id|encode }}</a>
          <td>
        </tr>
      </table>
      {% endlocaltime %}
    </li>
    <li class="grid_4">
      <h1>Workout Split</h1>
      <p>Split your workout in half at the given time using the form above.
        Use the chart on
        the right to find the point where you want to split.</p>
      <p>Use any of the following formats:
        <ul>
          <li>H:MM:SS.d, e.g. 1:45:00.0 for one hour and 45 minutes</li>
          <li>H:MM:SS, e.g. 1:45:00 for one hour and 45 minutes</li>
          <li>MM:SS.d, e.g. 30:00.0 for thirty minutes</li>
          <li>MM, e.g. 30 for thirty minutes</li>
        </ul>
      </p>
      <p>
        Warning: If you deselect, "Keep Original", the original workout
        cannot be restored afterwards.
      </p>
    </li>
  </ul>



{% endblock %}

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