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

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

{% block title %}Rowsandall Virtual Challenges{% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>

{% endblock %}

{% block main %}

<ul class="main-content">
  <li class="grid_4">
    <h1>Courses you might like</h1>
  </li>
  <li class="grid_4">
    <p>
      Whether you routinely row between two landmarks on your river and want to compare
      times from one day to the other, or like a little competition between
      rowers in your neighborhood, Rowsandall courses are for you! They are useful for GPS-based timing
      of your time on the course, and enable easy, informal, timed event on any body of water you like.
    </p>
    <p>
      On Rowsandall, rowers share courses and organize challenges. We're showing you a few on this page,
      but there are many more to explore. You can also add your own. 
    </p>
    <p>
      These courses are designed to be compatible with
      <a href="https://performancephones.com/custom-courses/">CrewNerd Custom Courses</a>. You
      can synchronize the list of liked courses to the CrewNerd app on your phone, so you can get
      on-the-water indications of your time on the course. 
    </p>
  </li>
  <li>
    <p>
      <a href="/rowers/list-courses/">All Courses</a>
    </p>
    <a href="/rowers/list-courses/?liked=true">Courses I like</a>
</p>
</li>
{% for course in coursesdicts %}
<li class="rounder">
  <a href="/rowers/courses/{{ course.course.id }}/">
  <h2>{{ course.course.name }}</h2>
  </a>
  <p>
    {% if course.course in rower.followed_courses.all %}
    <a class="unfollow" href="/rowers/courses/{{ course.course.id }}/unfollow"><span class="icon"><i class="fas fa-heart"></i></span></a>
    {% else %}
    <a class="follow" href="/rowers/courses/{{ course.course.id }}/follow"><span class="icon"><i class="far fa-heart"></i></span></a>
    {% endif %}
  </p>
  <p>{{ course.course.country }}</p>
  <p>{{ course.course.distance }}m</p>
  <div class="mapdiv" id="{{ course.course.id }}">
    {{ course.div|safe}}
    {{ course.script|safe}}
  </div>
</li>
{% endfor %}
<li class="grid_4">
  <h1>Interesting Challenges</h1>
</li>
<li>
  <p>
    <a href="/rowers/virtualevents/?participate=true">Challenges I participate in</a>
  <p>
    <a href="/rowers/virtualevents/">All Active Challenges</a>
  </p>
  <a href="/rowers/virtualevents/?nearby=true">Nearby Challenges</a>
</p>
</li>
{% for challenge in challengesdicts %}
<li class="rounder">
  <a href="/rowers/virtualevent/{{ challenge.challenge.id }}/">
    <h2>{{ challenge.challenge.name }}</h2>
  </a>
    <p>{{ challenge.challenge.startdate|date:"Y-m-d" }}
      {{ challenge.challenge.start_time|time:"H:i e" }}
      to
      {{ challenge.challenge.enddate|date:"Y-m-d" }}
      {{ challenge.challenge.end_time|time:"H:i e" }}
      ({{ challenge.challenge.timezone }})</p>
    <p>{% if challenge.challenge.sessiontype == 'fastest_time' %}
      Time Challenge: To be rowed on the water
      {% elif challenge.challenge.sessiontype == 'fastest_distance' %}
      Distance Challenge: To be rowed on the water
      {% elif challenge.challenge.sessiontype != 'race' %}
      Indoor Race: To be rowed on a Concept2 ergometer
      {% endif %}
    </p>
    {% if challenge.challenge.sessiontype == 'fastest_time' %}
    <div class="vignet">
            <img src="/static/img/sculler.png"
      alt="Marked Course">
    </div>
      {% elif challenge.challenge.sessiontype == 'fastest_distance' %}
    <div class="vignet">
            <img src="/static/img/sculler.png"
      alt="Marked Course">
    </div>
      {% elif challenge.challenge.sessiontype != 'race' %}
    <div class="vignet">
      <img src="/static/img/domca.png"
      alt="Marked Course">
    </div>

    {% endif %}
    <div class="mapdiv" id="{{ challenge.challenge.id }}">
    {{ challenge.div|safe}}
    {{ challenge.script|safe}}
  </div>
</li>
{% endfor %}

</ul>

<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
  $(document).ready(function() {
	$(document).on('click', 'a.follow', function(event) {
	  event.preventDefault();
	  var ajaxEndpoint = $(this).attr('href');
          var $ajaxLink = $(this);
	  var id = ajaxEndpoint.split('/').slice(-2, -1)[0]; 
	  console.log(id, ajaxEndpoint)

	  $.ajax({
	      url: ajaxEndpoint,
	      method: 'GET',
	      success: function(response) {
		  console.log(response);
		  $ajaxLink.removeClass('follow').addClass('unfollow');
		  $ajaxLink.attr('href', '/rowers/courses/' + id + '/unfollow')
		  $ajaxLink.find('i').removeClass('far').removeClass('fa-heart').addClass('fas').addClass('fa-heart'); // Change star icon to filled
		  $ajaxLink.find('.icon i').attr('class', 'fas fa-heart');
		  $ajaxLink.find('.icon i').html('');
		  $ajaxLink.html('<span class="icon"><i class="fas fa-heart"></i></span>');

	      },
	      error: function(xhr, status, error) {
		  console.error(error);
	      }
	      
	  });
      });
      $(document).on('click', 'a.unfollow', function(event) {
	  event.preventDefault();
	  var ajaxEndpoint = $(this).attr('href');
          var $ajaxLink = $(this);
	  var id = ajaxEndpoint.split('/').slice(-2, -1)[0]; 
	  console.log(id, ajaxEndpoint)

	  $.ajax({
	      url: ajaxEndpoint,
	      method: 'GET',
	      success: function(response) {
		  console.log(response);
		  $ajaxLink.removeClass('unfollow').addClass('follow');
		  $ajaxLink.attr('href', '/rowers/courses/' + id + '/follow')
		  $ajaxLink.find('i').removeClass('fas').removeClass('fa-heart').addClass('far').addClass('fa-heart'); // Change star icon to outline
		  $ajaxLink.find('.icon i').attr('class', 'far fa-heart');
		  $ajaxLink.find('.icon i').html('');
		  $ajaxLink.html('<span class="icon"><i class="far fa-heart"></i></span>');
	      },
	      error: function(xhr, status, error) {
		  console.error(error);
	      }
	      
	  });
      });

      
  });
  </script>


{% endblock %}

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