{% extends 'base.html' %}

{% block title %}Customers | Cilvera{% endblock title %}

{% block content %}
<div class="card shadow-sm border-0">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3 gap-3 flex-wrap">
      <h1 class="h5 mb-0">Customers <span class="badge text-bg-secondary">{{ page_obj.paginator.count }}</span></h1>
      <form class="d-flex gap-2" method="get">
        <input class="form-control" name="q" type="search" placeholder="Search" value="{{ q }}">
        <button class="btn btn-primary" type="submit">Filter</button>
      </form>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle">
        <thead>
          <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Email</th>
            <th>Owner</th>
          </tr>
        </thead>
        <tbody>
          {% for customer in customers %}
            <tr>
              <td>{{ customer.full_name }}</td>
              <td>{{ customer.company_name|default:'-' }}</td>
              <td>{{ customer.email|default:'-' }}</td>
              <td>{{ customer.owner|default:'-' }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="4" class="text-center text-secondary">No customers found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% include 'shared/pagination.html' %}
  </div>
</div>
{% endblock content %}