# LeadsInbox

> Inquiries from your forms with where each came from (UTM, referrer, Google click id), a stage pipeline with counts, a detail panel with reply and canned replies, and conversion into a CRM contact.

Source: https://docs.nasaqui.com/components/leads-inbox

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/leads-inbox.json
```

What a marketing site collects, made workable: every inquiry with its source, a pipeline you can filter by stage, a
side panel to read, reply and move it along, and a convert step that turns it into a contact (and optionally a
company and a deal).

## When to use

- Triage of form submissions before they become CRM records.

## When not to use

- Two-way conversations: use [`Inbox`](https://docs.nasaqui.com/components/inbox).
- Existing customers: use [`ContactList`](https://docs.nasaqui.com/components/contact-list).

## Import

```tsx
import { LeadsInbox } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
<LeadsInbox
  leads={leads}
  canned={snippets}
  onStatusChange={async (lead, status) => setStatus(lead.id, status)}
  onConvert={async (lead, conversion) => convert(lead.id, conversion)}
  onReply={async (lead, message) => reply(lead.id, message)}
/>
```

## Anatomy

- Pipeline strip: All, New, Contacted, Qualified, Converted, Spam, each with a count, filtering the list.
- `EntityList`: lead, source, stage, score (`ScoreBadge`), received. Row actions open from a context-click.
- Detail sheet: stage stepper, actions, message, attribution list (click id and landing page are copyable), reply composer with the canned picker.
- Convert dialog: contact name, optional company, optional deal.

Source is classified as Paid (a click id is always paid search), Organic, Social, Email, Referral or Direct.

## API

| Prop | Type | Description |
| --- | --- | --- |
| `leads` | `Lead[]` | `{ id, name, email?, phone?, company?, message?, budget?, status, receivedAt, form?, attribution?, score?, contact?, companyRef?, deal? }`. |
| `canned` | `CannedSnippet[]` | Saved replies for the composer. |
| `onStatusChange` | `(lead, status) => Promise<...>` | Never called with `converted`. |
| `onConvert` | `(lead, { contactName, company?, deal? }) => Promise<...>` | Return the lead as `converted` afterwards. |
| `onReply` | `(lead, message) => Promise<...>` | Omit to hide the composer. |
| `defaultOpenId` | `string` | Start with a lead open. |
| `labels` | `Partial<LeadsInboxLabels>` | Override any string. |

Also `EntityList` props such as `loading`, `error`, `empty`, `view`. Small parts: `LeadSourceBadge`, `LeadStatusBadge`, `LeadAttributionList`.
Pure helpers: `classifyLeadSource`, `leadAttributionEntries`, `leadStatusCounts`, `canMoveLead`, `canConvertLead`, `leadPipelineStates`.

## Examples

Spam cannot be converted and a converted lead cannot be moved back, so its links to the contact and deal stay true.

## Accessibility

The pipeline is a group of toggle buttons with counts. The stepper marks the current step. Source and stage are words. The sheet traps focus.

## RTL & i18n

English and Arabic ship. Emails, phones, UTM values and URLs stay left-to-right. Stepper arrows mirror.

## Styling & tokens

Semantic tokens only.

## Do / Don't

- Do keep the raw UTM values visible, marketers check them.
- Don't convert spam.

## Related

- [`ScoreBadge`](https://docs.nasaqui.com/components/score-explainer)
- [`CannedRepliesManager`](https://docs.nasaqui.com/components/canned-replies)

## Lab

https://docs.nasaqui.com/?path=/docs/components-crm-leads-inbox--docs

## Code

### React

```tsx
<LeadsInbox
  leads={leads}
  canned={snippets}
  onStatusChange={async (lead, status) => setStatus(lead.id, status)}
  onConvert={async (lead, conversion) => convert(lead.id, conversion)}
  onReply={async (lead, message) => reply(lead.id, message)}
/>
```

### shadcn

```tsx
<LeadsInbox
  leads={leads}
  canned={snippets}
  onStatusChange={async (lead, status) => setStatus(lead.id, status)}
  onConvert={async (lead, conversion) => convert(lead.id, conversion)}
  onReply={async (lead, message) => reply(lead.id, message)}
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqLeadsInbox, type Lead, type LeadConversion, type LeadStatus } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const leads = ref<Lead[]>([
  {
    id: "l1",
    name: "Sara Haddad",
    email: "sara@acme.example",
    company: "Acme Logistics",
    message: "We are looking for a delivery dashboard for 40 couriers. Can we book a demo this week?",
    budget: "$12,000",
    status: "new",
    receivedAt: "2026-09-29T07:30:00Z",
    form: "Contact sales",
    attribution: { utmSource: "google", utmMedium: "cpc", utmCampaign: "dispatch-q3", gclid: "Cj0KCQjw-demo", landingPage: "https://example.com/dispatch" },
    score: { score: 82, dimensions: [{ id: "size", label: "Company size", points: 40, maxPoints: 50, reason: "51 to 200 employees" }] },
  },
  {
    id: "l2",
    name: "Omar Nasser",
    email: "omar@example.com",
    message: "Do you support Arabic invoices?",
    status: "contacted",
    receivedAt: "2026-09-28T12:00:00Z",
    form: "Newsletter",
    attribution: { utmSource: "newsletter", utmMedium: "email", utmCampaign: "sept-digest" },
  },
  {
    id: "l3",
    name: "Lina Farouk",
    email: "lina@example.com",
    status: "qualified",
    receivedAt: "2026-09-25T09:00:00Z",
    attribution: { referrer: "https://www.linkedin.com/feed" },
  },
]);

const canned = [{ id: "c1", shortcut: "demo", title: "Book a demo", body: "Hi {{name}}, thanks for reaching out. Pick a time for a demo that suits you." }];

