<h1 class="page-header">Details for <a href="#">{{sensor.getName()}}</a></h1>

<script>
    $(function(){
        Morris.Line({
            element: "chart",
            data: [
                { x: (Date.now()-7*24*60*60*1000) },
                {{#aggregation}}
                    { x: {{.timestamp}}, data: {{.data}} },
                {{/aggregation}}
                { x: Date.now() }
            ],
            xkey: 'x',
            ykeys: ['data'],
            labels: ['Data'],
            continuousLine: false,
            resize: true
        });
	});
</script>

<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">Chart</div>
        <div class="panel-body">
            <div id="chart" style="height:350px;"></div>
        </div>
    </div>
</div>


<div class="col-md-5">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">Configuration</div>
        <div class="panel-body">
            <table class="table table-hover table-condensed">
                <thead>
                <tr>
                    <th class="text-right">Name:</th>
                    <th>{{sensor.getName()}}</th>
                </tr>
                </thead>
                <tr>
                    <th class="text-right">Type:</th>
                    <td>{{sensor.getDeviceData().getClass().getSimpleName()}}</td>
                </tr>
                <tr>
                    <th class="text-right">Public:</th>
                    <td>{{sensor.isSynced()}}</td>
                </tr>
                <tr>
                    <th class="text-right">Owner:</th>
                    <td>{{sensor.getUser().getUsername()}} <p></td>
                </tr>
                {{#sensor.getDeviceConfig().getConfiguration()}}
                <tr>
                    <th class="text-right">{{.getNiceName()}}:</th>
                    <td>{{.getString()}}</td>
                </tr>
                {{/sensor.getDeviceConfig().getConfiguration()}}
            </table>
        </div>
    </div>
</div>

<div class="col-md-7">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">History data</div>
        <div class="panel-body">

            <table class="table table-hover table-condensed">
                <thead>
                    <th class="col-md-6">Timestamp</th>
                    <th class="col-md-2">Data</th>
                </thead>
                {{#history}}
                <tr>
                    <td><span class="timestamp">{{.timestamp}}</span></td>
                    <td>{{.data}}</td>
                </tr>
                {{/history}}
            </table>
        </div>
    </div>
</div>
