{% extends "base.html" %}

{% block title %}logs: {{ bot_name }} - irc.bot{% endblock %}

{% block head %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  var ws = new WebSocket(
    (location.protocol === 'https:' ? 'wss://' : 'ws://') +
    location.host + '/{{ bot_id }}/logs/ws'
  );
  var tbody = document.getElementById('log-body');
  ws.onmessage = function(e) {
    var entry = JSON.parse(e.data);
    var tr = document.createElement('tr');
    tr.innerHTML =
      '<td class="log-level log-' + entry.level + '">' + entry.level + '</td>' +
      '<td>' + entry.message + '</td>' +
      '<td class="mono">' + entry.timestamp + '</td>';
    tbody.insertBefore(tr, tbody.firstChild);
  };
});
</script>
{% endblock %}

{% block content %}
<div class="content">
  <div class="bot-header">
    <h1>logs: {{ bot_name }}</h1>
    <a href="/{{ bot_id }}" class="btn-outline">back</a>
  </div>

  <table class="table log-table">
    <thead>
      <tr>
        <th>level</th>
        <th>message</th>
        <th>time</th>
      </tr>
    </thead>
    <tbody id="log-body">
      {% for log in logs %}
      <tr>
        <td class="log-level log-{{ log.level }}">{{ log.level }}</td>
        <td>{{ log.message }}</td>
        <td class="mono">{{ log.created_at }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}