{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>Clients</h3>
  <a href="{{ url_for('clients_new') }}" class="btn btn-primary">New Client</a>
</div>

<form class="row row-cols-lg-auto g-3 align-items-center mb-3">
  <div class="col-12">
    <input type="text" class="form-control" name="q" placeholder="Search name/email/phone" value="{{ q }}">
  </div>
  <div class="col-12">
    <button class="btn btn-outline-secondary">Search</button>
  </div>
</form>

<div class="table-responsive">
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Balance</th><th>Created</th><th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for r in rows %}
    <tr>
      <td>{{ r.id }}</td>
      <td>{{ r.name }}</td>
      <td>{{ r.email or '-' }}</td>
      <td>{{ r.phone or '-' }}</td>
      <td>${{ '%.2f'|format(r.balance or 0) }}</td>
      <td>{{ r.created_at }}</td>
      <td>
        <a href="{{ url_for('clients_edit', user_id=r.id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
        <form action="{{ url_for('clients_add_payment', user_id=r.id) }}" method="post" class="d-inline">
          <div class="input-group input-group-sm" style="width: 180px;">
            <span class="input-group-text">$</span>
            <input type="number" name="amount" step="0.01" class="form-control" placeholder="Add payment">
            <button class="btn btn-success">Add</button>
          </div>
          <input type="hidden" name="method" value="manual">
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}