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

{% block title %}Chart Stack{% endblock %}

{% localtime on %}
{% block main %}

<script src="https://d3js.org/d3.v6.js"></script>


<p>
  {% if workout|previousworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|previousworkout:rower.user }}/flexchartstacked/"
     title="Jump to preceding workout"><em>Previous</em></a>&nbsp;
  {% endif %}
  {% if workout|nextworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|nextworkout:rower.user }}/flexchartstacked/"
     title="Jump to following workout"><em>Next</em></a>
  {% endif %}
</p>


<h1>Chart Stack</h1>

<ul class="main-content">
  <canvas hidden id="canvas"></canvas>
  <li class="grid_4">
    <div id="theplot">
      {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_2">
    <form enctype="multipart/form-data"
          action=""
          method="post">
      {% csrf_token %}
      <table>
        {{ chartform.as_table }}
      </table>
      <table>
        {{ optionsform.as_table }}
      </table>
      <p>
        <input name="chartform" type="submit"
               value="Update Chart">
      </p>
      <p>
	<input name="save" value="Update Chart and Save Preferred Metrics"
	       type="submit"> 
      </p>
      <p>
	(This saves your preferred X and Y axes for all workouts.)
      </p>
    </form>
  </li>
</ul>
{{ the_script |safe }}

{% endblock %}
{% endlocaltime %}

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