{% extends "euscan/_datatable.html" %}

{% load url from future %}
{% load djeuscan_helpers %}

{% block title %}
{{ block.super }} - Overlay: {{ overlay }}
{% endblock %}

{% block content %}
<h2>
  Overlay: {{ overlay }}
  {% if user.is_authenticated %}
    <span class="pull-right">
      <button class="btn favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_overlay" overlay %}">
        <img src="{{ STATIC_URL}}/img/watch-icon.png" alt="Watch" >
      </button>
      <button class="btn unfavourite-button {% if not favourited %}hide{% endif %}" data-url="{% url "unfavourite_overlay" overlay %}">
        <img src="{{ STATIC_URL}}/img/unwatch-icon.png" alt="Unwatch" >
      </button>
    </span>
  {% endif %}

</h2>

{% packages packages %}

<script type="text/javascript">
  $(".favourite-button").click(function() {
    $.post($(this).data("url"), function() {
      $(".unfavourite-button").removeClass("hide");
      $(".favourite-button").addClass("hide");
    });
  });

  $(".unfavourite-button").click(function() {
    $.post($(this).data("url"), function() {
      $(".favourite-button").removeClass("hide");
      $(".unfavourite-button").addClass("hide");
    });
  });
</script>

{% endblock %}