async function onStatusChange(lead: Lead, status: LeadStatus) {
  leads.value = leads.value.map((l) => (l.id === lead.id ? { ...l, status } : l));
}
async function onConvert(lead: Lead, c: LeadConversion) {
  leads.value = leads.value.map((l) =>
    l.id === lead.id ? { ...l, status: "converted", contact: { id: `c-${l.id}`, name: c.contactName }, ...(c.company ? { companyRef: { id: `co-${l.id}`, name: c.company } } : {}), ...(c.deal ? { deal: { id: `d-${l.id}`, name: c.deal } } : {}) } : l,
  );
}
async function onReply() {}
</script>

<template>
  <NqLeadsInbox :leads="leads" :canned="canned" :on-status-change="onStatusChange" :on-convert="onConvert" :on-reply="onReply" />
</template>
```

### Blade

```blade
@php
    $leads = [
        [
            'id' => 'l1', 'name' => 'Sara Haddad', 'email' => 'sara@acme.example', 'company' => 'Acme Logistics', 'budget' => '$12,000', 'status' => 'new', 'receivedAt' => '2026-09-29T07:30:00Z', 'form' => 'Contact sales',
            'message' => 'We are looking for a delivery dashboard for 40 couriers. Can we book a demo this week?', 'score' => 82,
            'attribution' => ['utmSource' => 'google', 'utmMedium' => 'cpc', 'utmCampaign' => 'dispatch-q3', 'gclid' => 'Cj0KCQjw-demo', 'landingPage' => 'https://example.com/dispatch'],
        ],
        [
            'id' => 'l2', 'name' => 'Omar Nasser', 'email' => 'omar@example.com', 'status' => 'contacted', 'receivedAt' => '2026-09-28T12:00:00Z', 'form' => 'Newsletter', 'message' => 'Do you support Arabic invoices?',
            'attribution' => ['utmSource' => 'newsletter', 'utmMedium' => 'email', 'utmCampaign' => 'sept-digest'],
        ],
        ['id' => 'l3', 'name' => 'Lina Farouk', 'email' => 'lina@example.com', 'status' => 'qualified', 'receivedAt' => '2026-09-25T09:00:00Z', 'attribution' => ['referrer' => 'https://www.linkedin.com/feed']],
    ];
    $canned = [['id' => 'c1', 'shortcut' => 'demo', 'title' => 'Book a demo', 'body' => 'Hi {{name}}, thanks for reaching out. Pick a time for a demo that suits you.']];
@endphp
<x-nq::leads-inbox :leads="$leads" :canned="$canned"
    x-on:lead-status="$event.detail.wait(Promise.resolve())"
    x-on:lead-convert="$event.detail.wait(Promise.resolve())"
    x-on:lead-reply="$event.detail.wait(Promise.resolve())" />
