{% extends "base_report.html" %}

{% block report_title %}SPC Report{% endblock %}

{% block content %}
<!-- Recipe info + filters -->
<div class="info-box">
  <span class="label">Recipe:</span> {{ recipe.code }} — {{ recipe.name }}
  {% if subtask %}
  &nbsp;|&nbsp; <span class="label">Measurement Point:</span> #{{ subtask.marker_number }} — {{ subtask.description }}
  {% endif %}
  {% if filters_desc %}
  <br>
  <span class="label">Filters:</span> {{ filters_desc | join(' | ') }}
  {% endif %}
</div>

<!-- Summary -->
<div class="section">
  <div class="section-title">Summary</div>
  <div class="summary-grid">
    <div class="summary-card">
      <div class="number mono">{{ summary.total }}</div>
      <div class="label">Total</div>
    </div>
    <div class="summary-card pass-bg">
      <div class="number mono pass">{{ summary.pass_rate }}%</div>
      <div class="label">Pass ({{ summary.pass_count }})</div>
    </div>
    <div class="summary-card warning-bg">
      <div class="number mono warning">{{ summary.warning_rate }}%</div>
      <div class="label">Warning ({{ summary.warning_count }})</div>
    </div>
    <div class="summary-card fail-bg">
      <div class="number mono fail">{{ summary.fail_rate }}%</div>
      <div class="label">Fail ({{ summary.fail_count }})</div>
    </div>
  </div>
</div>

<!-- Capability Indices -->
{% if capability and capability.cp is not none %}
<div class="section">
  <div class="section-title">Capability Indices</div>
  <table>
    <thead>
      <tr>
        <th>Index</th>
        <th>Value</th>
        <th>Rating</th>
      </tr>
    </thead>
    <tbody>
      {% for idx_name, idx_val in [('Cp', capability.cp), ('Cpk', capability.cpk), ('Pp', capability.pp), ('Ppk', capability.ppk)] %}
      <tr>
        <td style="font-weight: 600;">{{ idx_name }}</td>
        <td class="mono">{{ idx_val if idx_val is not none else '—' }}</td>
        <td>
          {% if idx_val is not none %}
            {% if idx_val >= 1.33 %}
              <span class="cap-good">Capable</span>
            {% elif idx_val >= 1.0 %}
              <span class="cap-marginal">Marginal</span>
            {% else %}
              <span class="cap-poor">Not Capable</span>
            {% endif %}
          {% else %}
            —
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Statistics -->
  <div class="info-box" style="margin-top: 8px;">
    <span class="label">n:</span> <span class="mono">{{ capability.n }}</span>
    &nbsp;|&nbsp; <span class="label">Mean:</span> <span class="mono">{{ capability.mean }}</span>
    &nbsp;|&nbsp; <span class="label">Std Dev:</span> <span class="mono">{{ capability.std_dev }}</span>
    {% if subtask %}
    <br>
    <span class="label">Tolerances:</span>
    {% if subtask.nominal is not none %}Nom: <span class="mono">{{ subtask.nominal }}</span> {% endif %}
    {% if subtask.utl is not none %}UTL: <span class="mono">{{ subtask.utl }}</span> {% endif %}
    {% if subtask.ltl is not none %}LTL: <span class="mono">{{ subtask.ltl }}</span> {% endif %}
    {% if subtask.uwl is not none %}UWL: <span class="mono">{{ subtask.uwl }}</span> {% endif %}
    {% if subtask.lwl is not none %}LWL: <span class="mono">{{ subtask.lwl }}</span> {% endif %}
    {% endif %}
  </div>
</div>
{% endif %}

<!-- Control Chart -->
{% if control_chart_svg %}
<div class="section">
  <div class="section-title">Control Chart</div>
  <div class="chart-container">
    {{ control_chart_svg | safe }}
  </div>
</div>
{% endif %}

<!-- Histogram -->
{% if histogram_svg %}
<div class="section">
  <div class="section-title">Histogram</div>
  <div class="chart-container">
    {{ histogram_svg | safe }}
  </div>
</div>
{% endif %}

{% endblock %}