<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Clientes — CobraGestão</title>
  <%- include('../partials/head') %>
</head>
<body>
  <div class="app-shell">
    <%- include('../partials/sidebar', { active: 'clientes' }) %>

    <main class="main">
      <div class="page-header">
        <h1>Clientes</h1>
        <a href="<%= basePath %>/clientes/novo" class="btn btn-primary">+ Novo cliente</a>
      </div>

      <form method="GET" action="<%= basePath %>/clientes" class="filtro-data">
        <div class="field" style="flex:1;">
          <label for="busca">Buscar por nome ou CPF</label>
          <input type="text" id="busca" name="busca" value="<%= busca %>" placeholder="Digite para buscar...">
        </div>
        <button type="submit" class="btn btn-outline">Buscar</button>
      </form>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Nome</th>
              <th>CPF</th>
              <th>WhatsApp</th>
              <th>Captador</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <% if (clientes.length === 0) { %>
              <tr><td colspan="6" class="empty-state">Nenhum cliente encontrado.</td></tr>
            <% } %>
            <% clientes.forEach(c => { %>
              <tr>
                <td><a href="<%= basePath %>/clientes/<%= c.id %>"><strong><%= c.nome %></strong></a></td>
                <td class="mono"><%= c.cpf || '-' %></td>
                <td><%= c.whatsapp || '-' %></td>
                <td class="text-muted"><%= c.captador_nome || '—' %></td>
                <td><span class="badge badge-<%= c.status %>"><%= c.status %></span></td>
                <td class="text-right">
                  <a class="btn btn-sm btn-outline" href="<%= basePath %>/clientes/<%= c.id %>">Ver</a>
                  <a class="btn btn-sm btn-outline" href="<%= basePath %>/clientes/<%= c.id %>/editar">Editar</a>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</body>
</html>
