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

{% block title %}Rowsandall Workouts List{% endblock %}

{% block content %}

<script>
  setTimeout("location.reload(true);",60000);
</script>


<div class="grid_12">

  Select start and end date for a date range:
  <div class="grid_4 alpha">

    {% if team %}
    <form enctype="multipart/form-data"  method="post">
    {% else %}
    <form enctype="multipart/form-data"  method="post">
      {% endif %}
      
      <table>
        {{ dateform.as_table }}
      </table>
      {% csrf_token %}
  </div>
  <div class="grid_2 suffix_6 alpha">
    <input name='daterange' class="button green" type="submit" value="Submit">	</form>
  </div>

</div>

{% if team %}
<div class="grid_12 alpha">
  {% include "teambuttons.html"  with teamid=team.id team=team %}
</div>
{% endif %}

<div class="grid_12">
  <div id="workouts_table" class="grid_8 alpha">
    {% if team %}
    <h3>{{ team.name }} Team Workouts</h3>
    {% else %}
    <h3>My Workouts</h3>
    {% endif %}

    {% if workouts %}
    <table width="100%" class="listtable shortpadded">
      <thead>
        <tr>
          <th style="width:80"> Date</th>
          <th> Time</th>
          <th> Name</th>
          <th> Type</th>
          <th> Distance </th>
          <th> Duration </th>
          <th> Avg HR </th>
          <th> Max HR </th>
          {% if not team %}
          <th> &nbsp;</th>
          <th> &nbsp;</th>
          {% else %}
          <th colspan="2">
            Owner
          </th>
          {% endif %}
        </tr>
    </thead>
      <tbody>
        {% for workout in workouts %}
        {% if workout.rankingpiece %}
        <tr style="font-weight:bold">
          {% else %}
        <tr>
          {% endif %}
          <td> {{ workout.date|date:"Y-m-d" }} </td>
          <td> {{ workout.starttime|date:"H:i" }} </td>
          <td>
              {% if workout.user.user == user or user == team.manager %}
              {% if workout.rankingpiece %}
              [RANKING PIECE]
              {% endif %}
              {% if workout.name != '' %}
              <a href={% url rower.defaultlandingpage id=workout.id %}>{{ workout.name }}</a> </td>
            {% else %}
            <a href={% url rower.defaultlandingpage id=workout.id %}>No Name</a> </td>
{% endif %}
{% else %}
{% if workout.name != '' %}
<a href="/rowers/workout/{{ workout.id }}/">{{ workout.name }}</a> </td>
{% else %}
<a href="/rowers/workout/{{ workout.id }}/">No Name</a> </td>
{% endif %}
{% endif %}
<td> {{ workout.workouttype }} </td>
<td> {{ workout.distance }}m</td>
<td> {{ workout.duration |durationprint:"%H:%M:%S.%f" }} </td>
<td> {{ workout.averagehr }} </td>
<td> {{ workout.maxhr }} </td>
  {% if not team %}
<td>
  <a class="small" href="/rowers/workout/{{ workout.id }}/export">Export</a>
</td>
    {% else %}
<td colspan="2">
  {{ workout.user.user.first_name }} {{ workout.user.user.last_name }}
  </td>
    {% endif %}
<td> <a class="small" href="/rowers/workout/{{ workout.id }}/flexchart">Flex</a> </td>
<td>
  <a class="small" href="/rowers/workout/{{ workout.id }}/deleteconfirm">Delete
</td>

</tr>

{% endfor %}
</tbody>
</table>
{% else %}
<p> No workouts found </p>
{% endif %}
</div>


<div class="grid_4 omega">
  {% if team %}
  <div class="grid_4" id="teambuttons">
    <div class="grid_3 alpha">
      <p>
        &nbsp;
      </p>
    </div>
  </div>
  {% endif %}
  <div class="grid_4" id="interactiveplot">
    <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>
    {{ the_div |safe }}
  </div>
  <div class="grid_4" id="announcements">
    {% if announcements %}
    <h3>What's New?</h3>
      {% for a in announcements %}
    <div class="site-announcement-box">
      <div class="site-announcement">
        <i>{{ a.created }}:</i>
        {{ a.announcement|urlize }}
      </div>
    </div>
      {% endfor %}
    <p>&nbsp;</p>
    {% endif %}
  </div>
  <div class="grid_4" id="about">
    <h3>About</h3>
    <p>This site is a beta site, pioneering rowing data visualization and analysis. No warranties. The site's author is 
      Sander Roosendaal. A Masters rower.
      
      Read his <a href="http://blog.rowsandall.com/">blog</a>
</p>
    <div style="text-align: right; padding: 2em">
      <a href="http://blog.rowsandall.com/">
      <img src="/static/img/sander.jpg" width="80"></a>
    </div>
  </div>
</div>
</div>
</div>


<div class="grid_6 alpha">
  {% if rankingonly and not team %}
    <div class="grid_2 prefix_1 alpha">
      <a class="button small green" href="/rowers/list-workouts">All Workouts</a>
    </div>
    {% elif not team %}
    <div class="grid_2 prefix_1 alpha">
      <a class="button small green" href="/rowers/list-workouts/ranking">Ranking Pieces Only</a>
    </div>    
    {% endif %}
    <div class="grid_2 suffix_1 omega">
      <a class="button small gray" href="/rowers/workouts-join-select">Glue Workouts</a>
    </div>
    <p>&nbsp;</p>
  {% if team %}
  <form id="searchform" action="/rowers/list-workouts/team/{{ team.id }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
        method="get" accept-charset="utf-8">
    {% else %}
  <form id="searchform" action="/rowers/list-workouts/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}"
        method="get" accept-charset="utf-8">
{% endif %}    
    <div class="grid_3 prefix_1 alpha">
      <input class="searchfield" id="searchbox" name="q" type="text" placeholder="Search">
    </div>
    <div class="grid_1 omega">
      <button class="button blue small" type="submit">
        Search
      </button>
    </div>
  </form>
</div>
<div class="grid_2 omega">
  <span class="button gray small">
    {% if workouts.has_previous %}
    {% if request.GET.q %}
    <a class="wh" href="?page={{ workouts.previous_page_number }}&q={{ request.GET.q }}">&lt;</a>
    {% else %}
    <a class="wh" href="?page={{ workouts.previous_page_number }}">&lt;</a>
    {% endif %}
    {% endif %}
    
    <span>
      Page {{ workouts.number }} of {{ workouts.paginator.num_pages }}.
    </span>
    
    {% if workouts.has_next %}
    {% if request.GET.q %}
    <a class="wh" href="?page={{ workouts.next_page_number }}&q={{ request.GET.q }}">&gt;</a>
    {% else %}
    <a class="wh" href="?page={{ workouts.next_page_number }}">&gt;</a>
    {% endif %}
    {% endif %}
  </span>

{% endblock %}