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

{% block meta %}
{% leaflet_js %}
{% leaflet_css %}
{% endblock %}

{% block title %}View Comparison {% endblock %}

{% block main %}

<script src="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.js"></script>
<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

<h1>Course Map Comparison</h1>

<p>
  <form method="GET" id="competitorform">
    {{ dateform.as_table }}
    {% for competitor in competitors %}
    {% if competitor in selected_users %}
    <input type="checkbox" name="users" value="{{ competitor.id|encode }}" checked>{{ competitor }}<br>
    {% else %}
    <input type="checkbox" name="users" value="{{ competitor.id|encode }}">{{ competitor }}<br>
    {% endif %}
    {% endfor %}
    <button type="button" onclick="selectAll()">Select All</button>
    <button type="button" onclick="selectNone()">Select None</button>
    <input type="submit" value="Submit">
  </form>
  <script>
    function selectAll() {
      var checkboxes = document.getElementsByName('users');
      for (var i=0; i<checkboxes.length; i++) {
	checkboxes[i].checked = true;
      }
    }
    function selectNone() {
      var checkboxes = document.getElementsByName('users');
	for (var i=0; i<checkboxes.length; i++) {
	    checkboxes[i].checked = false;
	}
    }
  </script>
</p>
<p>Click on a line to see the label. Double click on a line to remove it. Reload to get back all lines.</p>
<p>We show your original GPS coordinates on the course. For course time, we use a finer interpolation, to get
  the exact time when you crossed the line.</p>

    <div class="mapdiv">
      {{ mapdiv|safe }}
      <script>
	{{ mapscript|safe }}
	</script>
    </div>


{% endblock %}

{% block sidebar %}
{% if active == 'nav-racing' %}
{% include 'menu_racing.html' %}
{% else %}
{% include 'menu_workouts.html' %}
{% endif %}
{% endblock %}