<html>
  <style>
    [v-cloak] { display: none; }
    html {
      background-color: #333;
      color: #fff;
      font-family: monospace;
    }
    span.event {
      background-color: #e3e3ff3f;
      border-radius: 0.5rem;
      display: inline-block;
      margin-bottom: 0.5rem;
      margin-right: 5px;
      padding: 0.1rem 0.5rem;
      white-space: pre;
    }
    table {
      border-spacing: 10px;
      margin: 0 auto;
      max-width: 1200px;
    }
    td {
      vertical-align: top;
    }
    th {
      text-align: left;
    }
  </style>

  <div id="app" v-cloak>
    <table>
      <tr><th>Time</th><th>Event</th><th>Fields</th></tr>
      <tr v-for="event in events">
        <td>{{ moment(event.time).format('YYYY-MM-DD HH:mm:ss') }}</td>
        <td>{{ event.event }}</td>
        <td>
          <span
            class="event"
            v-for="field in formattedFields(event.fields)"
          >{{ field }}</span>
        </td>
      </tr>
    </table>
  </div>

  <script src="https://cdn.jsdelivr.net/combine/npm/vue@2,npm/moment@2"></script>
  <script type="module">
    import EventClient from './eventclient.js'

    new Vue({
      computed: {
        maxEventLen() {
          return this.events
            .map(evt => evt.event.length)
            .reduce((ml, cl) => cl > ml ? cl : ml, 0)
        },
      },

      data: {
        events: [],
      },

      el: '#app',

      methods: {
        formattedFields(fields) {
          return Object.entries(fields).map(el => `${el[0]}="${el[1]}"`).sort()
        },
        moment,
      },

      mounted() {
        window.botClient = new EventClient({
          handlers: {
            _: (evt, data, time, live) => {
              if (window.botClient.paramOptionFallback('hide', '').split(',').includes(evt)) {
                return
              }

              this.events = [
                { event: evt, fields: data, time },
                ...this.events,
              ]
            },
          },
          replay: true,
        })
      },
    })
  </script>
</html>