{% extends "base.html" %}

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

{% block sub_title %}{% endblock %}

{% block content %}

    {% if webcams %}
        <div class="row">
            <section class="col-lg-6">

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

                        {% for webcam in webcams %}
                            <img class="webcam-image" src="{{ webcam.full_path }}" alt="{{ webcam.name }}"/>
                        {% endfor %}

                    </div>
                </div>
            </section>
        </div>
    {% endif %}

    <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_series, latest_value, updated_at, latest_values in device_readings %}
                            <tr>
                                <td>
                                    <a href="{{ url_for('.dashboard', device_name=device_series.device.area.name ) }}">
                                        {{ device_series.device.area.name|title }}
                                    </a>
                                </td>
                                <td>{{ device_series.series.name|title }}</td>
                                <td>{{ latest_value|float|round(2) }}</td>
                                <td>
                                    <span class="sparkline">{{ latest_values }}</span>
                                </td>
                                <td>
                                    {{ updated_at }}
                                </td>
                            </tr>
                        {% 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 %}