{% extends "base.html" %}
{% from "_macros.html" import avatar %}

{% block title %}Urlaubsplaner{% endblock %}
{% block heading %}Urlaubsplaner {{ "" if not status_filter else "· " + status_filter }}{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/vacation">Alle</a>
    <a class="tab {% if status_filter=='requested' %}is-active{% endif %}" href="/vacation?status=requested">Offen</a>
    <a class="tab {% if status_filter=='approved' %}is-active{% endif %}" href="/vacation?status=approved">Genehmigt</a>
    <a class="tab {% if status_filter=='rejected' %}is-active{% endif %}" href="/vacation?status=rejected">Abgelehnt</a>
  </div>
  <a class="btn btn-primary" href="/vacation/new">+ Antrag stellen</a>
{% endblock %}

{% block content %}

{# ---------- KONTOSTAND PRO MITARBEITER ---------- #}
<section class="card">
  <div class="card-header"><div>
    <h2>Urlaubskonten {{ "%d"|format(2026) }}</h2>
    <p class="sub">Anspruch · Genommen · Beantragt · Rest</p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Mitarbeiter</th>
        <th>Position</th>
        <th class="num">Anspruch</th>
        <th class="num">Genommen</th>
        <th class="num">Beantragt</th>
        <th class="num">Verfügbar</th>
        <th>Stand</th>
      </tr>
    </thead>
    <tbody>
      {% for b in balances %}
      {% set remaining = b.entitled - b.used %}
      {% set available = b.entitled - b.used - b.requested %}
      {% set pct = (b.used * 100 / b.entitled) if b.entitled else 0 %}
      <tr class="cursor-pointer" onclick="location='/team/users/{{ b.id }}'">
        <td><div class="flex items-center gap-2">{{ avatar(b.first_name, b.last_name) }}<span>{{ b.first_name }} {{ b.last_name }}</span></div></td>
        <td class="text-xs text-neutral-600">{{ b.position or '—' }}</td>
        <td class="num nums">{{ b.entitled }} T</td>
        <td class="num nums">{{ b.used }} T</td>
        <td class="num nums">{% if b.requested %}<span class="badge badge-amber">{{ b.requested }} T</span>{% else %}—{% endif %}</td>
        <td class="num nums font-semibold {% if available <= 0 %}text-red-600{% elif available <= 5 %}text-amber-600{% else %}text-emerald-600{% endif %}">{{ available }} T</td>
        <td style="width:25%;">
          <div class="relative h-2 bg-neutral-100 rounded-full overflow-hidden">
            <div class="absolute inset-y-0 left-0"
                 style="width:{{ [pct|int, 100]|min }}%; background:{% if pct >= 100 %}#ef4444{% elif pct >= 80 %}#f59e0b{% else %}#10b981{% endif %};"></div>
          </div>
          <p class="text-[10px] text-neutral-500 nums mt-1">{{ pct|round(0, 'common')|int }} % verbraucht</p>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

{# ---------- ANTRÄGE ---------- #}
<section class="card">
  <div class="card-header"><div>
    <h2>{{ requests|length }} Anträge</h2>
    <p class="sub">Offene zuerst, dann genehmigte</p>
  </div></div>
  {% if requests %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Mitarbeiter</th>
        <th>Status</th>
        <th class="num">Von</th>
        <th class="num">Bis</th>
        <th class="num">Tage</th>
        <th>Notiz</th>
        <th>Entschieden</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for r in requests %}
      <tr>
        <td><div class="flex items-center gap-2">{{ avatar(r.first_name, r.last_name) }}<span>{{ r.first_name }} {{ r.last_name }}</span></div></td>
        <td>
          {% if r.status == 'requested' %}<span class="badge badge-amber">Offen</span>
          {% elif r.status == 'approved' %}<span class="badge badge-emerald">Genehmigt</span>
          {% elif r.status == 'rejected' %}<span class="badge badge-red">Abgelehnt</span>
          {% else %}<span class="badge badge-neutral">Storniert</span>{% endif %}
        </td>
        <td class="num nums text-xs">{{ r.start_date }}</td>
        <td class="num nums text-xs">{{ r.end_date }}</td>
        <td class="num nums font-semibold">{{ r.days }} T</td>
        <td class="text-xs text-neutral-600 truncate" style="max-width:200px">{{ r.note or '—' }}</td>
        <td class="text-xs text-neutral-500">
          {% if r.decided_by_first %}{{ r.decided_by_first }} {{ r.decided_by_last }}<br>
            <span class="nums">{{ r.decided_at[:10] if r.decided_at else '' }}</span>
          {% else %}—{% endif %}
        </td>
        <td class="text-right">
          {% if r.status == 'requested' %}
            {% if can(current_user, 'approve_vacation') %}
            <div class="flex gap-1 justify-end">
              <form method="post" action="/vacation/{{ r.id }}/approve"><button class="btn btn-sm btn-primary">Genehmigen</button></form>
              <form method="post" action="/vacation/{{ r.id }}/reject"><button class="btn btn-sm btn-secondary" style="color:#dc2626;">Ablehnen</button></form>
            </div>
            {% else %}
            <span class="text-[11px] text-neutral-400">Genehmigung erforderlich</span>
            {% endif %}
          {% elif r.status == 'approved' %}
            {% if can(current_user, 'approve_vacation') %}
            <form method="post" action="/vacation/{{ r.id }}/cancel" onsubmit="return confirm('Genehmigten Urlaub stornieren?')">
              <button class="btn btn-sm btn-secondary">Stornieren</button>
            </form>
            {% endif %}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">Keine Anträge in dieser Auswahl.</div>
  {% endif %}
</section>

{# ---------- KALENDER-TIMELINE — wer ist wann weg? ---------- #}
<section class="card">
  <div class="card-header flex items-center justify-between gap-4">
    <div>
      <h2>Urlaubskalender · {{ cal.month_name }} {{ cal.year }}</h2>
      <p class="sub">Wer ist wann weg? Überschneidungen für die Auftragsplanung erkennen</p>
    </div>
    <div class="flex items-center gap-2">
      <a class="btn btn-sm btn-secondary" href="/vacation?year={{ cal.prev_year }}&month={{ cal.prev_month }}{% if status_filter %}&status={{ status_filter }}{% endif %}" title="Vorheriger Monat">←</a>
      <a class="btn btn-sm btn-secondary" href="/vacation?year={{ cal.today_year }}&month={{ cal.today_month }}{% if status_filter %}&status={{ status_filter }}{% endif %}">Heute</a>
      <a class="btn btn-sm btn-secondary" href="/vacation?year={{ cal.next_year }}&month={{ cal.next_month }}{% if status_filter %}&status={{ status_filter }}{% endif %}" title="Nächster Monat">→</a>
    </div>
  </div>

  {# Legende #}
  <div class="px-5 py-2 flex items-center gap-4 text-[11px] text-neutral-600 border-b" style="border-color: var(--card-border-2);">
    <div class="flex items-center gap-1.5"><span class="vac-swatch vac-bar-approved"></span> Genehmigt</div>
    <div class="flex items-center gap-1.5"><span class="vac-swatch vac-bar-requested"></span> Beantragt</div>
    <div class="flex items-center gap-1.5"><span class="vac-swatch vac-swatch-weekend"></span> Wochenende</div>
    <div class="flex items-center gap-1.5"><span class="vac-swatch vac-swatch-holiday"></span> Feiertag</div>
    <div class="flex items-center gap-1.5"><span class="vac-conflict-pill" style="position:static; transform:none;">2</span> Mitarbeiter parallel im Urlaub</div>
  </div>

  <div class="vac-cal-wrap">
    <div class="vac-cal" style="--days: {{ cal.days|length }};">
      {# --- Kopfzeile: Tagesnummern + Wochentag-Initialen --- #}
      <div class="vac-row vac-row-h">
        <div class="vac-name vac-name-h">Mitarbeiter</div>
        <div class="vac-days">
          {% for d in cal.days %}
          <div class="vac-day-h{% if d.is_weekend %} is-weekend{% endif %}{% if d.is_holiday %} is-holiday{% endif %}{% if d.is_today %} is-today{% endif %}"
               title="{{ d.iso }}{% if d.is_holiday %} · Feiertag{% endif %}{% if d.count_total %} · {{ d.count_total }} im Urlaub{% endif %}">
            <div class="vac-wd">{{ ['M','D','M','D','F','S','S'][d.weekday] }}</div>
            <div class="vac-dd nums">{{ d.day }}</div>
            {% if d.count_total >= 2 %}
            <div class="vac-conflict-pill" title="{{ d.count_total }} Mitarbeiter gleichzeitig abwesend">{{ d.count_total }}</div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>

      {# --- Mitarbeiter-Zeilen --- #}
      {% for r in cal.rows %}
      <div class="vac-row">
        <div class="vac-name">
          {{ avatar(r.first_name, r.last_name) }}
          <div class="min-w-0">
            <div class="text-sm truncate">{{ r.first_name }} {{ r.last_name }}</div>
            {% if r.position %}<div class="text-[10px] text-neutral-500 truncate">{{ r.position }}</div>{% endif %}
          </div>
        </div>
        <div class="vac-days vac-days-body">
          {# Hintergrund-Zellen: ein Element pro Tag, zur Markierung WE/Feiertag/Heute #}
          {% for d in cal.days %}
          <div class="vac-day{% if d.is_weekend %} is-weekend{% endif %}{% if d.is_holiday %} is-holiday{% endif %}{% if d.is_today %} is-today{% endif %}"></div>
          {% endfor %}
          {# Urlaubsbalken — überlappen die Tageszellen via grid-column #}
          {% for s in r.segments %}
          <div class="vac-bar vac-bar-{{ s.status }}{% if s.starts_before_month %} cont-l{% endif %}{% if s.ends_after_month %} cont-r{% endif %}"
               style="grid-column: {{ s.start_idx + 1 }} / {{ s.end_idx + 2 }};"
               title="{{ r.first_name }} {{ r.last_name }} · {{ s.start_date }} → {{ s.end_date }} ({{ s.days }} Arbeitstage){% if s.note %} · {{ s.note }}{% endif %}">
            <span class="vac-bar-label">
              {% if s.status == 'approved' %}{{ s.days }} T{% else %}beantragt · {{ s.days }} T{% endif %}
            </span>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}

      {% if not cal.any_segments %}
      <div class="p-6 text-center text-sm text-neutral-500">
        Keine Urlaube in {{ cal.month_name }} {{ cal.year }}.
      </div>
      {% endif %}
    </div>
  </div>
</section>

{% endblock %}