{% extends 'base.html' %}
{% block title %}Clientes — 2N Painel{% endblock %}

{% block content %}
<div class="topbar">
  <a href="{{ url_for('dashboard.index') }}" class="btn btn-ghost btn-sm">← Dashboard</a>
  <div class="topbar-title">Clientes</div>
</div>

<div class="page-content">
  <div class="grid-2" style="gap:16px; align-items:start;">
    <div class="card">
      <div class="card-header">
        <div class="card-title">Novo Cliente</div>
      </div>
      <form method="POST" action="{{ url_for('projects.new_client') }}">
        <div class="form-group">
          <label class="form-label">Nome *</label>
          <input type="text" name="name" class="form-control" required placeholder="Nome do cliente ou empresa">
        </div>
        <div class="form-group">
          <label class="form-label">E-mail</label>
          <input type="email" name="email" class="form-control" placeholder="contato@cliente.com">
        </div>
        <div class="form-group">
          <label class="form-label">Telefone / WhatsApp</label>
          <input type="text" name="phone" class="form-control" placeholder="(11) 99999-9999">
        </div>
        <div class="form-group">
          <label class="form-label">Observações</label>
          <textarea name="notes" class="form-control" placeholder="Notas sobre o cliente..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Adicionar Cliente</button>
      </form>
    </div>

    <div class="card">
      <div class="card-header">
        <div class="card-title">Clientes ({{ clients|length }})</div>
      </div>
      {% if clients %}
      <table class="table">
        <thead>
          <tr>
            <th>Nome</th>
            <th>Contato</th>
            <th>Projetos</th>
          </tr>
        </thead>
        <tbody>
          {% for c in clients %}
          <tr>
            <td style="font-weight:500;">{{ c.name }}</td>
            <td style="color:var(--text-muted); font-size:12px;">
              {% if c.email %}{{ c.email }}<br>{% endif %}
              {% if c.phone %}{{ c.phone }}{% endif %}
            </td>
            <td>
              <span class="badge badge-gray">{{ c.projects.count() }}</span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="empty-state">
        <p>Nenhum cliente cadastrado.</p>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}