{% extends "base.html" %}
{% block content %}
<div class="page-head">
  <h1 class="page-title">HR — Mitarbeiter</h1>
  <div class="page-actions"><button class="btn" id="open-new-ticket">Neuer Mitarbeiter</button></div>
</div>
<div class="kpi-row">
  {% for k in kpis %}<div class="kpi"><div class="lbl">{{ k.0 }}</div><div class="val">{{ k.1 }}</div></div>{% endfor %}
</div>
<div class="tabs">
  {% for t in tabs %}<a href="{{ t.0 }}" class="{% if t.2 %}active{% endif %}">{{ t.1 }}</a>{% endfor %}
</div>

<div id="new-ticket-modal" class="modal" hidden>
  <div class="modal-box">
    <div class="modal-head"><h3>Neuer Mitarbeiter</h3><button class="linklike" id="close-new-ticket">✕</button></div>
    <form method="post" action="/hr/neu">
      <input type="hidden" name="_csrf" value="{{ ctx.csrf }}">
      <div class="grid-2">
        <div class="formrow"><label>Vorname</label><input name="vorname" required></div>
        <div class="formrow"><label>Nachname</label><input name="nachname" required></div>
      </div>
      <div class="grid-2">
        <div class="formrow"><label>Personalnr.</label><input name="personalnr"></div>
        <div class="formrow"><label>E-Mail</label><input name="email" type="email"></div>
      </div>
      <div class="grid-2">
        <div class="formrow"><label>Abteilung</label><input name="abteilung"></div>
        <div class="formrow"><label>Position</label><input name="position"></div>
      </div>
      <div class="grid-2">
        <div class="formrow"><label>Eintritt</label><input name="eintritt" type="date"></div>
        <div class="formrow"><label>Status</label>
          <select name="status"><option>Onboarding</option><option>Aktiv</option></select>
        </div>
      </div>
      <div class="formrow"><label>Notizen</label><textarea name="notizen"></textarea></div>
      <button class="btn" type="submit">Anlegen</button>
    </form>
  </div>
</div>

<table class="tickets">
  <thead><tr><th>Name</th><th>Personalnr.</th><th>Abteilung</th><th>Position</th><th>Status</th></tr></thead>
  <tbody>
  {% for r in rows %}
    <tr class="row" data-href="/hr/{{ r.id }}">
      <td><span class="avatar sm">{{ r.initials }}</span> <b>{{ r.name }}</b></td>
      <td class="sz">{{ r.personalnr }}</td>
      <td>{{ r.abteilung }}</td>
      <td class="sz">{{ r.position }}</td>
      <td><span class="pill {{ r.status_class }}">{{ r.status }}</span></td>
    </tr>
  {% endfor %}
  {% if rows.is_empty() %}<tr><td colspan="5" class="sz">Keine Mitarbeiter.</td></tr>{% endif %}
  </tbody>
</table>

<h2 class="section-title">Abwesenheitsanträge</h2>
<table class="tickets">
  <thead><tr><th>Mitarbeiter</th><th>Typ</th><th>Zeitraum</th><th>Status</th><th>Kommentar</th><th>Aktion</th></tr></thead>
  <tbody>
  {% for a in absences %}
    <tr>
      <td><b>{{ a.employee }}</b></td>
      <td>{{ a.typ }}</td>
      <td class="sz">{{ a.zeitraum }}</td>
      <td><span class="pill {{ a.status_class }}">{{ a.status }}</span></td>
      <td class="sz">{{ a.kommentar }}</td>
      <td>
        {% if a.pending %}
        <form method="post" action="/hr/abwesenheiten/{{ a.id }}/status" class="inline-form">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf }}">
          <input type="hidden" name="zurueck" value="/hr">
          <input type="hidden" name="status" value="Genehmigt">
          <button class="btn mini" type="submit">Genehmigen</button>
        </form>
        <form method="post" action="/hr/abwesenheiten/{{ a.id }}/status" class="inline-form">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf }}">
          <input type="hidden" name="zurueck" value="/hr">
          <input type="hidden" name="status" value="Abgelehnt">
          <button class="btn ghost mini" type="submit">Ablehnen</button>
        </form>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
  {% if absences.is_empty() %}<tr><td colspan="6" class="sz">Keine Anträge.</td></tr>{% endif %}
  </tbody>
</table>
{% endblock %}