{% extends "base.html" %}
{% block header %}
        {% include "nav.html" with active="stats" %}
{% endblock %}

{% block content %}
<section id="stats" class="row">
    <section id="products_realtime" class="row">
        <div class="col-xs-12">
            <h2>Realtime produkter</h2>
            <div id="products_realtime_chart"></div>
        </div>
    </section>
        
    <section id="product" class="row">
        <h2>Produkter</h2>
        {% for product in products %}
            <section id="product_{{ product.id }}">
                <div class="col-xs-6">
                    <div id="product_chart{{ product.id }}"></div>
                </div>
            </section>
        {% endfor %}
    </section>
    <section id="order_hourly" class="row">
        <h2>Time for time</h2>
        <div class="col-xs-12">
            <div id="order_hourly_chart"></div>
        </div>
    </section>

    <section id="order" class="row">
        <div class="col-xs-12">
            <h2>Ordre</h2>
            <div id="order_chart"></div>
        </div>
    </section>
    


</section>
{% endblock %}
{% block tailinc %}
    <script src="{{ STATIC_URL }}js/bootstrap/tooltip.js"></script>
    <script src="{{ STATIC_URL }}js/highcharts.js"></script>
    <script src="{{ STATIC_URL }}js/underscore-min.js"></script>
    <script src="{{ STATIC_URL }}js/stats.js"></script>
{% endblock %}