{% extends "admin/layout.html" %}
{% load i18n %}
{% load humanize %}
{% load url from future %}
{% from "admin/macros.html" import page_title %}
{% from "admin/overview/plot.html" import draw_plot_tooltips, draw_plot with context %}

{% block title %}{{ page_title(title=_('Forums Overview')) }}{% endblock %}

{% block content %}
<div class="page-header">
  <h1>{% trans %}Forums Overview{% endtrans %} <small></small></h1>
</div>

<div class="row">
  <div class="span6">
  	<h2 style="text-align: center;">{{ posts|intcomma }}
  	<small>{% trans %}Posts{% endtrans %}</small></h2>
  </div>
  <div class="span6">
  	<h2 style="text-align: center;">{{ threads|intcomma }}
  	<small>{% trans %}Threads{% endtrans %}</small></h2>
  </div>
</div>

<hr>

<h2>New Posts</h2>
<div class="graph">
  <canvas id="graph-posts" height="150px"></canvas>
  {{ draw_plot_tooltips('graph-posts', graph_posts) }}
  <div class="timeline">
    <div class="pull-left">{{ graph_posts.start|date }}</div>
    <div class="pull-right">{{ graph_posts.end|date(graph_posts.format) }}</div>
  </div>
</div>
<p class="sub-graph pull-right">{% trans count=graph_posts.total|int, total=graph_posts.total|intcomma -%}One new post found in period requested
{%- pluralize -%}
{{ total }} new posts found in period requested
{%- endtrans %}</p>
<ul class="nav nav-pills sub-graph">
  <li{% if mode == "day" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview' %}">{% trans %}Last 24h{% endtrans %}</a></li>
  <li{% if mode == "week" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_week' %}">{% trans %}Last Week{% endtrans %}</a></li>
  <li{% if mode == "month" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_month' %}">{% trans %}Last Month{% endtrans %}</a></li>
  <li{% if mode == "year" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_year' %}">{% trans %}Last Year{% endtrans %}</a></li>
</ul>

<hr>

<h2>New Threads</h2>
<div class="graph">
  <canvas id="graph-threads" height="150px"></canvas>
  {{ draw_plot_tooltips('graph-threads', graph_threads) }}
  <div class="timeline">
    <div class="pull-left">{{ graph_threads.start|date }}</div>
    <div class="pull-right">{{ graph_threads.end|date(graph_threads.format) }}</div>
  </div>
</div>
<p class="sub-graph pull-right">{% trans count=graph_threads.total|int, total=graph_threads.total|intcomma -%}One new thread found in period requested
{%- pluralize -%}
{{ total }} new threads found in period requested
{%- endtrans %}</p>
<ul class="nav nav-pills sub-graph">
  <li{% if mode == "day" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview' %}">{% trans %}Last 24h{% endtrans %}</a></li>
  <li{% if mode == "week" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_week' %}">{% trans %}Last Week{% endtrans %}</a></li>
  <li{% if mode == "month" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_month' %}">{% trans %}Last Month{% endtrans %}</a></li>
  <li{% if mode == "year" %} class="active"{% endif %}><a href="{% url 'admin_forums_overview_year' %}">{% trans %}Last Year{% endtrans %}</a></li>
</ul>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
  {{ draw_plot('draw_posts', 'graph-posts', graph_posts.max, graph_posts.stat) }}
  {{ draw_plot('draw_threads', 'graph-threads', graph_threads.max, graph_threads.stat) }}
</script>
{% endblock %}