{# plugins/unifi/templates/unifi/events.html #}
{% if not events %}
<div class="card">
  <p style="color:var(--text-muted);">No events in the last {{ range_key }}.</p>
</div>
{% else %}
<div class="card">
  <div class="section-title" style="margin-bottom:0.75rem;">
    Site Events
    <span style="float:right;font-weight:normal;font-size:0.8rem;color:var(--text-dim);">{{ events|length }} in {{ range_key }}</span>
  </div>
  <table class="table" style="width:100%;font-size:0.82rem;">
    <colgroup>
      <col style="width:12rem;">
      <col style="width:5rem;">
      <col style="width:5rem;">
      <col>
    </colgroup>
    <tr style="color:var(--text-muted);font-size:0.78rem;">
      <th style="text-align:left;font-weight:normal;padding:0 0.5rem 0.4rem 0;">Time</th>
      <th style="text-align:left;font-weight:normal;padding:0 0.5rem 0.4rem;">Category</th>
      <th style="text-align:left;font-weight:normal;padding:0 0.5rem 0.4rem;">Key</th>
      <th style="text-align:left;font-weight:normal;padding:0 0 0.4rem;">Message</th>
    </tr>
    {% for ev in events %}
    <tr style="{% if loop.index is divisibleby 2 %}background:var(--row-alt,rgba(255,255,255,0.02));{% endif %}">
      <td style="padding:0.25rem 0.5rem 0.25rem 0;color:var(--text-dim);font-size:0.77rem;white-space:nowrap;">
        {{ ev.event_time.strftime("%Y-%m-%d %H:%M:%S") }}
      </td>
      <td style="padding:0.25rem 0.5rem;">
        <span style="font-size:0.75rem;padding:0.1rem 0.4rem;border-radius:3px;background:
          {% if ev.category == 'wlan' %}rgba(96,96,192,0.25)
          {% elif ev.category == 'wan' %}rgba(96,160,96,0.25)
          {% elif ev.category == 'ids' %}rgba(192,64,64,0.25)
          {% else %}rgba(128,128,128,0.15){% endif %};">
          {{ ev.category }}
        </span>
      </td>
      <td style="padding:0.25rem 0.5rem;color:var(--text-dim);font-family:monospace;font-size:0.75rem;">
        {{ ev.event_key.replace("EVT_", "") if ev.event_key else "" }}
      </td>
      <td style="padding:0.25rem 0;color:var(--text);">
        {{ ev.message }}
        {% if ev.source_mac %}
        <span style="color:var(--text-dim);font-size:0.75rem;font-family:monospace;margin-left:0.4rem;">{{ ev.source_mac }}</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}