{% extends "base.html" %}
{% block title %}Payouts{% endblock %}
{% block page_title %}Payouts{% endblock %}
{% block topbar_actions %}
  {% if user.role == 'admin' %}
    <button class="btn btn-primary btn-sm"
            hx-get="/payouts/new-dialog"
            hx-target="#payout-modal-host"
            hx-swap="innerHTML">+ Record Payout</button>
  {% endif %}
{% endblock %}

{% block content %}
<div class="table-wrap">
  <table class="table-striped">
    <thead>
      <tr>
        <th>Date</th>
        <th>Employee</th>
        <th>Amount</th>
        {% if user.role == 'admin' %}<th>Actions</th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% for payout in payouts %}
      <tr id="payout-{{ payout.id }}">
        <td>{{ payout.date | fmt_date }}</td>
        <td>{{ payout.employee.name if payout.employee else '—' }}</td>
        <td style="font-weight:600;color:var(--green)">£{{ "%.2f"|format(payout.amount) }}</td>
        {% if user.role == 'admin' %}
        <td>
          <button class="btn btn-danger btn-sm"
                  hx-delete="/payouts/{{ payout.id }}"
                  hx-target="#payout-{{ payout.id }}"
                  hx-swap="outerHTML"
                  hx-confirm="Delete this payout?">Del</button>
        </td>
        {% endif %}
      </tr>
      {% else %}
        <tr><td colspan="4" style="text-align:center;color:var(--subtext0);padding:2rem">No payouts recorded.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

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