<section>
  <div class="admin-header">
    <h1>Invoices</h1>
    <a class="button button-primary" href="/admin/finance/invoices/new">+ New Invoice</a>
  </div>

  <% if (!invoices.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="2" y="7" width="20" height="14" rx="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
      <p>No invoices yet.</p>
      <a href="/admin/finance/quotes">Convert an accepted quote &rarr;</a>
    </div>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><th>Invoice #</th><th>Client</th><th>Total</th><th>Balance due</th><th>Status</th><th>Due</th><th></th></tr>
      </thead>
      <tbody>
        <% invoices.forEach(function(inv) { %>
          <% var balance = Number(inv.totalAmount) - Number(inv.amountPaid); %>
          <tr>
            <td><a href="/admin/finance/invoices/<%= inv.id %>"><%= inv.invoiceNumber %></a></td>
            <td><%= inv.clientName %><% if (inv.clientOrganization) { %> <span class="hint">(<%= inv.clientOrganization %>)</span><% } %></td>
            <td><%= inv.currency %> <%= Number(inv.totalAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
            <td><%= inv.currency %> <%= balance.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
            <td><span class="tag tag-<%= inv.status %>"><%= inv.status.replace('_', ' ') %></span></td>
            <td><%= inv.dueDate ? new Date(inv.dueDate).toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'}) : '-' %></td>
            <td>
              <a href="/admin/finance/invoices/<%= inv.id %>">View</a>
              <a href="#" data-pdf-preview="/admin/finance/invoices/<%= inv.id %>/pdf" data-pdf-title="<%= inv.invoiceNumber %>">Preview</a>
              <a href="/admin/finance/invoices/<%= inv.id %>/edit">Edit</a>
              <form action="/admin/finance/invoices/<%= inv.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this invoice?')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
