{% extends "layout.html" %}

{% block title %}TrueNAS Burn-In — Stats{% endblock %}

{% block content %}
<div class="page-toolbar">
  <h1 class="page-title">Analytics</h1>
  <div class="toolbar-right">
    <span class="page-subtitle">{{ drives_total }} drives tracked</span>
  </div>
</div>

<!-- Overall stat cards -->
<div class="stats-row" style="margin-bottom:24px">
  <div class="overview-card">
    <span class="ov-value">{{ overall.total or 0 }}</span>
    <span class="ov-label">Total Jobs</span>
  </div>
  <div class="overview-card ov-green">
    <span class="ov-value">{{ overall.passed or 0 }}</span>
    <span class="ov-label">Passed</span>
  </div>
  <div class="overview-card ov-red">
    <span class="ov-value">{{ overall.failed or 0 }}</span>
    <span class="ov-label">Failed</span>
  </div>
  <div class="overview-card ov-blue">
    <span class="ov-value">{{ overall.running or 0 }}</span>
    <span class="ov-label">Running</span>
  </div>
  <div class="overview-card ov-gray">
    <span class="ov-value">{{ overall.cancelled or 0 }}</span>
    <span class="ov-label">Cancelled</span>
  </div>
  {% if overall.total and overall.total > 0 %}
  <div class="overview-card ov-green">
    <span class="ov-value">{{ "%.0f" | format(100 * (overall.passed or 0) / overall.total) }}%</span>
    <span class="ov-label">Pass Rate</span>
  </div>
  {% endif %}
</div>

<div class="stats-grid">

  <!-- Failure rate by model -->
  <div class="stats-section">
    <h2 class="section-title">Results by Drive Model</h2>
    {% if by_model %}
    <div class="table-wrap" style="max-height:none">
      <table>
        <thead>
          <tr>
            <th>Model</th>
            <th style="text-align:right">Total</th>
            <th style="text-align:right">Passed</th>
            <th style="text-align:right">Failed</th>
            <th style="text-align:right">Pass Rate</th>
            <th style="min-width:120px">Rate Bar</th>
          </tr>
        </thead>
        <tbody>
          {% for m in by_model %}
          <tr>
            <td style="font-weight:500;color:var(--text-strong)">{{ m.model }}</td>
            <td class="mono text-muted" style="text-align:right">{{ m.total }}</td>
            <td class="mono" style="text-align:right;color:var(--green)">{{ m.passed }}</td>
            <td class="mono" style="text-align:right;color:{% if m.failed > 0 %}var(--red){% else %}var(--text-muted){% endif %}">{{ m.failed }}</td>
            <td class="mono" style="text-align:right;font-weight:600;color:{% if (m.pass_rate or 0) >= 90 %}var(--green){% elif (m.pass_rate or 0) >= 70 %}var(--yellow){% else %}var(--red){% endif %}">
              {{ m.pass_rate or 0 }}%
            </td>
            <td>
              <div class="rate-bar-wrap">
                <div class="rate-bar-fill rate-pass" style="width:{{ m.pass_rate or 0 }}%"></div>
                <div class="rate-bar-fill rate-fail" style="width:{{ 100 - (m.pass_rate or 0) }}%"></div>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="empty-state" style="border:1px solid var(--border);border-radius:8px;padding:32px">
      No completed burn-in jobs yet.
    </div>
    {% endif %}
  </div>

  <!-- Activity last 14 days -->
  <div class="stats-section">
    <h2 class="section-title">Activity — Last 14 Days</h2>
    {% if by_day %}
    <div class="table-wrap" style="max-height:none">
      <table>
        <thead>
          <tr>
            <th>Date</th>
            <th style="text-align:right">Total</th>
            <th style="text-align:right">Passed</th>
            <th style="text-align:right">Failed</th>
          </tr>
        </thead>
        <tbody>
          {% for d in by_day %}
          <tr>
            <td class="mono text-muted">{{ d.day }}</td>
            <td class="mono" style="text-align:right;color:var(--text-strong)">{{ d.total }}</td>
            <td class="mono" style="text-align:right;color:var(--green)">{{ d.passed }}</td>
            <td class="mono" style="text-align:right;color:{% if d.failed > 0 %}var(--red){% else %}var(--text-muted){% endif %}">{{ d.failed }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="empty-state" style="border:1px solid var(--border);border-radius:8px;padding:32px">
      No activity in the last 14 days.
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}