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

{% load euscan_tags %}
{% 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 }}</a>
</li>
{% endblock %}

{% block content %}
<h2>
  Herd: {{ herd.herd }}
  {% if user.is_authenticated %}
    <button class="btn favourite-button {% if favourited %}hide{% endif %}" data-url="{% url "favourite_herd" herd.herd %}">
      Watch
    </button>
    <button class="btn unfavourite-button {% if not favourited %}hide{% endif %}" data-url="{% url "unfavourite_herd" herd.herd %}">
      Unwatch
    </button>
  {% 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">
  $(".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 %}