{% extends 'invoices/base.html' %}
{% block title %}Customers{% endblock %}
{% block page_title %}Customers{% endblock %}
{% block topbar_actions %}
<a href="{% url 'invoices:customer_create' %}" class="btn btn-primary">+ Add Customer</a>
{% endblock %}
{% block content %}
<div class="card">
  <table class="table">
    <thead><tr><th>Name</th><th>Phone</th><th>Email</th><th>Address</th><th>Actions</th></tr></thead>
    <tbody>
      {% for c in customers %}
      <tr>
        <td style="font-weight:600;">{{ c.name }}</td>
        <td style="color:var(--muted);">{{ c.phone|default:"-" }}</td>
        <td style="color:var(--muted);">{{ c.email|default:"-" }}</td>
        <td style="color:var(--muted);">{{ c.address|default:"-"|truncatechars:40 }}</td>
        <td><a href="{% url 'invoices:customer_edit' c.pk %}" class="btn btn-outline btn-sm">Edit</a></td>
      </tr>
      {% empty %}
      <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:40px;">No customers. <a href="{% url 'invoices:customer_create' %}" style="color:var(--accent)">Add one</a></td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}