```

### HTML + Alpine

```html
<div data-slot="leads-inbox" x-data="nqLeadsInbox(JSON.parse('{\u0022leads\u0022:[{\u0022id\u0022:\u0022l1\u0022,\u0022name\u0022:\u0022Sara Haddad\u0022,\u0022email\u0022:\u0022sara@acme.example\u0022,\u0022company\u0022:\u0022Acme Logistics\u0022,\u0022message\u0022:\u0022We are looking for a delivery dashboard for 40 couriers. Can we book a demo this week?\u0022,\u0022budget\u0022:\u0022$12,000\u0022,\u0022form\u0022:\u0022Contact sales\u0022,\u0022status\u0022:\u0022new\u0022,\u0022receivedAt\u0022:\u00222026-09-29T07:30:00Z\u0022,\u0022attribution\u0022:{\u0022utmSource\u0022:\u0022google\u0022,\u0022utmMedium\u0022:\u0022cpc\u0022,\u0022utmCampaign\u0022:\u0022dispatch-q3\u0022,\u0022gclid\u0022:\u0022Cj0KCQjw-demo\u0022,\u0022landingPage\u0022:\u0022https:\\\/\\\/example.com\\\/dispatch\u0022},\u0022score\u0022:82},{\u0022id\u0022:\u0022l2\u0022,\u0022name\u0022:\u0022Omar Nasser\u0022,\u0022email\u0022:\u0022omar@example.com\u0022,\u0022message\u0022:\u0022Do you support Arabic invoices?\u0022,\u0022form\u0022:\u0022Newsletter\u0022,\u0022status\u0022:\u0022contacted\u0022,\u0022receivedAt\u0022:\u00222026-09-28T12:00:00Z\u0022,\u0022attribution\u0022:{\u0022utmSource\u0022:\u0022newsletter\u0022,\u0022utmMedium\u0022:\u0022email\u0022,\u0022utmCampaign\u0022:\u0022sept-digest\u0022}},{\u0022id\u0022:\u0022l3\u0022,\u0022name\u0022:\u0022Lina Farouk\u0022,\u0022email\u0022:\u0022lina@example.com\u0022,\u0022status\u0022:\u0022qualified\u0022,\u0022receivedAt\u0022:\u00222026-09-25T09:00:00Z\u0022,\u0022attribution\u0022:{\u0022referrer\u0022:\u0022https:\\\/\\\/www.linkedin.com\\\/feed\u0022}}],\u0022canned\u0022:[{\u0022id\u0022:\u0022c1\u0022,\u0022shortcut\u0022:\u0022demo\u0022,\u0022title\u0022:\u0022Book a demo\u0022,\u0022body\u0022:\u0022Hi {{name}}, thanks for reaching out. Pick a time for a demo that suits you.\u0022}],\u0022can\u0022:{\u0022status\u0022:true,\u0022convert\u0022:true,\u0022reply\u0022:true},\u0022locale\u0022:\u0022en\u0022,\u0022openId\u0022:null,\u0022labels\u0022:{\u0022statuses\u0022:{\u0022new\u0022:\u0022New\u0022,\u0022contacted\u0022:\u0022Contacted\u0022,\u0022qualified\u0022:\u0022Qualified\u0022,\u0022converted\u0022:\u0022Converted\u0022,\u0022spam\u0022:\u0022Spam\u0022},\u0022sources\u0022:{\u0022paid\u0022:\u0022Paid\u0022,\u0022organic\u0022:\u0022Organic\u0022,\u0022social\u0022:\u0022Social\u0022,\u0022email\u0022:\u0022Email\u0022,\u0022referral\u0022:\u0022Referral\u0022,\u0022direct\u0022:\u0022Direct\u0022},\u0022attrKeys\u0022:{\u0022utmSource\u0022:\u0022UTM source\u0022,\u0022utmMedium\u0022:\u0022UTM medium\u0022,\u0022utmCampaign\u0022:\u0022UTM campaign\u0022,\u0022utmTerm\u0022:\u0022UTM term\u0022,\u0022utmContent\u0022:\u0022UTM content\u0022,\u0022referrer\u0022:\u0022Referrer\u0022,\u0022gclid\u0022:\u0022Google click ID\u0022,\u0022landingPage\u0022:\u0022Landing page\u0022},\u0022bands\u0022:{\u0022high\u0022:\u0022High\u0022,\u0022medium\u0022:\u0022Medium\u0022,\u0022low\u0022:\u0022Low\u0022},\u0022moveTo\u0022:\u0022Move to {stage}\u0022,\u0022markSpam\u0022:\u0022Mark as spam\u0022,\u0022notSpam\u0022:\u0022Not spam\u0022,\u0022failed\u0022:\u0022That did not work. Try again.\u0022,\u0022sent\u0022:\u0022Reply sent\u0022}}'))" x-on:nq-entity-list-action="onAction($event)" x-on:nq-entity-list-row-click="onRowClick($event)"
    x-on:lead-status="$event.detail.wait(Promise.resolve())" x-on:lead-convert="$event.detail.wait(Promise.resolve())" x-on:lead-reply="$event.detail.wait(Promise.resolve())" class="flex min-w-0 flex-col gap-3">
    <div role="group" aria-label="Pipeline" class="flex flex-wrap gap-2">
                    <template x-if="stage === 'all'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="all" x-on:click="setStage(&#039;all&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        All <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('all')"></span></button>
            </template>
            <template x-if="stage !== 'all'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="all" x-on:click="setStage(&#039;all&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        All <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('all')"></span></button>
            </template>
                    <template x-if="stage === 'new'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="new" x-on:click="setStage(&#039;new&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        New <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('new')"></span></button>
            </template>
            <template x-if="stage !== 'new'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="new" x-on:click="setStage(&#039;new&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        New <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('new')"></span></button>
            </template>
                    <template x-if="stage === 'contacted'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="contacted" x-on:click="setStage(&#039;contacted&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Contacted <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('contacted')"></span></button>
            </template>
            <template x-if="stage !== 'contacted'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="contacted" x-on:click="setStage(&#039;contacted&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Contacted <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('contacted')"></span></button>
            </template>
                    <template x-if="stage === 'qualified'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="qualified" x-on:click="setStage(&#039;qualified&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Qualified <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('qualified')"></span></button>
            </template>
            <template x-if="stage !== 'qualified'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="qualified" x-on:click="setStage(&#039;qualified&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Qualified <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('qualified')"></span></button>
            </template>
                    <template x-if="stage === 'converted'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="converted" x-on:click="setStage(&#039;converted&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Converted <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('converted')"></span></button>
            </template>
            <template x-if="stage !== 'converted'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="converted" x-on:click="setStage(&#039;converted&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Converted <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('converted')"></span></button>
            </template>
                    <template x-if="stage === 'spam'">
                <button data-slot="button"
     type="button"                         aria-pressed="true" data-stage="spam" x-on:click="setStage(&#039;spam&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Spam <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('spam')"></span></button>
            </template>
            <template x-if="stage !== 'spam'">
                <button data-slot="button"
     type="button"                         aria-pressed="false" data-stage="spam" x-on:click="setStage(&#039;spam&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Spam <span class="ms-1.5 tabular-nums opacity-80" x-text="countText('spam')"></span></button>
            </template>
            </div>
    <template x-if="failure"><div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="failure = &#039;&#039;" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="failure"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
    <div data-slot="entity-list" x-data="nqEntityList([], JSON.parse('[{\u0022id\u0022:\u0022lead\u0022,\u0022key\u0022:\u0022name\u0022,\u0022header\u0022:\u0022Lead\u0022,\u0022type\u0022:\u0022avatar\u0022,\u0022secondary\u0022:\u0022secondary\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022searchKey\u0022:\u0022searchText\u0022,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022source\u0022,\u0022key\u0022:\u0022sourceKind\u0022,\u0022header\u0022:\u0022Source\u0022,\u0022sortable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022stage\u0022,\u0022key\u0022:\u0022stage\u0022,\u0022header\u0022:\u0022Stage\u0022,\u0022sortable\u0022:true,\u0022sortKey\u0022:\u0022stageOrder\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022score\u0022,\u0022key\u0022:\u0022scoreText\u0022,\u0022header\u0022:\u0022Score\u0022,\u0022sortable\u0022:true,\u0022sortKey\u0022:\u0022scoreN\u0022,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022received\u0022,\u0022key\u0022:\u0022receivedAt\u0022,\u0022header\u0022:\u0022Received\u0022,\u0022type\u0022:\u0022datetime\u0022,\u0022format\u0022:\u0022relative\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022view\u0022:\u0022table\u0022,\u0022views\u0022:[\u0022table\u0022,\u0022cards\u0022],\u0022selectable\u0022:false,\u0022actions\u0022:[{\u0022id\u0022:\u0022open\u0022},{\u0022id\u0022:\u0022convert\u0022},{\u0022id\u0022:\u0022move-new\u0022,\u0022group\u0022:\u0022stage\u0022},{\u0022id\u0022:\u0022move-contacted\u0022,\u0022group\u0022:\u0022stage\u0022},{\u0022id\u0022:\u0022move-qualified\u0022,\u0022group\u0022:\u0022stage\u0022},{\u0022id\u0022:\u0022spam\u0022,\u0022group\u0022:\u0022danger\u0022},{\u0022id\u0022:\u0022unspam\u0022,\u0022group\u0022:\u0022danger\u0022}],\u0022actionsKey\u0022:\u0022actions\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022results\u0022:\u0022{n} results\u0022,\u0022resultsOne\u0022:\u00221 result\u0022}}'))" x-modelable="rows"
    x-bind:data-view="view" x-model="lead_rows.rows" class="flex min-w-0 flex-col gap-3">
    <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search leads…" aria-label="Search leads…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                    class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                </button>
            </div>
        <button data-slot="entity-list-clear"
     type="button"                         x-show="isFiltered()" x-on:click="clearAll()" style="display: none" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>            Clear filters</button>
        <div class="ms-auto flex flex-wrap items-center gap-2">
                                                    <div x-show="view === 'cards'" style="display: none">
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="entity-list-sort"
     type="button"                         x-bind="trigger" x-ref="trigger" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m3 16 4 4 4-4"/>
  <path d="M7 20V4"/>
  <path d="m21 8-4-4-4 4"/>
  <path d="M17 4v16"/>
</svg>                            Sort</button>
                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Sort by</div>
                                                                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;lead&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Lead</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'lead' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;source&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Source</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'source' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;stage&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Stage</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'stage' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;score&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Score</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'score' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div>
                                                                                                                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="toggleSort(&#039;received&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1">Received</span>
                                            <span aria-hidden="true" class="text-muted-foreground" x-text="sort?.id === 'received' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span></div></div></div>
</template></div>
                </div>
                                        <div role="group" data-slot="toggle-group" aria-label="Layout" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
                                            <button type="button" data-slot="toggle" aria-label="Table view" x-on:click="setView('table')" x-bind:aria-pressed="view === 'table' ? 'true' : 'false'"
                            x-bind:data-pressed="view === 'table' ? '' : null"
                            class="inline-flex h-control-sm min-w-control-sm items-center justify-center rounded-[calc(var(--radius-control)-2px)] px-2 text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-sm [&_svg]:size-4">
                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 5h.01"/>
  <path d="M3 12h.01"/>
  <path d="M3 19h.01"/>
  <path d="M8 5h13"/>
  <path d="M8 12h13"/>
  <path d="M8 19h13"/>
</svg>                        </button>
                                            <button type="button" data-slot="toggle" aria-label="Card view" x-on:click="setView('cards')" x-bind:aria-pressed="view === 'cards' ? 'true' : 'false'"
                            x-bind:data-pressed="view === 'cards' ? '' : null"
                            class="inline-flex h-control-sm min-w-control-sm items-center justify-center rounded-[calc(var(--radius-control)-2px)] px-2 text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-sm [&_svg]:size-4">
                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="7" height="7" x="3" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="14" rx="1"/>
  <rect width="7" height="7" x="3" y="14" rx="1"/>
</svg>                        </button>
                                    </div>
                    </div>
    </div>
    <span role="status" aria-live="polite" class="sr-only" x-text="status()"></span>
        <div x-show="view === 'table'" style="display: none" data-slot="table-container" role="region" tabindex="0" aria-label="Leads"
            class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
            <div data-slot="table" role="table" aria-label="Leads"  style="grid-template-columns: repeat(6, auto)" class="grid w-full min-w-max text-body-sm">
                <div data-slot="table-header" role="rowgroup" class="contents">
                    <div role="row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                            <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('lead')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('lead')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Lead
                                        <span aria-hidden="true" x-text="sort?.id === 'lead' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('source')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('source')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Source
                                        <span aria-hidden="true" x-text="sort?.id === 'source' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('stage')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground text-start">
                                                                    <button type="button" x-on:click="toggleSort('stage')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Stage
                                        <span aria-hidden="true" x-text="sort?.id === 'stage' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('score')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground justify-end text-end">
                                                                    <button type="button" x-on:click="toggleSort('score')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Score
                                        <span aria-hidden="true" x-text="sort?.id === 'score' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                    <div role="columnheader" data-slot="table-head"   x-bind:aria-sort="sortState('received')"                                 class="flex h-row items-center px-4 text-caption font-medium whitespace-nowrap text-muted-foreground justify-end text-end">
                                                                    <button type="button" x-on:click="toggleSort('received')" class="inline-flex items-center gap-1.5 rounded-control outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        Received
                                        <span aria-hidden="true" x-text="sort?.id === 'received' ? (sort.dir === 'asc' ? '↑' : '↓') : ''"></span>
                                    </button>
                                                            </div>
                                                <div role="columnheader" class="flex h-row w-12 items-center"><span class="sr-only">Actions for {name}</span></div>                    </div>
                </div>
                <div data-slot="table-body" role="rowgroup" class="contents">
                    <template x-for="(row, index) in pageRows" :key="idOf(row)">
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/row col-span-full grid grid-cols-subgrid border-b border-border transition-colors hover:bg-nq-hover data-[state=selected]:bg-nq-selected" role="row" data-row="data-row" x-bind:data-state="isSelected(row) ? `selected` : null" x-on:click="openRow(row, $event)"><div role="cell" data-slot="table-cell" data-cell-col="lead"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span data-slot="avatar" class="relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle text-caption font-medium text-secondary-foreground">
                    <span data-slot="avatar-fallback" aria-hidden="true" class="flex size-full items-center justify-center" x-text="initials(shownText(row, col(&#039;lead&#039;)))"></span>
                    <template x-if="avatarSrc(row, col(&#039;lead&#039;))"><img data-slot="avatar-image" alt="" x-bind:src="avatarSrc(row, col(&#039;lead&#039;))" x-on:error="$el.remove()" class="absolute inset-0 size-full object-cover"></template>
                </span>
                <span class="flex min-w-0 flex-col">
                    <span class="truncate text-label text-foreground" x-text="shownText(row, col(&#039;lead&#039;))"></span>
                    <bdi  class="truncate text-caption text-muted-foreground" x-show="secondary(row, col(&#039;lead&#039;))" x-text="secondary(row, col(&#039;lead&#039;))" style="display: none"></bdi>
                </span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="source"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span class="inline-flex min-w-0 items-center gap-1.5">
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;paid&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-accent/40 bg-nq-accent/15 text-nq-accent-text">Paid</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;organic&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Organic</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;social&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">Social</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;email&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Email</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;referral&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Referral</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;direct&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Direct</span>
        <bdi dir="auto" class="truncate text-body-sm text-muted-foreground" x-show="row.sourceDetail !== ''" style="display: none" x-text="row.sourceDetail"></bdi>
</span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="stage"  class="flex h-row items-center px-4 py-3 ">
        <span class="flex min-w-0 items-center gap-1.5 ">
                            <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;new&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">New</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;contacted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Contacted</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;qualified&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Qualified</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;converted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Converted</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;spam&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">Spam</span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="score"  class="flex h-row items-center px-4 py-3 justify-end text-end">
        <span class="flex min-w-0 items-center gap-1.5 justify-end">
                            <span class="contents" x-show="row.scoreN < 0" style="display: none"><span>—</span></span>
                            <span class="contents" x-show="row.id === 'l1'" style="display: none"><div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button type="button" data-slot="score-badge" data-band="high" aria-label="Score 82 of 100, High. Show why" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" x-bind:aria-expanded="open"
        x-bind:data-popup-open="open ? '' : undefined"
        class="inline-flex h-6 cursor-pointer items-center gap-1.5 rounded-full border px-2 text-caption font-medium outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus hover:bg-nq-hover border-nq-success/40 bg-nq-success-soft text-nq-success-text">
                <bdi data-slot="num" data-numeric="" class="tabular-nums text-body-sm">82</bdi>
        <span>High</span>
    </button>
    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-[min(26rem,calc(100vw-2rem))] p-4"><section data-slot="score-explainer" data-band="high" aria-labelledby="nq-score-000002-title" class="flex min-w-0 flex-col gap-4">
    <header class="flex flex-wrap items-center gap-x-4 gap-y-2">
        <div class="flex items-baseline gap-1.5">
            <span class="text-display-sm tabular-nums text-foreground" aria-hidden="true"><bdi data-slot="num" data-numeric="" class="tabular-nums">82</bdi>
</span>
            <span class="text-body-sm text-muted-foreground">out of 100</span>
        </div>
        <div class="flex min-w-0 flex-1 flex-col gap-1">
            <div class="flex flex-wrap items-center gap-1.5">
                <h3 id="nq-score-000002-title" class="text-title-sm text-foreground">Why this score</h3>
                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">High</span>
                            </div>
                    </div>
    </header>
        <ul data-slot="score-dimensions" class="flex flex-col gap-4">
                            <li data-slot="score-dimension" class="flex min-w-0 flex-col gap-1">
                <div class="flex items-baseline justify-between gap-3">
                    <span class="text-label text-foreground">Other factors</span>
                    <span class="text-body-sm text-muted-foreground">+82 points</span>
                </div>
                <p class="text-body-sm text-muted-foreground">Points that no single signal above accounts for.</p>
            </li>
            </ul>
</section></div>
</template>
</div>
</span>
                    </span>
    </div>
        <div role="cell" data-slot="table-cell" data-cell-col="received"  class="flex h-row items-center px-4 py-3 justify-end text-end">
        <span class="flex min-w-0 items-center gap-1.5 justify-end">
                            <time class="min-w-0 flex-1 tabular-nums" x-bind:datetime="isoOf(row, col(&#039;received&#039;))"  x-bind:title="absoluteOf(row, col(&#039;received&#039;))"  x-text="shownText(row, col(&#039;received&#039;))"></time>
                    </span>
    </div>
<div role="cell" data-slot="table-cell" class="flex h-row w-12 items-center pe-2"><div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="entity-list-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground data-popup-open:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                    <div role="none" class="contents">
                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>                            Open</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 1)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;convert&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>                            Convert to CRM</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 2)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-new&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to New</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 3)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 3)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-contacted&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to Contacted</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 4)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 4)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-qualified&#039;, row)" x-bind:data-disabled="actionOff(row, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to Qualified</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 5)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 5)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;spam&#039;, row)" x-bind:data-disabled="actionOff(row, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                            Mark as spam</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 6)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 6)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;unspam&#039;, row)" x-bind:data-disabled="actionOff(row, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                            Not spam</div>
                    </div>
                </template></div></div>
</template></div>
</div></div>
                                <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="actionOn(row, 0)">
        <div role="none" class="contents">
                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>                Open</div>
        </div>
    </template>
    <template x-if="actionOn(row, 1)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;convert&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>                Convert to CRM</div>
        </div>
    </template>
    <template x-if="actionOn(row, 2)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-new&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to New</div>
        </div>
    </template>
    <template x-if="actionOn(row, 3)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 3)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-contacted&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to Contacted</div>
        </div>
    </template>
    <template x-if="actionOn(row, 4)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 4)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-qualified&#039;, row)" x-bind:data-disabled="actionOff(row, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to Qualified</div>
        </div>
    </template>
    <template x-if="actionOn(row, 5)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 5)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;spam&#039;, row)" x-bind:data-disabled="actionOff(row, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                Mark as spam</div>
        </div>
    </template>
    <template x-if="actionOn(row, 6)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 6)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;unspam&#039;, row)" x-bind:data-disabled="actionOff(row, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                Not spam</div>
        </div>
    </template></div>
</template></div>
                                            </template>
                </div>
            </div>
        </div>
        <div x-show="view === 'cards'" style="display: none" role="list" aria-label="Leads" class="grid gap-3"
            style="grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); --entity-card-controls: 1.75rem">
            <template x-for="(row, index) in pageRows" :key="idOf(row)">
                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/card relative flex min-w-0 flex-col rounded-card border border-border bg-card p-4 text-card-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus data-[state=selected]:border-primary data-[state=selected]:bg-nq-selected" role="listitem" data-card="data-card" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" x-bind:data-state="isSelected(row) ? `selected` : null" x-on:keydown="cardKey($event, row, index)" x-on:click="openRow(row, $event)" x-on:focus="$event.target === $event.currentTarget ? (active = index) : null"><div class="min-w-0 flex-1"><div class="flex min-w-0 flex-col gap-2">
                <div class="flex items-start justify-between gap-2 pe-(--entity-card-controls)">
                    <div data-slot="entity-identity" class="flex min-w-0 items-center gap-3">
                        <span data-slot="avatar" class="relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle text-caption font-medium text-secondary-foreground">
                            <span data-slot="avatar-fallback" aria-hidden="true" class="flex size-full items-center justify-center" x-text="initials(row.name)"></span>
                        </span>
                        <div class="flex min-w-0 flex-col">
                            <span class="truncate text-label text-foreground" x-text="row.name"></span>
                            <span class="truncate text-body-sm text-muted-foreground" x-show="row.secondary" style="display: none" x-text="row.secondary"></span>
                        </div>
                    </div>
                    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;new&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">New</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;contacted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Contacted</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;qualified&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Qualified</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;converted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Converted</span>
    <span data-slot="badge"  style="display: none"     x-show="row.stage === &#039;spam&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">Spam</span>
                </div>
                <span dir="auto" class="line-clamp-2 text-body-sm text-muted-foreground" x-show="row.message" style="display: none" x-text="row.message"></span>
                <div data-slot="card-meta" class="flex items-center justify-between gap-3 text-body-sm">
    <span class="shrink-0 text-muted-foreground">Source</span>
    <span class="min-w-0 truncate text-end"><span class="inline-flex min-w-0 items-center gap-1.5">
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;paid&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-accent/40 bg-nq-accent/15 text-nq-accent-text">Paid</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;organic&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Organic</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;social&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">Social</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;email&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Email</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;referral&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Referral</span>
            <span data-slot="badge"  style="display: none"     x-show="row.sourceKind === &#039;direct&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Direct</span>
        <bdi dir="auto" class="truncate text-body-sm text-muted-foreground" x-show="row.sourceDetail !== ''" style="display: none" x-text="row.sourceDetail"></bdi>
</span></span>
</div>
                <div data-slot="card-meta" class="flex items-center justify-between gap-3 text-body-sm">
    <span class="shrink-0 text-muted-foreground">Received</span>
    <span class="min-w-0 truncate text-end"><time class="tabular-nums text-body-sm text-muted-foreground" x-bind:datetime="isoOf(row, col('received'))" x-bind:title="absoluteOf(row, col('received'))" x-text="shownText(row, col('received'))"></time></span>
</div>
            </div></div>
    <div class="absolute end-2 top-2 flex items-center gap-1">
                <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="entity-list-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground data-popup-open:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                    <div role="none" class="contents">
                                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>                            Open</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 1)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;convert&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>                            Convert to CRM</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 2)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-new&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to New</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 3)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 3)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-contacted&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to Contacted</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 4)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 4)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-qualified&#039;, row)" x-bind:data-disabled="actionOff(row, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                            Move to Qualified</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 5)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 5)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;spam&#039;, row)" x-bind:data-disabled="actionOff(row, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                            Mark as spam</div>
                    </div>
                </template>
                            <template x-if="actionOn(row, 6)">
                    <div role="none" class="contents">
                        <template x-if="sepBefore(row, 6)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;unspam&#039;, row)" x-bind:data-disabled="actionOff(row, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                            Not spam</div>
                    </div>
                </template></div></div>
