{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">Marketplace Leads</h1>
      <p class="mt-1 text-sm text-slate-500">Public/service leads that can be assigned to Audit Firms and converted into clients.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/marketplace/leads" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">View Leads</a>
      {% if can_create %}<a href="/marketplace/leads/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft">New Lead</a>{% endif %}
      <a href="/marketplace/public-lead" class="rounded-xl border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-sm">Public Lead Form</a>
    </div>
  </div>
  <div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-sm text-slate-500">Visible Leads</div><div class="mt-2 text-3xl font-semibold">{{ total }}</div></div>
    <a href="/marketplace/leads?status=NEW" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-sm text-slate-500">New</div><div class="mt-2 text-3xl font-semibold">{{ leads|selectattr('status','equalto','NEW')|list|length }}</div></a>
    <a href="/marketplace/leads?status=ASSIGNED" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-sm text-slate-500">Assigned</div><div class="mt-2 text-3xl font-semibold">{{ leads|selectattr('status','equalto','ASSIGNED')|list|length }}</div></a>
    <a href="/marketplace/leads?status=CONVERTED" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-sm text-slate-500">Converted</div><div class="mt-2 text-3xl font-semibold">{{ leads|selectattr('status','equalto','CONVERTED')|list|length }}</div></a>
  </div>
  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <h2 class="font-semibold">Recent Leads</h2>
    <div class="mt-4 overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead><tr class="border-b text-left text-slate-500"><th class="py-2">Lead</th><th>Service</th><th>Status</th><th>Contact</th><th></th></tr></thead>
        <tbody>
          {% for row in leads %}
          <tr class="border-b last:border-0"><td class="py-2 font-medium">{{ row.lead_no }}<div class="text-xs text-slate-500">{{ row.lead_name }}</div></td><td>{{ row.service_requested }}</td><td>{{ row.status }}</td><td>{{ row.mobile or row.email or '-' }}</td><td><a href="/marketplace/leads/{{ row.id }}" class="text-brand-700">Open</a></td></tr>
          {% else %}<tr><td colspan="5" class="py-6 text-center text-slate-500">No leads found.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}