{% extends "layout.jinja2" %}

{% block content %}
<div class="content">
    <div class="row visible-xs-inline">
        <div class="col-xs-12 well"  style="text-align:center">
            <h3 class="allcaps"><a href="/runstatus">Run Status</a></h3>
            <h4><span id="db-runstatus"></span></h4>
            <p>at</p>
            <h5><span id="db-runstatustimestamp"></span></h5>
            <button onclick="start()" class="btn btn-success">Start</button>
            <button onclick="stop()" class="btn btn-danger">Stop</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h2 class="allcaps">Latest Tag Values</h2>
            {% if tag_values|length > 0 %}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="allcaps">Name</th>
                            <th class="allcaps"></th>
                            <th class="allcaps">Value</th>
                            <th class="allcaps">Timestamp</th>
                            <!-- <th>Max</th>
                            <th>Min</th>
                            <th>Average</th>
                            <th>Total</th> -->
                        </tr>
                    </thead>
                    <tbody>

                        {% for t in tag_values %}
                        <tr>
                            <td><a href="/values/tag/{{t._id}}">{{t._id}}</a></td>
                            <td>
                                <button type="button" class="btn btn-default" title="{{t._id}}" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Max: {{t.max | round(3)}}<br \>
                                    Min: {{t.min | round(3)}}<br \>
                                    Average: {{t.average | round(3)}}<br \>
                                    Total: {{t.total | round(3)}}">
                                    Details
                                </button>
                            </td>
                            <td>{{t.value | round(3)}}</td>
                            <td>{{t.timestamp | datetime('short')}}</td>
                            <!-- <td>{{t.max | round(3)}}</td>
                            <td>{{t.min | round(3)}}</td>
                            <td>{{t.average | round(3)}}</td>
                            <td>{{t.total | round(3)}}</td> -->
                        </tr>
                        {% endfor %}

                    </tbody>
                </table>
            </div>
            {% else %}
            <h3>No tag values yet...</h3>
            {% endif %}


        </div>
        <div class="col-md-6">
            <h2 class="allcaps">Latest Card</h2>
            {% if card is defined %}
            <h3>{{card.timestamp | datetime('long')}}</h1>
                <canvas id="surfacecard" height="140"></canvas>
                <canvas id="downholecard" height="140"></canvas>
                {% else %}
                <h3>No card data yet...</h3>
                {% endif %}
            </div>
        </div>
    </div>

    <script>
    function getCardData(){
        $.ajax({
            dataType: 'json',
            url:"/json",
            success: drawCards
        });
    };
    getCardData();

    $(function () {
        $('[data-toggle="popover"]').popover({html: true})
    })

    </script>
    {% endblock content %}