</template></div>
    </div></div>
                        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="actionOn(row, 0)">
        <div role="none" class="contents">
                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>                Open</div>
        </div>
    </template>
    <template x-if="actionOn(row, 1)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;convert&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>                Convert to CRM</div>
        </div>
    </template>
    <template x-if="actionOn(row, 2)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-new&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to New</div>
        </div>
    </template>
    <template x-if="actionOn(row, 3)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 3)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-contacted&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to Contacted</div>
        </div>
    </template>
    <template x-if="actionOn(row, 4)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 4)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;move-qualified&#039;, row)" x-bind:data-disabled="actionOff(row, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                Move to Qualified</div>
        </div>
    </template>
    <template x-if="actionOn(row, 5)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 5)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;spam&#039;, row)" x-bind:data-disabled="actionOff(row, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                Mark as spam</div>
        </div>
    </template>
    <template x-if="actionOn(row, 6)">
        <div role="none" class="contents">
            <template x-if="sepBefore(row, 6)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;unspam&#039;, row)" x-bind:data-disabled="actionOff(row, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg>                Not spam</div>
        </div>
    </template></div>
</template></div>
                            </template>
        </div>
        <div x-show="! hasRows() && noMatches()" style="display: none">
            <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="clearAll()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Clear filters</button></div>
    </div>
        </div>
        <div x-show="rows.length === 0" style="display: none">
            <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No leads yet</p>
                    <p class="text-body-sm text-muted-foreground">Inquiries from your forms land here, with where they came from.</p>
            </div>
    </div>        </div>
    </div>
    <div data-slot="sheet" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="detail.open" class="contents">
    <template x-teleport="body">
    <div data-slot="sheet-portal">
        <div data-slot="sheet-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/10 transition-opacity duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 dark:bg-nq-bg/60"></div>
        <div data-slot="sheet-content" data-side="end" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed z-50 flex flex-col bg-popover text-popover-foreground outline-none shadow-floating transition-[translate,opacity] duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 inset-y-0 end-0 h-dvh border-s border-border data-starting-style:translate-x-8 data-ending-style:translate-x-8 rtl:data-starting-style:-translate-x-8 rtl:data-ending-style:-translate-x-8 w-[min(34rem,100vw)]">
            <div data-slot="sheet-header" class="flex flex-col gap-1 border-b border-border px-4 py-3.5 pe-12"><h2 data-slot="sheet-title" :id="$id('nq-dialog', 'title')" dir="auto" class="text-label text-foreground"><span x-text="cur.name"></span></h2>
            <p data-slot="sheet-description" :id="$id('nq-dialog', 'description')" class="text-caption text-muted-foreground"><span class="inline-flex flex-wrap items-center gap-2">
                    <span data-slot="badge"  style="display: none"     x-show="cur.status === &#039;new&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">New</span>
    <span data-slot="badge"  style="display: none"     x-show="cur.status === &#039;contacted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Contacted</span>
    <span data-slot="badge"  style="display: none"     x-show="cur.status === &#039;qualified&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Qualified</span>
    <span data-slot="badge"  style="display: none"     x-show="cur.status === &#039;converted&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Converted</span>
    <span data-slot="badge"  style="display: none"     x-show="cur.status === &#039;spam&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">Spam</span>
                    <span class="text-body-sm text-muted-foreground" x-text="cur.receivedText"></span>
                </span></p></div>
        <div data-slot="sheet-body" class="min-h-0 flex-1 overflow-y-auto overscroll-contain flex flex-col gap-5"><ol aria-label="Pipeline" class="flex flex-wrap items-center gap-1.5">
                <template x-for="step in cur.steps" x-bind:key="step.status">
                    <li x-bind:aria-current="step.current ? 'step' : null" class="flex items-center gap-1.5">
                        <span x-bind:class="step.current ? 'border-primary bg-primary text-primary-foreground' : (step.done ? 'border-nq-success/40 bg-nq-success-soft text-nq-success-text' : 'border-border text-muted-foreground')"
                            class="inline-flex h-6 items-center gap-1 rounded-full border px-2 text-caption">
                            <svg aria-hidden="true" x-show="step.done" style="display: none" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            <span x-text="step.label"></span>
                        </span>
                        <svg aria-hidden="true" x-show="step.arrow" style="display: none" class="size-3 text-muted-foreground rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>                    </li>
                </template>
            </ol>
            <template x-if="detail.moveError"><div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="detail.moveError"></span></div>
            </div>
    </div>
