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

{% load sub %}
{% load url from future %}

{% block meta %}
{{ block.super }}
<link rel="alternate" type="application/atom+xml" title="{{ package }} Feed"
      href="{% url "package_feed" package.category package.name %}" />
{% endblock %}

{% block menu_feed %}
{{ block.super }}
<li>
  <img src="{{ STATIC_URL }}/img/feed.png" alt="feed" />
  <a title="{{ package }} Feed" href="{% url "package_feed" package.category package.name %}">
    {{ package|truncatechars:15 }}
  </a>
</li>
{% endblock %}

{% block title %}
{{ block.super }} - {{ package.category }}/{{ package.name }}
{% endblock %}

{% block content %}

<div class="refresh-alert alert {% if not refresh_pos %}hide{% endif %}">
  <p>A refresh request is in progress, please wait...</p>
  <p>Queue position: <span id="refresh-pos">{{ refresh_pos }}</span></p>
</div>

<h2>
  {{ package.category }}/{{ package.name }}

  {% if user.is_authenticated %}
    <span class="pull-right">
      <button class="btn refresh-button {% if refresh_requested %}hide{% endif %}" data-category="{{ package.category }}" data-package="{{ package.name }}">
        <img src="{{ STATIC_URL}}/img/refresh-active.png" alt="Refresh" />
      </button>
      <button class="btn refresh-button-disabled disabled {% if not refresh_requested %}hide{% endif %}">
        <img src="{{ STATIC_URL}}/img/refresh-inactive.png" alt="Refresh" />
      </button>
      <button class="btn favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_package" package.category package.name %}">
        <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_package" package.category package.name %}">
        <img src="{{ STATIC_URL}}/img/unwatch-icon.png" alt="Unwatch" />
      </button>
    </span>
  {% endif %}
</h2>

{% include "euscan/_package_details.html" %}

<hr/>

{% if user.is_authenticated %}
    <form class="pull-right" action="{% url "problem" package.category package.name %}" method="get">
      <button class="btn bug-button">
        <img src="{{ STATIC_URL}}/img/bug.png" alt="Report problems" >
      </button>
    </form>
{% endif %}

<script type="text/javascript">
  $(document).ready(function () {
    $(".refresh-button").click(function() {
      var url = "{% url "refresh_package" "XXX" "YYY" %}";
      $.post(url.replace("XXX", $(this).data("category")).replace("YYY", $(this).data("package")),
        function(data) {
          $(".refresh-button").addClass("hide");
          $(".refresh-button-disabled").removeClass("hide");
          $("#refresh-pos").text(data.position);
          $(".refresh-alert").show("slow");
        });
    });

    $(".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 %}