<section>
  <div class="admin-header">
    <h1>CRM Pipeline</h1>
    <a class="button button-primary" href="/admin/crm/new">+ New Prospect</a>
  </div>
  <p class="hint"><%= total %> prospect<%= total === 1 ? '' : 's' %> in the pipeline. Move a card between stages using its dropdown, or open one to edit full details.</p>

  <% if (!total) { %>
    <div class="dash-empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
      <p>No prospects yet.</p>
      <a href="/admin/crm/new">Add your first prospect &rarr;</a>
    </div>
  <% } else { %>
    <div class="crm-board">
      <% columns.forEach(function(column) { %>
        <div class="crm-column">
          <div class="crm-column-header">
            <span><%= column.label %></span>
            <span class="crm-column-count"><%= column.prospects.length %></span>
          </div>
          <% if (['new','contacted','qualified','proposal'].indexOf(column.key) !== -1) { %>
            <a class="button-ghost crm-column-send" href="/admin/crm/stage/<%= column.key %>/send" style="display:block; text-align:center; font-size:0.8rem; margin-bottom:0.5rem;">Send emails</a>
          <% } %>
          <div class="crm-column-body">
            <% column.prospects.forEach(function(p) { %>
              <div class="crm-card<%= p.needsReview ? ' crm-card-needs-review' : '' %>">
                <% if (p.needsReview) { %><span class="crm-card-flag">New reply - needs review</span><% } %>
                <a class="crm-card-title" href="/admin/crm/<%= p.id %>/edit"><%= p.companyName %></a>
                <% if (p.contactName || p.email) { %>
                  <p class="crm-card-contact"><%= [p.contactName, p.email].filter(Boolean).join(' · ') %></p>
                <% } %>
                <% if (p.sector || p.region) { %>
                  <p class="crm-card-meta"><%= [p.sector, p.region].filter(Boolean).join(' · ') %></p>
                <% } %>
                <form class="crm-card-stage" action="/admin/crm/<%= p.id %>/stage" method="POST">
                  <input type="hidden" name="_method" value="PATCH">
                  <select name="stage" onchange="this.form.submit()">
                    <% stages.forEach(function(s) { %>
                      <option value="<%= s.key %>" <%= s.key === p.stage ? 'selected' : '' %>><%= s.label %></option>
                    <% }) %>
                  </select>
                </form>
              </div>
            <% }) %>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</section>