</template>
            <div class="flex flex-wrap gap-2">
                <template x-if="cur.showConvert">
                    <button data-slot="button"
     type="button"                         data-action="convert" x-on:click="startConvertFromDetail()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>Convert to CRM</button>
                </template>
                <template x-for="m in cur.moves" x-bind:key="m.status">
                    <button data-slot="button"
     type="button"                         data-action="move" x-on:click="move(m.status)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <span x-text="m.label"></span></button>
                </template>
                <template x-if="cur.showSpam">
                    <button data-slot="button"
     type="button"                         data-action="spam" x-on:click="toggleSpam()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M4.929 4.929 19.07 19.071"/>
</svg><span x-text="cur.spamLabel"></span></button>
                </template>
            </div>
            <section x-show="cur.showRefs" style="display: none" aria-label="Converted to CRM" class="flex flex-col gap-2 rounded-card border border-nq-success/40 bg-nq-success-soft p-3 text-body-sm">
                <span class="text-label text-nq-success-text">Converted to CRM</span>
                <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
                    <template x-if="cur.hasContact"><div class="contents"><dt class="text-muted-foreground">Contact</dt><dd dir="auto" x-text="cur.contactName"></dd></div></template>
                    <template x-if="cur.hasCompanyRef"><div class="contents"><dt class="text-muted-foreground">Company</dt><dd dir="auto" x-text="cur.companyRefName"></dd></div></template>
                    <template x-if="cur.hasDeal"><div class="contents"><dt class="text-muted-foreground">Deal</dt><dd dir="auto" x-text="cur.dealName"></dd></div></template>
                </dl>
            </section>
            <section aria-label="Message" class="flex flex-col gap-2">
                <h3 class="text-label text-foreground">Message</h3>
                <p x-show="cur.hasMessage" style="display: none" dir="auto" class="whitespace-pre-wrap rounded-card border border-border bg-nq-surface-soft p-3 text-body-sm" x-text="cur.message"></p>
                <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-body-sm">
                    <template x-if="cur.hasEmail"><div class="contents"><dt class="text-muted-foreground">Email</dt><dd><bdi dir="ltr" x-text="cur.email"></bdi></dd></div></template>
                    <template x-if="cur.hasPhone"><div class="contents"><dt class="text-muted-foreground">Phone</dt><dd><bdi dir="ltr" x-text="cur.phone"></bdi></dd></div></template>
                    <template x-if="cur.hasCompany"><div class="contents"><dt class="text-muted-foreground">Company</dt><dd dir="auto" x-text="cur.company"></dd></div></template>
                    <template x-if="cur.hasBudget"><div class="contents"><dt class="text-muted-foreground">Budget</dt><dd dir="auto" x-text="cur.budget"></dd></div></template>
                    <template x-if="cur.hasForm"><div class="contents"><dt class="text-muted-foreground">Form</dt><dd dir="auto" x-text="cur.form"></dd></div></template>
                    <template x-if="cur.hasScore"><div class="contents"><dt class="text-muted-foreground">Score</dt><dd x-text="cur.scoreText"></dd></div></template>
                </dl>
            </section>
            <section aria-label="Where it came from" class="flex flex-col gap-2">
                <div class="flex flex-col gap-0.5">
                    <h3 class="text-label text-foreground">Where it came from</h3>
                    <p class="text-caption text-muted-foreground">What the visitor&#039;s browser reported when they sent the form.</p>
                </div>
                <span class="inline-flex min-w-0 items-center gap-1.5">
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;paid&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-accent/40 bg-nq-accent/15 text-nq-accent-text">Paid</span>
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;organic&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Organic</span>
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;social&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-info/40 bg-nq-info-soft text-nq-info-text">Social</span>
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;email&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Email</span>
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;referral&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Referral</span>
            <span data-slot="badge"  style="display: none"     x-show="cur.sourceKind === &#039;direct&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Direct</span>
        <bdi dir="auto" class="truncate text-body-sm text-muted-foreground" x-show="cur.sourceDetail !== ''" style="display: none" x-text="cur.sourceDetail"></bdi>
