<%- include("../partials/page-header", {
  user,
  title: t.cancelledInvoices.title,
  subtitle: "",
  showUserName: true
}) %>

<div class="container mt-4">
  <%- include("../partials/flash") %>
  <h4><%= t.cancelledInvoices.title %></h4>

  <form method="GET" action="/invoices/cancelled" style="margin-bottom:20px;">
    <label><%= t.cancelledInvoices.year %></label>
    <select name="year" class="form-select" id="cancelledYear"
      style="width:150px; display:inline-block;">
      <% years.forEach(y => { %>
        <option value="<%= y %>" <%= y == selectedYear ? "selected" : "" %>><%= y %></option>
      <% }) %>
    </select>
  </form>

  <% if (invoices.length === 0) { %>
    <p><%= t.cancelledInvoices.noinvoices %></p>
  <% } else { %>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th><%= t.cancelledInvoices.patient %></th>
          <th><%= t.cancelledInvoices.date %></th>
          <th><%= t.cancelledInvoices.amount %></th>
        </tr>
      </thead>
      <tbody>
        <% invoices.forEach(inv => { %>
          <tr>
            <td><%= inv.id %></td>
            <td><%= inv.firstname %> <%= inv.lastname %></td>
            <td><%= inv.invoice_date_formatted %></td>
            <td><%= inv.total_amount_formatted %> €</td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</div>

<script src="/js/invoice-select.js" defer></script>
