<html>
<head>
<title>Pillow Talk Control Interface</title>
<!-- development version, includes helpful console warnings -->
<script src="/js/vue.js"></script>
<script src="/js/reconnecting-websocket.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/d3.v5.min.js"></script>
<script src="/js/crel.min.js"></script>
<link rel="stylesheet" href="/css/styles.css"></link>
</head>
<body>
<div id="interface">
<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"
class="btn lang--btn" @click="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 id="controls">
<div id="btn-save" class="btn">Save</div>
<div id="btn-addMsg" class="btn">Create message</div>
</div>
<div id="msg"></div>
<svg id='graph' viewbox="0 0 1280 1024"
preserveAspectRatio="xMidYMid">
<defs>
<marker markerHeight="8" markerWidth="8" refY="0"
refX="12" viewBox="0 -6 16 12" preserveAspectRatio="none"
orient="auto" id="arrowHead">
<path d="M0,-6L16,0L0,6" fill="black"></path></marker>
</defs>
<g id='container'>
</g>
</svg>
</div>
</div>
<script type='application/javascript' src="/js/hugvey_console.js"></script>
</body>
</html>