<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head">
      <div><p class="eyebrow">Clients</p><h1>Fiches clients 360</h1><p class="muted">Portail, devis, factures, interventions et historique.</p></div>
      <div class="actions client-header-actions">
        <details class="client-create-menu">
          <summary><span>Créer un client</span></summary>
          <div class="client-create-popover">
            <div class="compact-heading">
              <h2>Nouveau client</h2>
              <p>Ajoutez une fiche pour préparer un devis, une intervention ou une facture.</p>
            </div>
            <form method="post" action="<%= adminBase %>/clients" class="client-create-form form-grid two">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <label>Type de client<select name="client_type" data-client-type><option value="particulier">Particulier</option><option value="entreprise">Entreprise</option></select></label>
              <label data-company-field>Entreprise<input name="company_name" placeholder="Si applicable"></label>
              <label>Prénom<input name="first_name" required></label>
              <label>Nom<input name="last_name" required></label>
              <label>Email<input type="email" name="email" placeholder="Optionnel si le client n’en a pas"></label>
              <label>Téléphone<input name="phone"></label>
              <label>Adresse<input name="address"></label>
              <div class="form-grid two">
                <label>NPA<input name="postal_code"></label>
                <label>Ville<input name="city"></label>
              </div>
              <label class="full">Note interne<textarea name="internal_note" placeholder="Ex. Client créé pour facturation."></textarea></label>
              <button>Créer le client</button>
            </form>
          </div>
        </details>
        <a class="button secondary" href="<%= adminBase %>/clients.csv">Export CSV</a>
        <button class="secondary" type="button" data-command-palette-open>Recherche</button>
      </div>
    </div>

    <form class="panel form-grid search-panel">
      <label>Recherche<input name="q" value="<%= q %>" placeholder="Nom, email, téléphone ou ville"></label>
      <button>Rechercher</button>
    </form>

    <div class="mobile-list compact-admin-list">
      <% clients.forEach(c=>{ %>
        <article class="list-card compact-record">
          <div class="list-card-head">
            <div><strong><%= c.first_name %> <%= c.last_name %></strong><span><%= ui.emailLabel(c.email) %></span></div>
            <span class="badge"><%= ui.label(c.status) %></span>
          </div>
          <p class="compact-meta"><%= c.city || 'Ville non renseignée' %> · <%= ui.label(c.client_type) %> · <%= c.consent_privacy ? 'Portail activé' : 'Client interne' %></p>
          <a class="button secondary small" href="<%= adminBase %>/clients/<%= c.id %>">Ouvrir 360</a>
        </article>
      <% }) %>
      <% if (!clients.length) { %><div class="empty-state"><strong>Aucun client</strong><span>Créez un client ou modifiez votre recherche.</span></div><% } %>
    </div>
    <%- partial('partials/pagination', { page, pageUrl, param: 'page' }) %>
  </section>
</div>
