{% extends "base.html" %}

{% block title %}Lohnabrechnung — {{ year }}-{{ '%02d'|format(month) }}{% endblock %}
{% block heading %}Lohnabrechnung — {{ ['','Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'][month] }} {{ year }}{% endblock %}
{% block topbar_actions %}
  {% set prev_y = year if month > 1 else year - 1 %}
  {% set prev_m = month - 1 if month > 1 else 12 %}
  {% set next_y = year if month < 12 else year + 1 %}
  {% set next_m = month + 1 if month < 12 else 1 %}
  <a class="btn btn-sm btn-secondary" href="/personal/payroll?year={{ prev_y }}&month={{ prev_m }}" title="Vormonat">← {{ prev_m }}/{{ prev_y }}</a>
  <a class="btn btn-sm btn-secondary" href="/personal/payroll?year={{ next_y }}&month={{ next_m }}" title="Folgemonat">{{ next_m }}/{{ next_y }} →</a>
  <a class="btn btn-sm btn-primary" href="/personal/payroll/export.csv?year={{ year }}&month={{ month }}" title="CSV für Steuerberater">CSV-Export</a>
{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header"><div>
    <h2>Mitarbeiter-Stunden</h2>
    <p class="sub">
      {{ summary.from_date }} bis {{ summary.to_date }} · {{ summary.workdays }} Werktage ·
      Soll-Std basieren auf <code>weekly_hours</code> in der Personalakte (5-Tage-Woche)
    </p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Personal-Nr</th>
        <th>Mitarbeiter</th>
        <th>Anstellung</th>
        <th class="num">WS-Std</th>
        <th class="num">Soll</th>
        <th class="num">Ist (Arbeit)</th>
        <th class="num">Pause</th>
        <th class="num">Netto</th>
        <th class="num">Diff</th>
        <th class="num">Tage</th>
        <th>Plausi</th>
      </tr>
    </thead>
    <tbody>
      {% for u in summary.users %}
      <tr>
        <td class="nums text-xs">{{ u.ident or u.username }}</td>
        <td class="font-medium">
          {{ u.name }}
          {% if u.position %}<div class="text-xs" style="color: var(--card-text-muted);">{{ u.position }}</div>{% endif %}
        </td>
        <td class="text-xs">{{ u.employment_type or '—' }}</td>
        <td class="num text-xs nums">{{ u.weekly_hours or '—' }}</td>
        <td class="num nums" style="color: var(--card-text-muted);">
          {% if u.soll_h is not none %}{{ '%.1f'|format(u.soll_h) }}{% else %}—{% endif %}
        </td>
        <td class="num nums">{{ '%.2f'|format(u.work_h) }}</td>
        <td class="num text-xs nums" style="color: var(--card-text-muted);">{{ '%.2f'|format(u.break_h) }}</td>
        <td class="num nums font-bold" style="color: var(--brand-orange);">{{ '%.2f'|format(u.net_h) }}</td>
        <td class="num nums">
          {% if u.diff_h is none %}<span style="color:var(--card-text-muted);">—</span>
          {% elif u.diff_h > 5 %}<span style="color:#6ee7b7;font-weight:700;">+{{ '%.1f'|format(u.diff_h) }}</span>
          {% elif u.diff_h < -5 %}<span style="color:#fca5a5;font-weight:700;">{{ '%.1f'|format(u.diff_h) }}</span>
          {% else %}{{ '%.1f'|format(u.diff_h) }}{% endif %}
        </td>
        <td class="num text-xs nums">{{ u.days_worked }}</td>
        <td class="text-xs">
          {% if u.flags %}
          <details>
            <summary style="cursor:pointer;color:#fbbf24;">⚠ {{ u.flags|length }}</summary>
            <ul style="margin-top:4px;list-style:disc;padding-left:16px;color:var(--card-text-muted);">
              {% for f in u.flags %}<li>{{ f }}</li>{% endfor %}
            </ul>
          </details>
          {% else %}<span style="color:#6ee7b7;">✓</span>{% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="11" class="p-12 text-center" style="color: var(--card-text-muted);">Keine aktiven Mitarbeiter.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card mt-4">
  <div class="card-header"><div><h2>Lese-Hilfe</h2></div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs" style="color: var(--card-text);">
    <div><p class="font-semibold mb-1" style="color: var(--brand-blue-light);">Soll-Stunden</p>
      <p style="color: var(--card-text-muted);">Wochenstunden ÷ 5 × Werktage im Monat. Setzt Mo–Fr-Arbeitswoche voraus.</p></div>
    <div><p class="font-semibold mb-1" style="color: var(--brand-blue-light);">Netto-Stunden</p>
      <p style="color: var(--card-text-muted);">Ist-Arbeit minus erfasste Pausen. Das ist die abrechnungsrelevante Größe.</p></div>
    <div><p class="font-semibold mb-1" style="color: var(--brand-blue-light);">Plausi-Flags</p>
      <p style="color: var(--card-text-muted);">Tag mit &gt; 12 h Arbeit oder &lt; 30 min Pause bei &gt; 6 h Arbeit (ArbZG).</p></div>
  </div>
</div>
{% endblock %}