{% extends "base.html" %}
{% block title %}{% if user.role == 'staff' %}Employee{% else %}Employees{% endif %}{% endblock %}
{% block page_title %}{% if user.role == 'staff' %}Employee{% else %}Employees{% endif %}{% endblock %}
{% block topbar_actions %}
  {% if user.role == 'admin' %}
    <button class="btn btn-primary btn-sm"
            hx-get="/employees/new-dialog"
            hx-target="#employee-modal-host"
            hx-swap="innerHTML">+ New Employee</button>
  {% endif %}
{% endblock %}

{% block content %}
{% if user.role == 'staff' %}
  {% if employees %}
    {% set emp = employees[0] %}
    {% set stats = emp_stats[emp.id] %}
    {% set hours = stats[0] %}{% set earnings = stats[1] %}{% set owed = stats[2] %}
    <div style="display:flex;flex-direction:column;gap:1rem;max-width:480px;margin:0 auto">
      <div class="stat-grid" style="grid-template-columns:1fr 1fr">
        <div class="stat-card" style="grid-column:1/-1">
          <div class="stat-label">Name</div>
          <div class="stat-value" style="font-size:1.4rem">{{ emp.name }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Rate</div>
          <div class="stat-value">{% if emp.hourly_rate %}£{{ "%.2f"|format(emp.hourly_rate) }}/hr{% else %}—{% endif %}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Started</div>
          <div class="stat-value" style="font-size:1rem">{{ emp.date_started | fmt_date }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Total Hours</div>
          <div class="stat-value">{{ "%.1f"|format(hours) }}h</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Earnings</div>
          <div class="stat-value">£{{ "%.2f"|format(earnings) }}</div>
        </div>
        <div class="stat-card" style="grid-column:1/-1">
          <div class="stat-label">Amount Owed</div>
          <div class="stat-value {% if owed > 0 %}yellow{% elif owed < 0 %}red{% else %}green{% endif %}" style="font-size:1.4rem">£{{ "%.2f"|format(owed) }}</div>
        </div>
      </div>
    </div>
  {% else %}
    <p style="color:var(--subtext0)">No employee record is linked to your account.</p>
  {% endif %}
{% else %}
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Date Started</th>
        <th>Date Ended</th>
        <th>Rate (£/hr)</th>
        <th>Total Hours</th>
        <th>Earnings</th>
        <th>Amount Owed</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for emp in employees %}
        {% set stats = emp_stats[emp.id] %}
        {% include "employees/_row.html" with context %}
      {% else %}
        <tr><td colspan="8" style="text-align:center;color:var(--subtext0);padding:2rem">No employees found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="employee-modal-host"></div>
<script>
  document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.target.id === 'employee-modal-host') {
      var dialog = e.target.querySelector('dialog');
      if (dialog) dialog.showModal();
    }
  });
</script>
{% endif %}
{% endblock %}