{# QC-flag legend + per-variable flag-count table with inline bar charts.  The
   `qc` panel payload (kind="html").  The `.qc-bar`/`.qc-legend` style block
   moved to mooring.html page_styles. #}
<div class="qc-legend">
  <span style="background:var(--good)"></span>good&nbsp;(1)
  <span style="background:var(--qc-good2)"></span>prob.&nbsp;good&nbsp;(2)
  <span style="background:var(--qc-suspect3)"></span>suspect&nbsp;(3)
  <span style="background:var(--qc-bad4)"></span>bad&nbsp;(4)
  <span style="background:var(--qc-interp8)"></span>interp.&nbsp;(8)
  <span style="background:var(--qc-missing9)"></span>missing&nbsp;(9)
</div>
{% set has_qc = instruments | selectattr("qc_summary") | list %}
{% if has_qc %}
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Type</th>
      <th>S/N</th>
      <th>Variable</th>
      <th class="num">N</th>
      <th class="num">Good&nbsp;%</th>
      <th class="num">Suspect&nbsp;%</th>
      <th class="num">Bad&nbsp;%</th>
      <th class="num">Interp.&nbsp;%</th>
      <th class="num">Missing&nbsp;%</th>
      <th>Distribution</th>
    </tr>
  </thead>
  <tbody>
    {% set ns = namespace(idx=0) %}
    {% for instr in instruments %}
      {% if instr.qc_summary %}
        {% set ns.idx = ns.idx + 1 %}
        {% for row in instr.qc_summary %}
        {% set good   = row.flags | selectattr("flag", "eq", 1) | first %}
        {% set susp   = row.flags | selectattr("flag", "eq", 3) | first %}
        {% set bad    = row.flags | selectattr("flag", "eq", 4) | first %}
        {% set interp = row.flags | selectattr("flag", "eq", 8) | first %}
        {% set miss   = row.flags | selectattr("flag", "eq", 9) | first %}
        <tr>
          <td class="num">{% if loop.index0 == 0 %}{{ ns.idx }}{% endif %}</td>
          <td>{% if loop.index0 == 0 %}{{ instr.instr_type }}{% endif %}</td>
          <td>{% if loop.index0 == 0 %}<code>{{ instr.serial }}</code>{% endif %}</td>
          <td><code>{{ row.var }}</code></td>
          <td class="num">{{ "{:,}".format(row.total) }}</td>
          <td class="num" style="color:{% if good.pct >= 95 %}var(--good){% elif good.pct >= 80 %}var(--warn){% else %}var(--bad){% endif %}">
            {{ good.pct }}
          </td>
          <td class="num">{% if susp.pct > 0 %}<span style="color:var(--warn)">{{ susp.pct }}</span>{% else %}&ndash;{% endif %}</td>
          <td class="num">{% if bad.pct > 0 %}<span style="color:var(--bad)">{{ bad.pct }}</span>{% else %}&ndash;{% endif %}</td>
          <td class="num">{% if interp.pct > 0 %}<span style="color:var(--interp)">{{ interp.pct }}</span>{% else %}&ndash;{% endif %}</td>
          <td class="num">{% if miss.pct > 0 %}{{ miss.pct }}{% else %}&ndash;{% endif %}</td>
          <td>
            <div class="qc-bar">
              {% for f in row.flags %}
                {% if f.pct > 0 %}
                <div style="width:{{ f.pct }}%; background:{{ f.color }};"
                     title="{{ f.label }}: {{ f.pct }}%"></div>
                {% endif %}
              {% endfor %}
            </div>
          </td>
        </tr>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </tbody>
</table>
{% else %}
<p class="none-note">No stage&nbsp;3 QC files found — run <code>oceanarray stage3</code> first.</p>
{% endif %}