{% extends "base.html" %}
{% block title %}Kapazitäts-Forecast{% endblock %}
{% block heading %}📅 Kapazitäts-Forecast{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Auswertungen / Kapazitäts-Forecast</p>{% endblock %}

{% block content %}
<style>
  table.cap { width:100%; border-collapse:collapse; }
  table.cap th, table.cap td { padding:8px 10px; text-align:center; border:1px solid rgba(255,255,255,0.06); }
  table.cap th { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.04); }
  table.cap td.machine { text-align:left; font-weight:600; background:rgba(255,255,255,0.03); white-space:nowrap; }
  .cap-cell { display:flex; flex-direction:column; align-items:center; gap:2px; }
  .cap-cell .pct { font-size:13px; font-weight:700; }
  .cap-cell .h { font-size:10px; color:rgba(255,255,255,0.55); }
  .cap-bar { height:5px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; width:100%; max-width:80px; }
  .cap-bar .fill { height:100%; }
  .free .pct { color:rgba(255,255,255,0.40); }
  .free .fill { background:rgba(255,255,255,0.20); }
  .ok .pct { color:#10b981; }
  .ok .fill { background:#10b981; }
  .tight .pct { color:#fcd34d; }
  .tight .fill { background:#fcd34d; }
  .overload .pct { color:#ef4444; }
  .overload .fill { background:#ef4444; }
</style>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
  <p style="font-size:13px;color:rgba(255,255,255,0.55);margin:0;">Belegung pro Maschine + Kalenderwoche · {{ weeks }} Wochen ab heute</p>
  <div style="display:flex;gap:6px;">
    <a href="/reports/capacity?weeks=4"  class="btn btn-sm {% if weeks == 4 %}btn-primary{% else %}btn-secondary{% endif %}">4 W</a>
    <a href="/reports/capacity?weeks=6"  class="btn btn-sm {% if weeks == 6 %}btn-primary{% else %}btn-secondary{% endif %}">6 W</a>
    <a href="/reports/capacity?weeks=12" class="btn btn-sm {% if weeks == 12 %}btn-primary{% else %}btn-secondary{% endif %}">12 W</a>
    <a href="/reports/capacity?weeks=26" class="btn btn-sm {% if weeks == 26 %}btn-primary{% else %}btn-secondary{% endif %}">26 W</a>
  </div>
</div>

<div class="card" style="overflow-x:auto;">
  <table class="cap">
    <thead>
      <tr>
        <th style="text-align:left;">Maschine</th>
        {% for kw in kw_list %}
        <th>KW {{ kw }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in matrix %}
      <tr>
        <td class="machine">{{ row.machine_name }}</td>
        {% for w in row.weeks %}
        <td class="{{ w.status }}">
          <div class="cap-cell">
            <div class="pct">{{ w.ratio }}%</div>
            <div class="cap-bar"><div class="fill" style="width:{{ [w.ratio, 100]|min }}%;"></div></div>
            <div class="h">{{ (w.planned_min / 60) | round(1) }} h</div>
          </div>
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div style="display:flex;gap:18px;margin-top:14px;font-size:12px;color:rgba(255,255,255,0.55);flex-wrap:wrap;">
  <span><span style="display:inline-block;width:14px;height:14px;background:rgba(255,255,255,0.20);border-radius:3px;margin-right:5px;vertical-align:middle;"></span>frei (&lt; 30%)</span>
  <span><span style="display:inline-block;width:14px;height:14px;background:#10b981;border-radius:3px;margin-right:5px;vertical-align:middle;"></span>ok (30-80%)</span>
  <span><span style="display:inline-block;width:14px;height:14px;background:#fcd34d;border-radius:3px;margin-right:5px;vertical-align:middle;"></span>knapp (80-100%)</span>
  <span><span style="display:inline-block;width:14px;height:14px;background:#ef4444;border-radius:3px;margin-right:5px;vertical-align:middle;"></span>überlastet (&gt; 100%)</span>
</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>Datenbasis:</strong> Geplante Job-Minuten (production_jobs.duration_min) für Aufträge deren <strong>Liefertermin</strong> in der jeweiligen Woche liegt. Verfügbare Zeit = 5&nbsp;Werktage × 8&nbsp;h = 2400&nbsp;min. (1-Schicht-Annahme — bei Mehrschicht-Betrieb manuell skalieren.)
</div>

{% endblock %}