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

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

{% block title %}
{{ block.super }} - Herd: {{ herd.herd }}
{% endblock %}

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

{% block content %}
<h2>
  Herd: {{ herd.herd }}
  {% if user.is_authenticated %}
    <span class="pull-right">
      <button class="btn favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_herd" herd.herd %}">
        <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_herd" herd.herd %}">
        <img src="{{ STATIC_URL}}/img/unwatch-icon.png" alt="Unwatch" >
      </button>
    </span>
  {% endif %}

</h2>
{% packages packages %}

<h3>Statistics</h2>
<h4>Current statistics</h4>
<p>
  <img src="{% url "chart_herd" herd.herd 'pie-versions' %}" />
  <img src="{% url "chart_herd" herd.herd 'pie-packages' %}" />
</p>

<h4>All Time</h4>
<p>
  <img src="{% url "chart_herd" herd.herd 'versions-weekly' %}" />
  <img src="{% url "chart_herd" herd.herd 'versions-monthly' %}" />
<p>
</p>
  <img src="{% url "chart_herd" herd.herd 'packages-weekly' %}" />
  <img src="{% url "chart_herd" herd.herd 'packages-monthly' %}" />
</p>

<script type="text/javascript">
$(document).ready(function () {
  $(".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 %}

{% block menus %}
{{ block.super }}
<div class="menu rounded notfirst-menu">
  <dl>
    <dt>Versions</dt>
    <dd><img src="{% url "chart_herd" herd.herd 'versions-monthly-small' %}" /></dd>
    <dt>Packages</dt>
    <dd><img src="{% url "chart_herd" herd.herd 'packages-monthly-small' %}" /></dd>
  </dl>
</div>

{% endblock %}