{% extends "base.html" %}
{% block title %}Mitarbeiter-Produktivität{% endblock %}
{% block heading %}👥 Team-Produktivität{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Auswertungen / Team-Produktivität</p>{% endblock %}

{% block content %}
<style>
  table.team { width:100%; border-collapse:collapse; }
  table.team th, table.team td { padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
  table.team th { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
  .pct-bar { height:14px; background:rgba(255,255,255,0.06); border-radius:7px; overflow:hidden; }
  .pct-bar .fill { height:100%; background:linear-gradient(90deg,#10b981,#34d399); }
</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;">Zeitraum: letzte <strong>{{ days }}</strong> Tage (seit {{ since }})</p>
  <div style="display:flex;gap:6px;">
    <a href="/reports/team?days=7"   class="btn btn-sm {% if days == 7 %}btn-primary{% else %}btn-secondary{% endif %}">7 T</a>
    <a href="/reports/team?days=30"  class="btn btn-sm {% if days == 30 %}btn-primary{% else %}btn-secondary{% endif %}">30 T</a>
    <a href="/reports/team?days=90"  class="btn btn-sm {% if days == 90 %}btn-primary{% else %}btn-secondary{% endif %}">90 T</a>
    <a href="/reports/team?days=365" class="btn btn-sm {% if days == 365 %}btn-primary{% else %}btn-secondary{% endif %}">1 J</a>
  </div>
</div>

<div class="card">
  <table class="team">
    <thead>
      <tr>
        <th>Mitarbeiter</th>
        <th>Rolle</th>
        <th class="num" style="text-align:right;">Schicht (h)</th>
        <th class="num" style="text-align:right;">Pause (h)</th>
        <th class="num" style="text-align:right;">Produktiv (h)</th>
        <th class="num" style="text-align:right;">Quote</th>
        <th class="num" style="text-align:right;">Urlaub</th>
        <th class="num" style="text-align:right;">Krank</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td><strong>{{ r.name }}</strong></td>
        <td style="font-size:11px;color:rgba(255,255,255,0.55);">{{ r.role }}</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;">{{ (r.shift_min / 60) | round(1) }}</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.55);">{{ (r.break_min / 60) | round(1) }}</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;color:#10b981;">{{ (r.productive_min / 60) | round(1) }}</td>
        <td style="text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
                   color:{% if r.ratio >= 70 %}#10b981{% elif r.ratio >= 50 %}#fcd34d{% else %}#ef4444{% endif %};">
          {{ r.ratio }} %
        </td>
        <td style="text-align:right;color:#fcd34d;">{{ r.vacation_days }} Tg</td>
        <td style="text-align:right;color:#fca5a5;">{{ r.sick_days }} Tg</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> Quote = Produktiv-Zeit (Job + Rüsten) ÷ Netto-Zeit (Schicht − Pause). Werte über 70&nbsp;% sind sehr gut, 50-70&nbsp;% normal, unter 50&nbsp;% deuten auf viele Stillstände, Wartezeiten oder ungebuchte Tätigkeiten hin.
</div>

{% endblock %}