{% extends "layout.html" %}
{% block content %}
<div class="page-wide">
  <div class="panel" style="width:100%;">
    <div class="panel-title">Employee Management</div>

    <form method="get" action="/admin/employees" class="panel toolbar" style="gap:12px; align-items:center;">
      <label class="checkbox" style="display:flex; gap:6px; align-items:center;">
        <input type="checkbox" name="include_inactive" value="1" {% if include_inactive %}checked{% endif %}>
        Show inactive
      </label>
      <button class="btn" type="submit">Apply</button>
    </form>

    <div class="table-wrap">
      <table class="table compact" style="width:100%;">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th style="width:160px;">Termination Date</th>
            <th style="width:260px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for e in employees %}
            {% set active = (e.is_active is not none and e.is_active) %}
            <tr>
              <td>{{ e.name }}</td>
              <td>
                {% if active %}
                  <span class="badge success">Active</span>
                {% else %}
                  <span class="badge danger">Inactive</span>
                {% endif %}
              </td>
              <td class="mono">
                {% if e.termination_date %}{{ e.termination_date.isoformat() }}{% endif %}
              </td>
              <td>
                {% if active %}
                  <form method="post" action="/admin/employees/set-status" class="inline" style="gap:8px; align-items:center;"
                        onsubmit="return confirm('Mark {{ e.name }} inactive?');">
                    <input type="hidden" name="employee_id" value="{{ e.id }}">
                    <input type="hidden" name="is_active" value="0">
                    <label class="label" for="td_{{ e.id }}">Termination</label>
                    <input class="input" id="td_{{ e.id }}" name="termination_date" type="date" style="min-width:140px;">
                    <input type="hidden" name="redirect_to" value="/admin/employees?include_inactive={{ include_inactive }}">
                    <button class="btn danger" type="submit">Mark inactive</button>
                  </form>
                {% else %}
                  <form method="post" action="/admin/employees/set-status" class="inline" style="gap:8px; align-items:center;"
                        onsubmit="return confirm('Reactivate {{ e.name }}?');">
                    <input type="hidden" name="employee_id" value="{{ e.id }}">
                    <input type="hidden" name="is_active" value="1">
                    <input type="hidden" name="redirect_to" value="/admin/employees?include_inactive={{ include_inactive }}">
                    <button class="btn" type="submit">Reactivate</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="muted" style="margin-top:8px;">
      Marking an employee inactive hides them from PTO Tracker and Print All (unless “Show inactive” is checked). Reactivation restores visibility. Termination date is optional.
    </div>
  </div>
</div>
{% endblock %}