</span>
                <p x-show="cur.noAttr" style="display: none" class="text-body-sm text-muted-foreground">Direct visit</p>
                <dl x-show="! cur.noAttr" class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-body-sm">
                    <template x-for="entry in cur.attrEntries" x-bind:key="entry.key">
                        <div class="contents">
                            <dt class="text-muted-foreground" x-text="entry.label"></dt>
                            <dd class="flex min-w-0 items-center gap-1.5">
                                <bdi dir="ltr" class="min-w-0 break-all font-mono text-caption text-foreground" x-text="entry.value"></bdi>
                                <template x-if="entry.copy"><span class="contents" x-data="nqCopyButton(() => (entry.value), 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
</template>
                            </dd>
                        </div>
                    </template>
                </dl>
            </section>
                            <section aria-label="Reply" class="flex flex-col gap-2">
                    <label for="nq-leads-000001-reply" class="text-label text-foreground">Your reply</label>
                    <template x-if="detail.noteTone === 'danger'"><div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="detail.note"></span></div>
            </div>
    </div>
</template>
                    <template x-if="detail.noteTone === 'success'"><div data-slot="alert" data-tone="success" role="status"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-success/30 bg-nq-success-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="detail.note"></span></div>
            </div>
    </div>
</template>
                    <textarea data-slot="textarea"
                id="nq-leads-000001-reply" dir="auto" x-model="detail.text" rows="4" placeholder="Write a reply, or press the bolt for a canned reply…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] min-h-20 py-2"></textarea>
                    <div class="flex items-center justify-between gap-2">
                                                    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" x-model="snipOpen" class="contents">
    <button data-slot="popover-trigger"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" data-action="snippets" aria-label="Canned replies" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"/>
