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

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

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

  <table class="table table-striped">
    <thead>
      <tr>
        <th><%= t.creditOverview.invoice %></th>
        <th><%= t.creditOverview.date %></th>
        <th><%= t.creditOverview.pdf %></th>
        <th><%= t.creditOverview.creditnote %></th>
        <th><%= t.creditOverview.date %></th>
        <th><%= t.creditOverview.pdf %></th>
        <th><%= t.creditOverview.patient %></th>
        <th><%= t.creditOverview.amount %></th>
      </tr>
    </thead>
    <tbody>
      <% items.forEach(i => { %>
        <tr>
          <td>#<%= i.invoice_id %></td>
          <td><%= i.invoice_date_fmt %></td>
          <td>
            <% if (i.invoice_file) { %>
              <a href="<%= i.invoice_file %>" target="_blank"
                class="btn btn-sm btn-outline-primary">
                📄 <%= t.creditOverview.open %>
              </a>
            <% } %>
          </td>
          <td>#<%= i.credit_id %></td>
          <td><%= i.credit_date_fmt %></td>
          <td>
            <% if (i.credit_file) { %>
              <a href="<%= i.credit_file %>" target="_blank"
                class="btn btn-sm btn-outline-danger">
                📄 <%= t.creditOverview.open %>
              </a>
            <% } %>
          </td>
          <td><%= i.firstname %> <%= i.lastname %></td>
          <td><%= i.invoice_amount_fmt %> € / <%= i.credit_amount_fmt %> €</td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</div>

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