<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-3">
    <a href="/client/billing" class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Total Bills</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ billing_total_count or 0 }}</div></a>
    <a href="/client/billing?include_paid=no" class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">Open Bills</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ billing_open_count or 0 }}</div></a>
    <a href="/client/billing" class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">Outstanding</div><div class="mt-2 text-2xl font-semibold text-amber-700">₹ {{ '%.2f'|format(billing_outstanding_amount or 0) }}</div></a>
  </section>
  <div class="af-card">
    <div class="flex items-center justify-between gap-3"><div><h3 class="text-lg font-semibold text-slate-900">Invoices & Payments</h3><p class="mt-1 text-sm text-slate-500">View bills, receipts and payment options.</p></div><a href="/client/billing" class="af-btn af-btn-primary">Open Billing</a></div>
    <div class="mt-5 overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500"><tr><th class="px-4 py-3">Invoice</th><th class="px-4 py-3">Date</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Balance</th><th class="px-4 py-3">Action</th></tr></thead>
        <tbody class="divide-y divide-slate-100 bg-white">
          {% for invoice in billing_invoices[:8] if billing_invoices is defined %}
          <tr>
            <td class="px-4 py-3 font-semibold text-slate-900">{{ invoice.invoice_no }}</td>
            <td class="px-4 py-3 text-slate-600">{{ invoice.invoice_date.strftime('%d-%m-%Y') if invoice.invoice_date else '-' }}</td>
            <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ invoice.status }}</span></td>
            <td class="px-4 py-3 text-slate-600">₹ {{ '%.2f'|format(invoice.balance_amount or 0) }}</td>
            <td class="px-4 py-3"><a href="/client/billing/{{ invoice.id }}" class="font-semibold text-brand-700 hover:underline">View</a>{% if invoice.balance_amount and invoice.balance_amount > 0 %}<span class="mx-1 text-slate-300">|</span><a href="/client/billing/{{ invoice.id }}/pay-now" class="font-semibold text-amber-700 hover:underline">Pay</a>{% endif %}</td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No invoices found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
