{% extends "base.html" %}

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

{% block sub_title %}{% endblock %}

{% block content %}

    <div class="row">

        {% for device_series, latest_value, updated_at, latest_values in device_readings %}

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

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

                    <div class="inner">

                        <h3>
                            {{ latest_value|float|round(2) }}
                        </h3>

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

                    </div>

                </div>

            </div>

        {% endfor %}

    </div>


    <div class="row">

        {% for device_series, latest_value, updated_at, latest_values in device_readings %}

            <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">
                            {{ device_series.series.name|title }}
                            {% if device_series.series.graph %}
                                ({{ device_series.series.graph.description }})
                            {% endif %}
                        </h3>
                    </div>
                    <div class="box-body">
                        <div id="graph_{{ device_series.device.area.name|replace(" ", "_") }}_{{ device_series.series.name|replace(" ", "_") }}" style="height: 300px;"></div>
                    </div>
                </div>

            </div>

        {% endfor %}

    </div>


{% endblock %}

{% block extra_js %}

    <script type="text/javascript">

        $(function(){

        {% for device_series, latest_value, updated_at, latest_values in device_readings %}
        device_series_graph('{{ device_series.device_id }}', '{{ device_series.series_id }}', '#graph_{{ device_series.device.area.name|replace(" ", "_") }}_{{ device_series.series.name|replace(" ", "_") }}');
        {% endfor %}

        });

    </script>

{% endblock %}
