{% extends 'base.html' %}
{% block content %}
<h1>Event log</h1>
<p class="note">Latest {{ events | length }} matching events, up to 500. Newest first. Times shown in your local timezone.</p>
<form method="get" action="/events" id="event-filters">
  <label>Refresh
    <select name="refresh">
      {% for seconds, label in [(0, 'Manual'), (5, '5 seconds'), (30, '30 seconds'), (60, '1 minute')] %}<option value="{{ seconds }}" {% if refresh == seconds %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
  </label>
  <button type="submit">Update</button>
  <a href="/events">Reset</a>
</form>
<div class="table-wrap">
<table class="event-log" aria-label="Event log">
  <colgroup><col style="width: 16%"><col style="width: 4%"><col style="width: 5%"><col style="width: 8%"><col style="width: 12%"><col style="width: 22%"><col style="width: 33%"></colgroup>
  <thead>
    <tr><th scope="col">Time (local)</th><th scope="col">ID</th><th scope="col">Level</th><th scope="col">Category</th><th scope="col">Subcategory</th><th scope="col">Event / Source</th><th scope="col">Message</th></tr>
    <tr class="filter-row">
      <td></td><td></td><td></td>
      <td>
        <select name="category" id="category" form="event-filters" aria-label="Filter by category">
          <option value="">All categories</option>
          {% for choice in categories %}<option value="{{ choice }}" {% if category == choice %}selected{% endif %}>{{ choice }}</option>{% endfor %}
        </select>
      </td>
      <td>
        <select name="subcategory" id="subcategory" form="event-filters" aria-label="Filter by subcategory">
          <option value="">All subcategories</option>
          {% for choice in subcategories %}<option value="{{ choice }}" {% if subcategory == choice %}selected{% endif %}>{{ choice }}</option>{% endfor %}
        </select>
      </td>
      <td>
        <select name="name" id="event-name" form="event-filters" aria-label="Filter by event name">
          <option value="">All events</option>
          {% for choice in event_names %}<option value="{{ choice }}" {% if name == choice %}selected{% endif %}>{{ choice }}</option>{% endfor %}
        </select>
      </td>
      <td></td>
    </tr>
  </thead>
  <tbody>
  {% for event in events %}
    <tr>
      <td><time datetime="{{ event.occurred_at | utc_iso }}" data-local-time="full">—</time></td>
      <td><a href="/events/{{ event.event_id }}">#{{ event.event_id }}</a></td>
      <td class="level level-{{ event.log_level | lower }}">{{ event.log_level }}</td>
      <td>{{ event.category }}</td>
      <td>{{ event.subcategory }}</td>
      <td class="event-source">{{ event.source_name or '—' }} - {{ event.name }}</td>
      <td class="preview">{% with message=event.message %}{% include event.message_template %}{% endwith %}</td>
    </tr>
  {% else %}<tr><td colspan="7">No events match these filters.</td></tr>{% endfor %}
  </tbody>
</table>
</div>
<script>
  const categories = {{ categories | tojson }};
  const eventParents = {{ event_parents | tojson }};
  const category = document.getElementById('category');
  const subcategory = document.getElementById('subcategory');
  const eventName = document.getElementById('event-name');

  function updateOptions(select, label, choices) {
    const selected = select.value;
    select.replaceChildren(new Option(label, ''));
    for (const name of choices) select.add(new Option(name, name));
    select.value = choices.includes(selected) ? selected : '';
  }

  function updateSubcategories() {
    const choices = category.value ? categories[category.value] : Object.values(categories).flat();
    updateOptions(subcategory, 'All subcategories', [...new Set(choices)].sort());
  }

  function updateEvents() {
    const choices = Object.keys(eventParents).filter(name => {
      const parent = eventParents[name];
      return (!category.value || parent.category === category.value)
        && (!subcategory.value || parent.subcategory === subcategory.value);
    });
    updateOptions(eventName, 'All events', choices);
  }

  category.addEventListener('change', () => {
    updateSubcategories();
    updateEvents();
  });
  subcategory.addEventListener('change', updateEvents);
  eventName.addEventListener('change', () => {
    if (!eventName.value) return;
    const parent = eventParents[eventName.value];
    category.value = parent.category;
    updateSubcategories();
    subcategory.value = parent.subcategory;
    updateEvents();
  });
</script>
{% endblock %}