{% extends "reports/base.html" %}

{% block content %}
<div class="date-range">
  Report period: {{ date_from }} to {{ date_to }}
</div>

<div class="summary-box">
  <div class="summary-stat">
    <div class="value">{{ total_alerts }}</div>
    <div class="label">Total Alerts</div>
  </div>
  <div class="summary-stat">
    <div class="value" style="color: #991B1B;">{{ critical_count }}</div>
    <div class="label">Critical</div>
  </div>
  <div class="summary-stat">
    <div class="value" style="color: #92400E;">{{ warning_count }}</div>
    <div class="label">Warning</div>
  </div>
  <div class="summary-stat">
    <div class="value" style="color: #1E40AF;">{{ info_count }}</div>
    <div class="label">Info</div>
  </div>
  {% if mttr_minutes is not none %}
  <div class="summary-stat">
    <div class="value">{{ mttr_display }}</div>
    <div class="label">Avg MTTR</div>
  </div>
  {% endif %}
</div>

{% if alerts %}
<h2 class="section-title">Alert Events</h2>
<table>
  <thead>
    <tr>
      <th>Timestamp</th>
      <th>Device</th>
      <th>Severity</th>
      <th>Message</th>
      <th>Status</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    {% for alert in alerts %}
    <tr>
      <td>{{ alert.fired_at }}</td>
      <td style="font-weight: 600;">{{ alert.hostname or '-' }}</td>
      <td>
        <span class="badge badge-{{ alert.severity }}">{{ alert.severity | upper }}</span>
      </td>
      <td>{{ alert.message or '-' }}</td>
      <td>
        <span class="badge badge-{{ alert.status }}">{{ alert.status | upper }}</span>
      </td>
      <td>{{ alert.duration or '-' }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="no-data">No alerts found for the selected date range.</div>
{% endif %}
{% endblock %}