{% extends "base.html" %}

{% block title %}Reklamationen{% endblock %}
{% block heading %}Reklamationen (8D){% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/complaints">Alle</a>
    <a class="tab {% if status_filter=='open' %}is-active{% endif %}" href="/complaints?status=open">Offen</a>
    <a class="tab {% if status_filter=='investigating' %}is-active{% endif %}" href="/complaints?status=investigating">In Analyse</a>
    <a class="tab {% if status_filter=='contained' %}is-active{% endif %}" href="/complaints?status=contained">Eingegrenzt</a>
    <a class="tab {% if status_filter=='resolved' %}is-active{% endif %}" href="/complaints?status=resolved">Gelöst</a>
    <a class="tab {% if status_filter=='closed' %}is-active{% endif %}" href="/complaints?status=closed">Geschlossen</a>
  </div>
  <a class="btn btn-primary" href="/complaints/new">+ Neue Reklamation</a>
{% endblock %}

{% block content %}
<div class="card">
  {% if complaints %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Nr.</th>
        <th>Eröffnet</th>
        <th>Typ</th>
        <th>Schwere</th>
        <th>Betroffener</th>
        <th>Problem</th>
        <th>Bearbeiter</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for c in complaints %}
      <tr class="cursor-pointer" data-status="{{ c.status }}" onclick="location='/complaints/{{ c.id }}/edit'">
        <td class="nums font-semibold">{{ c.complaint_no }}</td>
        <td class="text-xs nums">{{ c.opened_at[:10] }}</td>
        <td>
          {% if c.kind == 'customer' %}<span class="badge badge-orange">Kunde</span>
          {% elif c.kind == 'supplier' %}<span class="badge badge-blue">Lieferant</span>
          {% else %}<span class="badge badge-amber">Intern</span>{% endif %}
        </td>
        <td>
          {% set sev_color = {'low':'neutral','medium':'amber','high':'orange','critical':'red'} %}
          <span class="badge badge-{{ sev_color.get(c.severity, 'neutral') }}">{{ c.severity }}</span>
        </td>
        <td class="text-xs">
          {% if c.kind == 'customer' %}{{ c.customer_name or '—' }}
          {% elif c.kind == 'supplier' %}{{ c.vendor_name or '—' }}
          {% else %}intern{% endif %}
        </td>
        <td class="text-xs" style="max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          {{ c.d2_problem or '—' }}
        </td>
        <td class="text-xs">{% if c.assigned_first %}{{ c.assigned_first }} {{ c.assigned_last }}{% else %}—{% endif %}</td>
        <td>
          {% set st_color = {'open':'red','investigating':'amber','contained':'blue','resolved':'emerald','closed':'neutral'} %}
          {% set st_label = {'open':'Offen','investigating':'In Analyse','contained':'Eingegrenzt','resolved':'Gelöst','closed':'Geschlossen'} %}
          <span class="badge badge-{{ st_color.get(c.status, 'neutral') }}">{{ st_label.get(c.status, c.status) }}</span>
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/complaints/{{ c.id }}/edit">Öffnen</a>
          <a class="btn btn-sm btn-primary" href="/complaints/{{ c.id }}/8d-wizard"
             style="margin-left:4px;background:#a78bfa;border-color:#a78bfa;color:#fff;"
             title="8D-Wizard">🔧 8D</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">⚠️</div>
    <p class="text-sm mb-4" style="color: var(--card-text-muted);">Keine Reklamationen.</p>
    <a class="btn btn-primary btn-sm" href="/complaints/new">+ Erste Reklamation</a>
  </div>
  {% endif %}
</div>
{% endblock %}