{% load static %} 

{% block content %}
<div class="container">


<table class="table table-striped">
    <p>DEBUG: Unpaid Invoices Count: {{ invoices|length }}</p>

    <thead>
      <tr>
        <th>Invoice #</th>
        <th>Client</th>
        <th>Event</th>
        <th>Amount</th>
        <th>Due Date</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {% for invoice in invoices %}
        <tr>
          <td>{{ invoice.invoice_numb }}</td>
          <td>{{ invoice.client }}</td>
          <td>{{ invoice.event }}</td>
          <td>$ {{ invoice.amount }}</td>
          <td>{{ invoice.due }}</td>
          <td><a href="{% url 'invoice_detail' invoice.id %}" class="btn btn-info btn-sm">View</a></td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="6" class="text-center text-muted">No unpaid invoices found.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
