<!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>
</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>
        {% for button in context.buttons %}
              <button v-shortkey.once="{{ button.shortcut }}" @shortkey="send('{{ button.value }}')" v-on:click="send('{{ button.value }}')">{{ button.label }}</button>
        {% endfor %}
        <div v-if="update">
            <div v-html="update.x.html"></div>
        </div>
      </main>
    </div>
</body>
</html>


