{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Incidents</h1>
  {% if current_user.has_permission('incidents.create') %}
    <a href="/incidents/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> Log Incident</a>
  {% endif %}
</div>
<form method="get" class="row g-2 mb-3">
  <div class="col-md-3">
    <select name="status" class="form-select form-select-sm">
      <option value="">All Statuses</option>
      {% for s in statuses %}<option value="{{ s.value }}">{{ s.value }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <select name="severity" class="form-select form-select-sm">
      <option value="">All Severities</option>
      {% for s in severities %}<option value="{{ s.value }}">{{ s.value }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-md-2"><button class="btn btn-sm btn-outline-secondary w-100">Filter</button></div>
</form>
<div class="card-panel">
  <table class="hop-table">
    <thead><tr><th>ID</th><th>Title</th><th>Severity</th><th>Status</th><th>Detected</th></tr></thead>
    <tbody>
    {% for i in incidents %}
      <tr>
        <td><a class="row-link" href="/incidents/{{ i.id }}">{{ i.incident_number }}</a></td>
        <td>{{ i.title }}</td>
        <td><span class="status-pill badge-severity-{{ i.severity.value[:2] | lower }}">{{ i.severity.value }}</span></td>
        <td>{{ i.status.value }}</td>
        <td>{{ i.detected_at.strftime('%d %b %Y %H:%M') }}</td>
      </tr>
    {% else %}
      <tr><td colspan="5"><div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>No incidents logged.</p></div></td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}