{% extends "base.html" %}

{% block title %}Zeitkonto / Gleitzeit{% endblock %}
{% block heading %}⏱️ Zeitkonto · Gleitzeit-Salden{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Personal / Zeitkonto</p>{% endblock %}

{% block content %}
<style>
  table.ta { width:100%; border-collapse:collapse; }
  table.ta th, table.ta td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--card-border-2); }
  table.ta th { font-size:11px; text-transform:uppercase; color:var(--card-text-muted); font-weight:600; letter-spacing:0.05em; }
  .bal-pos { color:#059669; font-weight:600; }
  .bal-neg { color:#dc2626; font-weight:600; }
</style>

<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Übersicht aller aktiven Mitarbeiter mit ihrem aktuellen Gleitzeit-Saldo.
  Plus = Überstunden · Minus = Untererfüllung. Klick auf einen Mitarbeiter
  zeigt die tägliche Historie + Auszahlungs-Berechnung beim Austritt.
</p>

<div class="card">
  <div class="card-header"><div><h2>{{ users|length }} Mitarbeiter</h2></div></div>
  <table class="ta">
    <thead>
      <tr>
        <th>Mitarbeiter</th>
        <th>Wochen-Soll</th>
        <th class="num">Saldo (Stunden)</th>
        <th class="num">Saldo (Tage)</th>
        <th>Visualisierung</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        {% set bal_min = u.time_account_balance_minutes or 0 %}
        {% set bal_h = (bal_min / 60.0) %}
        {% set wh = (u.weekly_hours or 40) %}
        {% set bal_d = (bal_h / (wh / 5.0)) if wh else 0 %}
        <tr>
          <td>
            <a href="/personal/time-account?user_id={{ u.id }}" class="text-blue-700 hover:underline">
              <strong>{{ u.first_name }} {{ u.last_name }}</strong>
            </a>
            {% if u.email %}<div class="text-[11px] text-neutral-500">{{ u.email }}</div>{% endif %}
          </td>
          <td class="nums">{{ u.weekly_hours or 40 }} h/Woche</td>
          <td class="num nums">
            <span class="{% if bal_min > 0 %}bal-pos{% elif bal_min < 0 %}bal-neg{% endif %}">
              {{ "%+.2f"|format(bal_h) }} h
            </span>
          </td>
          <td class="num nums">
            <span class="{% if bal_d > 0 %}bal-pos{% elif bal_d < 0 %}bal-neg{% endif %}">
              {{ "%+.1f"|format(bal_d) }} T
            </span>
          </td>
          <td>
            {# Visual: ±20h Spannweite, 0 in Mitte #}
            {% set max_range = 1200 %}{# ±20 h in min #}
            {% set pct = ([(bal_min / max_range), -1]|max if bal_min < 0 else [(bal_min / max_range), 1]|min) %}
            {% set width_pct = (pct * 50) %}
            <div style="position:relative;width:200px;height:14px;background:rgba(0,0,0,0.05);border-radius:3px;">
              <div style="position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--card-text-muted);"></div>
              {% if bal_min >= 0 %}
                <div style="position:absolute;left:50%;top:0;bottom:0;background:#10b981;width:{{ width_pct }}%;"></div>
              {% else %}
                <div style="position:absolute;right:50%;top:0;bottom:0;background:#ef4444;width:{{ -width_pct }}%;"></div>
              {% endif %}
            </div>
          </td>
          <td>
            <a href="/personal/time-account?user_id={{ u.id }}" class="btn btn-sm btn-secondary">Details</a>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="6" style="text-align:center;padding:30px;color:var(--card-text-muted);">
          Keine aktiven Mitarbeiter erfasst.
        </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<p style="margin-top:14px;font-size:11px;color:var(--card-text-muted);">
  <strong>Berechnung:</strong> Saldo = Σ (Ist-Minuten − Soll-Minuten) über alle Tage.
  Tägliche Einträge können automatisch aus Schichten/Time-Entries gefeedet werden
  (Helper <code>upsert_time_account_entry()</code>). Manuelle Korrekturen über die Detail-Seite.
</p>
{% endblock %}