{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block sub_title %}{% endblock %}

{% block content %}

    <section class="col-lg-6 connectedSortable">

        <div class="box box-primary">
            <div class="box-body no-padding">
                <div class="table-responsive">

                    <table class="table table-striped">
                        <tr>
                            <th>Device</th>
                            <th>Series</th>
                            <th>Value</th>
                            <th>Trend</th>
                            <th>Updated</th>
                        </tr>

                        {% for device_name, series_list in device_readings.items() %}
                                {% for series in series_list %}
                                    <tr>
                                        <td>
                                            <a href="{{ url_for('.dashboard', device_name=device_name ) }}">
                                                {{ device_name|title }}
                                            </a>
                                        </td>
                                        <td>{{ series.name|title }}</td>
                                        <td>{{ series.value|float|round(2) }}</td>
                                        <td>
                                            <span class="sparkline">{{ series.sparkline }}</span>
                                        </td>
                                        <td>
                                            {{ series.created_at}}
                                        </td>
                                    </tr>
                            {% endfor %}
                        {% endfor %}
                    </table>

                </div>
            </div>
        </div>

    </section>


{% endblock %}

{% block extra_js %}

    <script type="text/javascript">

        $(function(){

            $('.sparkline').sparkline('html', {
                type: 'line',
                height: '1em',
                width: '4em',
                lineColor: 'black'
            });

        });

    </script>

{% endblock %}