</svg></button>
                                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 flex w-80 flex-col gap-2 p-2"><input data-slot="snippet-search" type="text"
                    role="combobox" aria-expanded="true" aria-label="Search replies…" placeholder="Search replies…" x-model="snipQuery" x-on:input="snipActive = 0" x-on:keydown="onSnipKey($event)" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                                    <ul role="listbox" aria-label="Canned replies" class="flex max-h-64 flex-col gap-0.5 overflow-y-auto">
                                        <li x-show="snippetList.length == 0" style="display: none" role="presentation" class="px-2 py-3 text-center text-body-sm text-muted-foreground">No matching replies</li>
                                        <template x-for="(s, i) in snippetList" x-bind:key="s.id">
                                            <li role="option" tabindex="-1" data-action="snippet" x-bind:aria-selected="i == snipActive" x-bind:class="i == snipActive ? `bg-nq-hover` : ``" x-on:mouseenter="snipActive = i" x-on:click="pickSnippet(s)"
                                                class="flex cursor-pointer flex-col gap-0.5 rounded-control px-2 py-1.5 text-start">
                                                <span class="flex items-center gap-2">
                                                    <span dir="auto" class="flex-1 truncate text-label text-foreground" x-text="s.title"></span>
                                                    <kbd dir="ltr" class="rounded-[4px] border border-border bg-secondary px-1 font-mono text-caption text-muted-foreground" x-text="`/` + s.shortcut"></kbd>
                                                </span>
                                                <span dir="auto" class="line-clamp-2 text-caption text-muted-foreground" x-text="s.body"></span>
                                            </li>
                                        </template>
                                    </ul></div>
