{% extends "base.html" %}

{% block title %}SPC / Statistische Prozesslenkung{% endblock %}
{% block heading %}📊 SPC · Statistische Prozesslenkung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Prüfmittel / SPC</p>{% endblock %}

{% block content %}
<style>
  .cpk-badge { display:inline-flex; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600; }
  .cpk-excellent { background:rgba(16,185,129,0.20); color:#047857; }
  .cpk-good      { background:rgba(16,185,129,0.10); color:#059669; }
  .cpk-ok        { background:rgba(245,158,11,0.15); color:#b45309; }
  .cpk-critical  { background:rgba(239,68,68,0.15); color:#dc2626; }
  .cpk-unknown   { background:rgba(115,115,115,0.10); color:#737373; }
</style>

<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Statistische Auswertung der Mess-Protokolle pro Template + Mess-Punkt.
  Cpk &ge; 1.67: ausgezeichnet · &ge; 1.33: gut · &ge; 1.0: ausreichend · &lt; 1.0: kritisch.
  Pflicht für IATF-16949 / ISO-9001-Audit-Nachweise.
</p>

<div class="card">
  <div class="card-header">
    <div>
      <h2>{{ templates|length }} Mess-Template{% if templates|length != 1 %}s{% endif %}</h2>
      <p class="sub">Mit hinterlegten Mess-Protokollen — Cpk-Berechnung über alle Records</p>
    </div>
  </div>
  {% for t in templates %}
    <div style="border-top:1px solid var(--card-border-2);padding:14px 18px;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
        <h3 style="font-size:15px;margin:0;">
          <a href="/spc/{{ t.template_id }}" class="text-blue-700 hover:underline">{{ t.template_name }}</a>
        </h3>
        <span class="text-xs nums text-neutral-500">{{ t.record_count }} Mess-Protokolle</span>
      </div>
      {% if t.description %}<p class="text-xs text-neutral-500 mb-2">{{ t.description }}</p>{% endif %}
      <table class="data-table" style="font-size:12px;">
        <thead>
          <tr>
            <th>Mess-Punkt</th>
            <th class="num">Nominal</th>
            <th class="num">Stichprobe (n)</th>
            <th class="num">Mittelwert</th>
            <th class="num">Cpk</th>
            <th class="num">Außer Spec</th>
            <th>Bewertung</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for p in t.points %}
            <tr>
              <td><strong>{{ p.name }}</strong></td>
              <td class="num nums">{{ p.nominal }}{% if p.unit %} {{ p.unit }}{% endif %}</td>
              <td class="num nums">{{ p.n }}</td>
              <td class="num nums">{% if p.mean is not none %}{{ "%.4f"|format(p.mean) }}{% else %}—{% endif %}</td>
              <td class="num nums" style="font-weight:600;">{% if p.cpk is not none %}{{ "%.2f"|format(p.cpk) }}{% else %}—{% endif %}</td>
              <td class="num nums" style="color:{% if p.out_of_spec_count > 0 %}#dc2626{% else %}#059669{% endif %};font-weight:600;">{{ p.out_of_spec_count }}</td>
              <td>
                <span class="cpk-badge cpk-{{ p.status }}">
                  {% if p.status == 'excellent' %}🟢 Ausgezeichnet{% endif %}
                  {% if p.status == 'good' %}🟢 Gut{% endif %}
                  {% if p.status == 'ok' %}🟡 Ausreichend{% endif %}
                  {% if p.status == 'critical' %}🔴 Kritisch{% endif %}
                  {% if p.status == 'unknown' %}— Zu wenig Daten{% endif %}
                </span>
              </td>
              <td>
                <a href="/spc/{{ t.template_id }}?point={{ p.idx }}" class="btn btn-sm btn-secondary">📊 Chart</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <p style="text-align:center;padding:40px;color:var(--card-text-muted);">
      Keine Mess-Templates mit Daten vorhanden.
      Über <a href="/measurements" class="text-blue-700 hover:underline">Messprotokolle</a> Werte erfassen.
    </p>
  {% endfor %}
</div>
{% endblock %}