<section>
  <div class="admin-header">
    <h1>Leave</h1>
    <a class="button button-primary" href="/admin/hr/leave/new">+ Request Leave</a>
  </div>
  <p class="hint"><%= canApprove ? 'Showing every staff member\'s requests.' : 'Showing your own requests.' %></p>

  <% if (!requests.length) { %>
    <div class="dash-empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
      <p>No leave requests yet.</p>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><% if (canApprove) { %><th>Staff</th><% } %><th>Type</th><th>Dates</th><th>Reason</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        <% requests.forEach(function(r) { %>
          <tr>
            <% if (canApprove) { %><td><%= r.User ? r.User.name : '-' %></td><% } %>
            <td><%= r.leaveType %></td>
            <td><%= r.startDate %> to <%= r.endDate %></td>
            <td><%= r.reason || '-' %></td>
            <td><span class="tag tag-<%= r.status === 'approved' ? 'accepted' : r.status === 'rejected' ? 'declined' : 'sent' %>"><%= r.status %></span></td>
            <td>
              <% if (canApprove && r.status === 'pending') { %>
                <form action="/admin/hr/leave/<%= r.id %>/decide" method="POST" style="display:inline">
                  <input type="hidden" name="decision" value="approved">
                  <button type="submit">Approve</button>
                </form>
                <form action="/admin/hr/leave/<%= r.id %>/decide" method="POST" style="display:inline">
                  <input type="hidden" name="decision" value="rejected">
                  <button type="submit">Reject</button>
                </form>
              <% } %>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