</template>
</div>
                                                <button data-slot="button"
     type="button"                         data-action="send" x-on:click="send()" x-bind:disabled="canSend ? null : &#039;&#039;" x-bind:aria-busy="detail.busy ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="detail.busy" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                            <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg>Send reply</button>
                    </div>
                </section></div>
                            <button type="button" data-slot="sheet-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="convert.open" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="lead-convert-dialog" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Convert to CRM</h2>
            <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Creates a contact from this lead. The lead stays here, marked as converted.</p></div>
        <form novalidate class="flex flex-col gap-4" x-on:submit.prevent="submitConvert()">
            <template x-if="convert.error"><div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="convert.error"></span></div>
            </div>
    </div>
</template>
            <label class="flex flex-col gap-1.5">
                <span class="text-label text-foreground">Contact name</span>
                <input data-slot="input" type="text"
                    x-model="convert.name" dir="auto" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
            </label>
            <div class="flex flex-col gap-2">
                <label class="flex items-center gap-2 text-body-sm"><button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="convert.withCompany" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
Create a company</label>
                <div x-show="convert.withCompany" style="display: none"><input data-slot="input" type="text"
                    x-model="convert.company" dir="auto" aria-label="Company" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
            </div>
            <div class="flex flex-col gap-2">
                <label class="flex items-center gap-2 text-body-sm"><button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="convert.withDeal" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
Open a deal</label>
                <div x-show="convert.withDeal" style="display: none"><input data-slot="input" type="text"
                    x-model="convert.deal" dir="auto" aria-label="Deal title" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
            </div>
            <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="convert.open = false" x-bind:disabled="convert.pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                <button data-slot="button"
     type="submit"                         data-action="convert-submit" x-bind:disabled="convertValid ? null : &#039;&#039;" x-bind:aria-busy="convert.pending ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="convert.pending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                    Convert</button></div>
        </form>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    </div>
```