{% extends "base.html" %}
{% block title %}Rüst- vs. Produktivzeit{% endblock %}
{% block heading %}📊 Rüst- vs. Produktivzeit-Report{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Auswertungen / Rüst- vs. Produktivzeit</p>{% endblock %}

{% block content %}
<style>
  .util-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:18px; }
  .util-stat { background:rgba(15,22,48,0.40); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; }
  .util-stat .v { font-size:28px; font-weight:700; }
  .util-stat .l { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px; }
  .util-bar { height:18px; background:rgba(255,255,255,0.06); border-radius:9px; overflow:hidden; display:flex; }
  .util-bar .seg { height:100%; }
  .util-bar .seg.setup { background:#a78bfa; }
  .util-bar .seg.work  { background:#10b981; }
  table.util { width:100%; border-collapse:collapse; }
  table.util th, table.util td { padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
  table.util th { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
</style>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
  <div>
    <p style="font-size:13px;color:rgba(255,255,255,0.55);margin:0;">Zeitraum: letzte <strong>{{ days }}</strong> Tage (seit {{ since }})</p>
  </div>
  <div style="display:flex;gap:6px;">
    <a href="/reports/utilization?days=7"   class="btn btn-sm {% if days == 7 %}btn-primary{% else %}btn-secondary{% endif %}">7 T</a>
    <a href="/reports/utilization?days=30"  class="btn btn-sm {% if days == 30 %}btn-primary{% else %}btn-secondary{% endif %}">30 T</a>
    <a href="/reports/utilization?days=90"  class="btn btn-sm {% if days == 90 %}btn-primary{% else %}btn-secondary{% endif %}">90 T</a>
    <a href="/reports/utilization?days=365" class="btn btn-sm {% if days == 365 %}btn-primary{% else %}btn-secondary{% endif %}">1 J</a>
  </div>
</div>

<div class="util-stats">
  <div class="util-stat">
    <div class="v" style="color:#10b981;">{{ (grand_work / 60) | round(1) }} h</div>
    <div class="l">Produktivzeit gesamt</div>
  </div>
  <div class="util-stat">
    <div class="v" style="color:#a78bfa;">{{ (grand_setup / 60) | round(1) }} h</div>
    <div class="l">Rüstzeit gesamt</div>
  </div>
  <div class="util-stat">
    <div class="v" style="color:#fff;">{{ (grand_total / 60) | round(1) }} h</div>
    <div class="l">Belegt gesamt</div>
  </div>
  <div class="util-stat">
    <div class="v" style="color:{% if grand_ratio < 15 %}#10b981{% elif grand_ratio < 30 %}#fcd34d{% else %}#ef4444{% endif %};">{{ grand_ratio }} %</div>
    <div class="l">Rüst-Quote</div>
  </div>
</div>

<div class="card">
  <div class="card-header"><div><h2>Pro Maschine</h2></div></div>
  <table class="util">
    <thead>
      <tr>
        <th>Maschine</th>
        <th class="num" style="text-align:right;">Produktiv</th>
        <th class="num" style="text-align:right;">Rüsten</th>
        <th class="num" style="text-align:right;">Belegt</th>
        <th class="num" style="text-align:right;">Rüst-%</th>
        <th style="width:30%;">Verteilung</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td><strong>{{ r.machine_name }}</strong></td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;">{{ (r.work_min / 60) | round(1) }} h</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;color:#a78bfa;">{{ (r.setup_min / 60) | round(1) }} h</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;">{{ (r.total_min / 60) | round(1) }} h</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
                   color:{% if r.setup_ratio < 15 %}#10b981{% elif r.setup_ratio < 30 %}#fcd34d{% else %}#ef4444{% endif %};">
          {{ r.setup_ratio }} %
        </td>
        <td>
          {% if r.total_min > 0 %}
          <div class="util-bar">
            <div class="seg work"  style="width: {{ ((r.work_min  / r.total_min) * 100) | round(1) }}%;" title="Produktiv: {{ (r.work_min/60) | round(1) }} h"></div>
            <div class="seg setup" style="width: {{ ((r.setup_min / r.total_min) * 100) | round(1) }}%;" title="Rüsten: {{ (r.setup_min/60) | round(1) }} h"></div>
          </div>
          {% else %}
          <span style="font-size:11px;color:rgba(255,255,255,0.40);">— keine Buchungen —</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div style="margin-top:18px;font-size:12px;color:rgba(255,255,255,0.55);padding:14px;background:rgba(53,102,146,0.10);border-radius:8px;">
  <strong>Lesen:</strong> Rüst-Quote &lt; 15&nbsp;% (grün) ist gut. 15-30&nbsp;% (gelb) ist normal für Kleinserien. &gt; 30&nbsp;% (rot) bedeutet zu viele Rüstwechsel — entweder Lose vergrößern oder Rüstzeit-Optimierung.
</div>

{% endblock %}