{% extends 'statsy/base.html' %}

{% load static from staticfiles %}

{% block script %}
    <script src="{% static 'statsy/app/js/dashboard.js' %}"></script>
{% endblock %}

{% block title %}
    Statsy | Dashboard
{% endblock %}

{% block content %}
    <h1>Overview</h1>
    <div class="row">
        <div class="statsy__chart_container">
            <div class="btn-group statsy__group_period" role="group" aria-label="Group stats period" data-chart="dashboardGroupContainer">
              <button type="button" class="btn btn-default active" data-url="{% url 'statsy.today_category_stats' 'group' %}">Day</button>
              <button type="button" class="btn btn-default" data-url="{% url 'statsy.week_category_stats' 'group' %}">Week</button>
              <button type="button" class="btn btn-default" data-url="{% url 'statsy.month_category_stats' 'group' %}">Month</button>
            </div>

            <div class="statsy__chart">
                <div id="dashboardGroupContainer" data-url="{% url 'statsy.today_category_stats' 'group' %}" data-title="Count per Group"></div>
            </div>

            <div class="statsy__group_list">
            Groups:
            {% for group in groups %}
                <div class="statsy__group">
                    <a href="#">{{ group }}</a>
                </div>
            {% endfor %}
            </div>
        </div>

        <div class="statsy__chart_container">
            <div class="btn-group statsy__event_period" role="group" aria-label="Event stats period" data-chart="dashboardEventContainer">
              <button type="button" class="btn btn-default active" data-url="{% url 'statsy.today_category_stats' 'event' %}">Day</button>
              <button type="button" class="btn btn-default" data-url="{% url 'statsy.week_category_stats' 'event' %}">Week</button>
              <button type="button" class="btn btn-default" data-url="{% url 'statsy.month_category_stats' 'event' %}">Month</button>
            </div>

            <div class="statsy__chart">
                <div id="dashboardEventContainer" data-url="{% url 'statsy.today_category_stats' 'event' %}" data-title="Count per Event"></div>
            </div>

            <div class="statsy__event_list">
            Events:
            {% for event in events %}
                <div class="statsy__event">
                    <a href="#">{{ event }}</a>
                </div>
            {% endfor %}
            </div>
        </div>

        <div class="statsy__last_stats">
            <table class="table table-hover">
                <thead>
                    <span class="statsy__last_stats__header">Most recent stats</span>
                    <th>Group</th>
                    <th>Event</th>
                    <th>Label</th>
                    <th>Value</th>
                    <th>Time</th>
                </thead>
                <tbody>
                    {% for stats in last_stats %}
                        <tr>

                            <td>{{ stats.group }}</td>
                            <td>{{ stats.event }}</td>
                            <td>{% if stats.label %}{{ stats.label }}{% endif %}</td>
                            <td>{% if stats.value %}{{ stats.value }}{% endif %}</td>
                            <td>{{ stats.created_at|date:"H:i:s" }}</td>
                        </tr>
                    {% endfor %}
                </tbody>

                <tfoot>
                    <td colspan="4">...</td>
                </tfoot>
            </table>
        </div>
    </div>
{% endblock %}
