{% extends "base.html" %}
{% block title %}All Incidents{% endblock %}
{% block breadcrumb %}All Incidents{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <div class="page-eyebrow">Incident Log</div>
    <div class="page-title">All Incidents</div>
    <div class="page-subtitle">{{incidents|length}} incident{% if incidents|length != 1 %}s{% endif %} found</div>
  </div>
  <div class="page-header-actions">
    <a href="/incident/new" class="btn btn-gold">
      <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
      Log Incident
    </a>
  </div>
</div>

<!-- Filter bar -->
<form method="GET" id="filter-form" class="filter-bar">
  <div class="filter-search">
    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="var(--gray-400)" stroke-width="2">
      <circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/>
    </svg>
    <input type="text" name="q" value="{{q}}" placeholder="Search by title, ref, reporter…">
  </div>
  <select name="sev" class="filter-select">
    <option value="">All severities</option>
    {% for s in ['Critical','High','Medium','Low'] %}
    <option value="{{s}}" {% if sev==s %}selected{% endif %}>{{s}}</option>
    {% endfor %}
  </select>
  <select name="status" class="filter-select">
    <option value="">All statuses</option>
    {% for s in ['Open','In Progress','Resolved','Closed'] %}
    <option value="{{s}}" {% if status==s %}selected{% endif %}>{{s}}</option>
    {% endfor %}
  </select>
  <select name="cat" class="filter-select">
    <option value="">All categories</option>
    {% for c in cats %}
    <option value="{{c}}" {% if cat==c %}selected{% endif %}>{{c}}</option>
    {% endfor %}
  </select>
  <div class="filter-count">{{incidents|length}} result{% if incidents|length != 1 %}s{% endif %}</div>
  {% if q or sev or status or cat %}
  <a href="/incidents" class="btn btn-ghost btn-sm" style="white-space:nowrap">✕ Clear</a>
  {% endif %}
</form>

<div class="card">
  <div class="card-body no-pad">
    {% if incidents %}
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Ref</th><th>Title</th><th>Severity</th><th>Status</th>
            <th>Category</th><th>Assigned To</th><th>Location</th><th>Created</th><th></th>
          </tr>
        </thead>
        <tbody>
        {% for i in incidents %}
        <tr>
          <td><span class="ref-chip">{{i.ref}}</span></td>
          <td style="font-weight:600;max-width:200px">
            <a href="/incident/{{i.ref}}" style="color:var(--gray-900)">{{i.title}}</a>
          </td>
          <td><span class="badge badge-{{i.severity|lower}}">{{i.severity}}</span></td>
          <td>
            {% if i.status=='Open' %}<span class="badge badge-open">Open</span>
            {% elif i.status=='In Progress' %}<span class="badge badge-progress">In Progress</span>
            {% elif i.status=='Resolved' %}<span class="badge badge-resolved">Resolved</span>
            {% else %}<span class="badge badge-closed">{{i.status}}</span>{% endif %}
          </td>
          <td style="color:var(--gray-500);font-size:12px">{{i.category}}</td>
          <td style="color:var(--gray-500)">{{i.assigned_to or '—'}}</td>
          <td style="color:var(--gray-500)">{{i.location or '—'}}</td>
          <td style="color:var(--gray-400);font-size:12px;white-space:nowrap">{{i.created_at[:10]}}</td>
          <td>
            <div style="display:flex;gap:4px">
              <a href="/incident/{{i.ref}}" class="btn btn-ghost btn-xs">View</a>
              <a href="/incident/{{i.ref}}/edit" class="btn btn-ghost btn-xs">Edit</a>
              <button class="btn btn-ghost btn-xs" style="color:var(--red-600)" onclick="confirmDelete('{{i.ref}}')">Del</button>
            </div>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="empty-state">
      <div class="empty-icon">🔍</div>
      <div class="empty-title">No incidents match your filters</div>
      <div class="empty-sub">Try adjusting the filters above, or log a new incident.</div>
      <div style="display:flex;gap:10px">
        <a href="/incidents" class="btn btn-outline">Clear filters</a>
        <a href="/incident/new" class="btn btn-gold">Log incident</a>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}