<!DOCTYPE html>
<html>
<head>
  <title>{{ context.title }}</title>
  <link rel="stylesheet" href="grid.css">
  <link rel="stylesheet" href="content.css">
    <script src="https://unpkg.com/vue" defer></script>
    <script type="module" src="https://unpkg.com/vue-shortkey" defer></script>
    <script type="module" src="lib/onmessage.js" defer></script>
    <script type="module" src="lib/reconnecting-websocket.js" defer></script>
    <script type="module" src="app.js"></script>
    <script type="module">
        window._buttons = {{ ((context.buttons) or [{'label':'Skip (space)', 'value':-1, 'shortcut':"['space']"}]) | safe }};
    </script>
</head>
<body>
    <div id="app" class="container">
      <header>
        <!-- Header content -->
		<span class="status">[[ status ]]</span>
      </header>
      <main class="site-content">
        <!-- Main content -->
        <div class="content" v-html="data.x.html"></div>
        <div v-if="buttons">
              <button v-for="button in buttons" v-shortkey.once="button.shortcut" @shortkey="send(button.value)" :key="button.label" v-on:click="send(button.value)">[[ button.label ]]</button>
        </div>
        <div v-if="update">
            <div v-html="update.x.html"></div>
        </div>
      </main>
    </div>
</body>
</html>


