<% layout('layouts/main') %>
<% const clientBase = typeof clientBaseUrl !== 'undefined' ? clientBaseUrl : '/client'; %>
<div class="app-shell">
  <%- partial('partials/client-nav') %>
  <section class="content">
    <div class="page-head"><h1>Mes factures</h1></div>
    <p class="panel">Moyens de paiement: virement bancaire, QR-facture si fournie, paiement en ligne sécurisé, TWINT manuel ou cash selon accord.</p>
    <div class="mobile-list">
      <% invoices.forEach(i=>{ %>
        <article class="list-card">
          <div class="list-card-head"><div><strong><%= i.invoice_number %></strong><span>Échéance: <%= ui.date(i.due_date) %></span></div><span class="badge"><%= ui.label(i.status) %></span></div>
          <div class="detail-grid compact">
            <div class="detail-item"><span>Montant</span><strong><%= ui.money(i.total) %></strong></div>
            <div class="detail-item"><span>Déjà payé</span><strong><%= ui.money(i.paid_amount) %></strong></div>
          </div>
          <div class="actions inline-actions">
            <a class="button secondary" href="/invoices/<%= i.id %>/pdf">Télécharger le PDF</a>
            <% if (paymentLinksEnabled && ['envoyee','partiellement_payee','en_retard'].includes(i.status)) { %>
              <form method="post" action="<%= clientBase %>/factures/<%= i.id %>/payer" data-confirm="Confirmer le paiement de cette facture ?">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button>Payer en ligne</button>
              </form>
            <% } %>
          </div>
        </article>
      <% }) %>
      <% if (!invoices.length) { %><p class="panel">Aucune facture disponible.</p><% } %>
    </div>
  </section>
</div>
