{% extends "base.html" %}

{% block title %}{{ device_name|title }}{% endblock %}

{% block sub_title %}{% endblock %}

{% block content %}

    <div class="row">

        {% for device_name, series_list in device_readings.items() %}

            {% for series in series_list %}

                <div class="col-l-3 col-xs-6">

                    <div class="small-box bg-{{ loop.cycle('aqua', 'green', 'yellow', 'red', 'blue') }}">

                        <div class="inner">

                            <h3>
                                {{ series.value|float|round(2) }}
                            </h3>

                            <p>
                                {{ series.name|title }}
                            </p>
                            <p>
                                <time datetime="{{ series.created_at }}">
                                        {{ series.created_at }}
                                </time>
                            </p>

                        </div>

                    </div>

                </div>

            {% endfor %}


        {% endfor %}

    </div>


    <div class="row">

        {% for device_name, series_list in device_readings.items() %}

            {% for series in series_list %}

                <div class="col-md-6">
                    <div class="box box-primary">
                        <div class="box-header">
                            <i class="fa fa-bar-chart-o"></i>
                            <h3 class="box-title">
                                {{ series.name|title }}
                                {% if series.model.graph %}
                                    ({{ series.model.graph.description }})
                                {% endif %}
                            </h3>
                        </div>
                        <div class="box-body">
                            <div id="graph_{{ device_name|replace(" ", "_") }}_{{ series.name|replace(" ", "_") }}" style="height: 300px;"></div>
                        </div>
                    </div>

                </div>

            {% endfor %}

        {% endfor %}

    </div>


{% endblock %}

{% block extra_js %}

    <script type="text/javascript">

        $(function(){

        {% for device_name, series_list in device_readings.items() %}
        {% for series in series_list %}
        device_series_graph('{{ series.device_id }}', '{{ series.series_id }}', '#graph_{{ device_name|replace(" ", "_") }}_{{ series.name|replace(" ", "_") }}');
        {% endfor %}
        {% endfor %}

        });

    </script>

{% endblock %}
