<html>
<head>
<title>Pillow Talk Control Interface</title>
<!-- development version, includes helpful console warnings -->
<script src="/vue.js"></script>
<script src="/reconnecting-websocket.js"></script>
<script src="/moment.min.js"></script>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
<div id='status'>
<div id='overview'>
<dl>
<dt>Uptime</dt>
<dd>{{uptime}}</dd>
<dt>Languages</dt>
<dd v-for="lang in languages" :title="lang.file"
@click="panopticon.loadNarrative(lang.code, lang.file)">{{lang.code}}</dd>
</dl>
</div>
<div class='hugvey' v-for="hv in hugveys"
:class="[{'hugvey--off': hv.status == 'off'},{'hugvey--on': hv.status != 'off'},{'hugvey--paused': hv.status == 'paused'},{'hugvey--running': hv.status == 'running'}]">
<h1>
{{ hv.id }}
<!-- / {{ hv.status }} -->
</h1>
<div v-if="hv.status != 'off'">
{{ hv.language }} / {{ hv.msg }}
<div v-if="hv.finished != false">
Finished: {{time_passed(hv, 'finished')}}
</div>
<div v-for="c, key in hv.counts"><dt>{{key}}</dt><dd>{{c}}</dd></div>
<div v-if="hv.status != 'running'" @click="panopticon.pause(hv.id)">Pause</div>
<div v-if="hv.status != 'paused'" @click="panopticon.resume(hv.id)">Resume</div>
</div>
</div>
</div>
<div id='story'></div>
<div id='hugvey'></div>
<script type='application/javascript' src="/hugvey_console.js"></script>
</body>
</html>