# KeywordTracker

> Rank tracking for a keyword list: position and change arrows, best position, URL, volume, difficulty, SERP features, history chart, top 3 / 10 / 100 buckets, add-keywords dialog and competitor comparison.

Source: https://docs.nasaqui.com/components/keyword-tracker

## Install

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

KeywordTracker follows where a site ranks for a list of keywords. The table shows the current position with an arrow for the change, the best ever position, the ranking URL (editable in the cell), search volume, difficulty and the SERP features the page owns, with a sparkline of each keyword's history. Above it sit summary tiles, an average-position line chart and the top 3 / 10 / 100 distribution. An Add keywords dialog takes a pasted list plus a location and device, and a Competitors tab compares positions side by side.

## When to use

- A rank tracking screen for a site or client.
- Weekly SEO reports that need movers and the distribution.

## When not to use

- Discovering new keywords and clustering them: use [`KeywordPlanner`](https://docs.nasaqui.com/components/keyword-planner).
- Search Console clicks and impressions: use [`SearchPerformanceTable`](https://docs.nasaqui.com/components/search-performance-table).

## Import

```tsx
import { KeywordTracker } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
import { KeywordTracker, type TrackedKeyword } from "@fadymondy/nasaq/web";

export function Ranks({ keywords }: { keywords: TrackedKeyword[] }) {
  return <KeywordTracker keywords={keywords} locations={[{ value: "sa", label: "Saudi Arabia" }]} onAddKeywords={async (input) => { await api.add(input); }} />;
}
```

## Anatomy

```
KeywordTracker            data-slot="keyword-tracker"
  tiles                   tracked, average position, top 10, visibility
  Tabs                    Keywords | Competitors
    RankDistribution      top 3 / top 10 / top 100 / beyond
    history chart         TimeSeriesPanel (average position and top 10 count)
    DataTable             keyword, RankChange, best, URL, volume, difficulty, features, sparkline
  AddKeywordsDialog       keywords, location, device
  CompetitorComparison    one column per keyword, one row per domain
```

## API

### KeywordTracker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keywords` | `TrackedKeyword[]` | required | `position` is `null` when the site is not in the top 100. |
| `positionHistory` | `TimeSeriesPoint[]` | none | Points with `date`, `position`, `top10` for the chart. |
| `competitors` | `KeywordCompetitor[]` | none | Turns on the Competitors tab. |
| `locations` | `KeywordLocation[]` | none | Options in the dialog. |
| `defaultLocation` | `string` | first | Preselected location. |
| `onAddKeywords` | `(input: AddKeywordsInput) => Promise<void \| { error?: string }>` | none | Shows the Add keywords button. |
| `onRemoveKeywords` | `(ids: string[]) => Promise<...>` | none | Bulk and row Remove. |
| `onRefresh` | `(ids: string[]) => Promise<...>` | none | Bulk and row Refresh rank. |
| `onUpdateKeyword` | `(id, patch: { url: string }) => Promise<...>` | none | Makes the URL cell editable. |
| `onOpenKeyword` | `(keyword) => void` | none | Row click. |
| `pageSize` | `number` | `8` | Rows per page. |
| `loading / error / onRetry` | | none | States. |
| `className / labels` | | none | Classes; `Partial<KeywordTrackerLabels>` strings. |

### TrackedKeyword

`{ id, keyword, position, previousPosition?, history?, best?, url?, volume, difficulty, features? }`. `features` is a list of `snippet`, `paa`, `images`, `video`, `local`, `sitelinks`, `reviews`, `ads`.

### RankChange

| Prop | Type | Description |
| --- | --- | --- |
| `current` | `number \| null` | Position now. |
| `previous` | `number \| null` | Position before. Lower is better, so a smaller number shows an up arrow. |

### RankDistribution

`distribution` from `rankDistribution(keywords)`, with optional `title`, `description`.

### AddKeywordsDialog

`open`, `onOpenChange`, `locations`, `defaultLocation?`, `defaultDevice?` (`desktop` or `mobile`), `onAdd(input)`. Lines and commas are both separators; duplicates are dropped.

### CompetitorComparison

`keywords`, `competitors`, `title?`, `description?`.

### Helpers

`rankBucket`, `rankDistribution`, `rankChange`, `averagePosition`, `bestPosition`, `visibilityShare` (click share estimated from `ctrForPosition`), `topMovers`, `competitorStats`, `difficultyBand`, `parseKeywordList`, `RANK_BUCKETS`.

## Examples

Distribution on its own:

```tsx
import { RankDistribution, rankDistribution } from "@fadymondy/nasaq/web";

<RankDistribution distribution={rankDistribution(keywords)} />;
```

A rank arrow in your own table:

```tsx
import { RankChange } from "@fadymondy/nasaq/web";

<RankChange current={4} previous={9} />;
```

## Accessibility

| Key | Action |
| --- | --- |
| Tab | Move to the table, the dialog trigger and the tabs. |
| Arrow keys | Switch tabs. |
| Escape | Close the dialog. |

Rank changes have a text alternative ("up 5 places") in addition to colour and arrow. Sparklines are hidden from assistive tech; the table holds the numbers.

## RTL & i18n

Keywords in Arabic are shown with `dir="auto"`; URLs and domains stay left-to-right. Positions and volumes use Latin digits. Built-in English and Arabic strings; override with `labels`.

## Styling & tokens

Up, down and neutral use the success, danger and muted tokens. Charts use the `--nq-chart-*` palette.

## Do / Don't

- Do show the previous position: a rank alone says little.
- Do treat `null` position as "not in the top 100", not zero.
- Don't compare positions across devices or locations in one chart.

## Related

- [KeywordPlanner](https://docs.nasaqui.com/components/keyword-planner)
- [SeoPageList](https://docs.nasaqui.com/components/seo-pages)

## Lab

https://docs.nasaqui.com/?path=/docs/components-seo-keyword-tracker--docs

## Code

### React

```tsx
import { KeywordTracker, type TrackedKeyword } from "@fadymondy/nasaq/web";

export function Ranks({ keywords }: { keywords: TrackedKeyword[] }) {
  return <KeywordTracker keywords={keywords} locations={[{ value: "sa", label: "Saudi Arabia" }]} onAddKeywords={async (input) => { await api.add(input); }} />;
}
```

### shadcn

```tsx
import { KeywordTracker, type TrackedKeyword } from "@/components/ui/keyword-tracker";

export function Ranks({ keywords }: { keywords: TrackedKeyword[] }) {
  return <KeywordTracker keywords={keywords} locations={[{ value: "sa", label: "Saudi Arabia" }]} onAddKeywords={async (input) => { await api.add(input); }} />;
}
```

### Vue

```vue
<script setup lang="ts">
import { NqKeywordTracker, type TrackedKeyword } from "@fadymondy/nasaq/vue";

const keywords: TrackedKeyword[] = [
  { id: "k1", keyword: "rtl react components", position: 4, previousPosition: 7, history: [9, 8, 7, 7, 5, 4], url: "/components", volume: 2400, difficulty: 38, features: ["snippet", "paa"] },
  { id: "k2", keyword: "arabic design system", position: 2, previousPosition: 2, history: [3, 3, 2, 2, 2, 2], url: "/design-system", volume: 1900, difficulty: 45, features: ["sitelinks"] },
  { id: "k3", keyword: "nasaq ui", position: 1, previousPosition: 1, history: [1, 1, 1, 1, 1, 1], url: "/", volume: 600, difficulty: 12 },
  { id: "k4", keyword: "react rtl library", position: 12, previousPosition: 9, history: [8, 9, 9, 10, 9, 12], url: "/blog/rtl", volume: 1300, difficulty: 52, features: ["images"] },
  { id: "k5", keyword: "ui kit arabic", position: null, previousPosition: 34, volume: 800, difficulty: 64 },
  { id: "k6", keyword: "design tokens guide", position: 18, previousPosition: null, url: "/docs/tokens", volume: 4400, difficulty: 71, features: ["video"] },
];

const positionHistory = [
  { date: "2026-09-23", position: 9.2, top10: 2 },
  { date: "2026-09-24", position: 8.8, top10: 2 },
  { date: "2026-09-25", position: 8.4, top10: 3 },
  { date: "2026-09-26", position: 8.1, top10: 3 },
  { date: "2026-09-27", position: 7.8, top10: 3 },
  { date: "2026-09-28", position: 7.6, top10: 3 },
  { date: "2026-09-29", position: 7.4, top10: 3 },
];

async function add(_input: { keywords: string[]; location: string; device: "desktop" | "mobile" }) {}
async function remove(_ids: string[]) {}
async function refresh(_ids: string[]) {}
async function update(_id: string, _patch: { url: string }) {}
</script>

<template>
  <NqKeywordTracker
    :keywords="keywords"
    :position-history="positionHistory"
    :locations="[{ value: 'sa', label: 'Saudi Arabia' }, { value: 'ae', label: 'United Arab Emirates' }]"
    :competitors="[
      { id: 'c1', domain: 'nasaq.dev', you: true, ranks: { k1: 4, k2: 2, k3: 1, k4: 12, k5: null, k6: 18 } },
      { id: 'c2', domain: 'rtlkit.io', ranks: { k1: 3, k2: 8, k3: null, k4: 5, k5: 11, k6: null } },
    ]"
    :on-add-keywords="add"
    :on-remove-keywords="remove"
    :on-refresh="refresh"
    :on-update-keyword="update"
  />
</template>
```

### Blade

```blade
@php
    $keywords = [
        ['id' => 'k1', 'keyword' => 'rtl react components', 'position' => 4, 'previousPosition' => 7, 'history' => [9, 8, 7, 7, 5, 4], 'url' => '/components', 'volume' => 2400, 'difficulty' => 38, 'features' => ['snippet', 'paa']],
        ['id' => 'k2', 'keyword' => 'arabic design system', 'position' => 2, 'previousPosition' => 2, 'history' => [3, 3, 2, 2, 2, 2], 'url' => '/design-system', 'volume' => 1900, 'difficulty' => 45, 'features' => ['sitelinks']],
        ['id' => 'k3', 'keyword' => 'nasaq ui', 'position' => 1, 'previousPosition' => 1, 'history' => [1, 1, 1, 1, 1, 1], 'url' => '/', 'volume' => 600, 'difficulty' => 12],
        ['id' => 'k4', 'keyword' => 'react rtl library', 'position' => 12, 'previousPosition' => 9, 'history' => [8, 9, 9, 10, 9, 12], 'url' => '/blog/rtl', 'volume' => 1300, 'difficulty' => 52, 'features' => ['images']],
        ['id' => 'k5', 'keyword' => 'ui kit arabic', 'position' => null, 'previousPosition' => 34, 'volume' => 800, 'difficulty' => 64],
        ['id' => 'k6', 'keyword' => 'design tokens guide', 'position' => 18, 'previousPosition' => null, 'url' => '/docs/tokens', 'volume' => 4400, 'difficulty' => 71, 'features' => ['video']],
    ];
    $history = [
        ['date' => '2026-09-23', 'position' => 9.2, 'top10' => 2],
        ['date' => '2026-09-24', 'position' => 8.8, 'top10' => 2],
        ['date' => '2026-09-25', 'position' => 8.4, 'top10' => 3],
        ['date' => '2026-09-26', 'position' => 8.1, 'top10' => 3],
        ['date' => '2026-09-27', 'position' => 7.8, 'top10' => 3],
        ['date' => '2026-09-28', 'position' => 7.6, 'top10' => 3],
        ['date' => '2026-09-29', 'position' => 7.4, 'top10' => 3],
    ];
@endphp
<x-nq::keyword-tracker :keywords="$keywords" :position-history="$history"
    :locations="[['value' => 'sa', 'label' => 'Saudi Arabia'], ['value' => 'ae', 'label' => 'United Arab Emirates']]"
    :competitors="[
        ['id' => 'c1', 'domain' => 'nasaq.dev', 'you' => true, 'ranks' => ['k1' => 4, 'k2' => 2, 'k3' => 1, 'k4' => 12, 'k5' => null, 'k6' => 18]],
        ['id' => 'c2', 'domain' => 'rtlkit.io', 'ranks' => ['k1' => 3, 'k2' => 8, 'k3' => null, 'k4' => 5, 'k5' => 11, 'k6' => null]],
    ]"
    x-on:add-keywords="$event.detail.wait(Promise.resolve())"
    x-on:remove-keywords="$event.detail.wait(Promise.resolve())"
    x-on:refresh-keywords="$event.detail.wait(Promise.resolve())"
    x-on:update-keyword="$event.detail.wait(Promise.resolve())" />
```

### HTML + Alpine

```html
<div data-slot="keyword-tracker" x-data="nqKeywordTracker(JSON.parse('{\u0022keywords\u0022:[{\u0022id\u0022:\u0022k1\u0022,\u0022keyword\u0022:\u0022rtl react components\u0022,\u0022position\u0022:4,\u0022previousPosition\u0022:7,\u0022history\u0022:[9,8,7,7,5,4],\u0022url\u0022:\u0022\\\/components\u0022,\u0022volume\u0022:2400,\u0022difficulty\u0022:38,\u0022features\u0022:[\u0022snippet\u0022,\u0022paa\u0022]},{\u0022id\u0022:\u0022k2\u0022,\u0022keyword\u0022:\u0022arabic design system\u0022,\u0022position\u0022:2,\u0022previousPosition\u0022:2,\u0022history\u0022:[3,3,2,2,2,2],\u0022url\u0022:\u0022\\\/design-system\u0022,\u0022volume\u0022:1900,\u0022difficulty\u0022:45,\u0022features\u0022:[\u0022sitelinks\u0022]},{\u0022id\u0022:\u0022k3\u0022,\u0022keyword\u0022:\u0022nasaq ui\u0022,\u0022position\u0022:1,\u0022previousPosition\u0022:1,\u0022history\u0022:[1,1,1,1,1,1],\u0022url\u0022:\u0022\\\/\u0022,\u0022volume\u0022:600,\u0022difficulty\u0022:12},{\u0022id\u0022:\u0022k4\u0022,\u0022keyword\u0022:\u0022react rtl library\u0022,\u0022position\u0022:12,\u0022previousPosition\u0022:9,\u0022history\u0022:[8,9,9,10,9,12],\u0022url\u0022:\u0022\\\/blog\\\/rtl\u0022,\u0022volume\u0022:1300,\u0022difficulty\u0022:52,\u0022features\u0022:[\u0022images\u0022]},{\u0022id\u0022:\u0022k5\u0022,\u0022keyword\u0022:\u0022ui kit arabic\u0022,\u0022previousPosition\u0022:34,\u0022volume\u0022:800,\u0022difficulty\u0022:64,\u0022position\u0022:null},{\u0022id\u0022:\u0022k6\u0022,\u0022keyword\u0022:\u0022design tokens guide\u0022,\u0022position\u0022:18,\u0022url\u0022:\u0022\\\/docs\\\/tokens\u0022,\u0022volume\u0022:4400,\u0022difficulty\u0022:71,\u0022features\u0022:[\u0022video\u0022],\u0022previousPosition\u0022:null}],\u0022competitors\u0022:[{\u0022id\u0022:\u0022c1\u0022,\u0022domain\u0022:\u0022nasaq.dev\u0022,\u0022you\u0022:true,\u0022ranks\u0022:{\u0022k1\u0022:4,\u0022k2\u0022:2,\u0022k3\u0022:1,\u0022k4\u0022:12,\u0022k5\u0022:null,\u0022k6\u0022:18}},{\u0022id\u0022:\u0022c2\u0022,\u0022domain\u0022:\u0022rtlkit.io\u0022,\u0022ranks\u0022:{\u0022k1\u0022:3,\u0022k2\u0022:8,\u0022k3\u0022:null,\u0022k4\u0022:5,\u0022k5\u0022:11,\u0022k6\u0022:null}}],\u0022locations\u0022:[{\u0022value\u0022:\u0022sa\u0022,\u0022label\u0022:\u0022Saudi Arabia\u0022},{\u0022value\u0022:\u0022ae\u0022,\u0022label\u0022:\u0022United Arab Emirates\u0022}],\u0022defaultLocation\u0022:null,\u0022can\u0022:{\u0022add\u0022:true,\u0022remove\u0022:true,\u0022refresh\u0022:true,\u0022update\u0022:true,\u0022open\u0022:false},\u0022words\u0022:{\u0022locale\u0022:\u0022en\u0022,\u0022failed\u0022:\u0022Could not complete this. Try again.\u0022,\u0022notRanking\u0022:\u0022Not in top 100\u0022,\u0022keywordsRequired\u0022:\u0022Add at least one keyword.\u0022,\u0022urlInvalid\u0022:\u0022\\\/path or https:\\\/\\\/\\u2026\u0022,\u0022trend\u0022:\u0022Trend\u0022,\u0022up\u0022:\u0022Up {n}\u0022,\u0022down\u0022:\u0022Down {n}\u0022,\u0022same\u0022:\u0022No change\u0022,\u0022newRank\u0022:\u0022New\u0022,\u0022lostRank\u0022:\u0022Lost\u0022,\u0022keywordCount\u0022:[\u0022No keywords yet\u0022,\u00221 keyword\u0022,\u0022{n} keywords\u0022],\u0022addSubmit\u0022:[\u0022Add keyword\u0022,\u0022Add {n} keywords\u0022],\u0022removeTitle\u0022:[\u0022Stop tracking this keyword?\u0022,\u0022Stop tracking {n} keywords?\u0022],\u0022bucketCount\u0022:\u0022{label}: {n} keywords, {share}\u0022,\u0022was\u0022:\u0022was\u0022,\u0022urlEmpty\u0022:\u0022\u0022,\u0022volumePerMonth\u0022:\u0022Searches a month\u0022,\u0022ahead\u0022:[\u00221 keyword ahead of you\u0022,\u0022{n} keywords ahead of you\u0022],\u0022band\u0022:{\u0022easy\u0022:\u0022Easy\u0022,\u0022medium\u0022:\u0022Medium\u0022,\u0022hard\u0022:\u0022Hard\u0022},\u0022feature\u0022:{\u0022snippet\u0022:\u0022Snippet\u0022,\u0022paa\u0022:\u0022People also ask\u0022,\u0022images\u0022:\u0022Images\u0022,\u0022video\u0022:\u0022Video\u0022,\u0022local\u0022:\u0022Local pack\u0022,\u0022sitelinks\u0022:\u0022Sitelinks\u0022,\u0022reviews\u0022:\u0022Reviews\u0022,\u0022ads\u0022:\u0022Ads\u0022},\u0022bucket\u0022:{\u0022top3\u0022:\u0022Top 3\u0022,\u0022top10\u0022:\u00224 to 10\u0022,\u0022top100\u0022:\u002211 to 100\u0022,\u0022unranked\u0022:\u0022Not ranking\u0022}}}'))"
    x-on:nq-data-table-action="onAction($event)" x-on:nq-data-table-edit="onEdit($event)" x-on:nq-data-table-row-click="onRowClick($event)"
    x-on:add-keywords="$event.detail.wait(Promise.resolve())" x-on:remove-keywords="$event.detail.wait(Promise.resolve())" x-on:refresh-keywords="$event.detail.wait(Promise.resolve())" x-on:update-keyword="$event.detail.wait(Promise.resolve())" class="flex w-full flex-col gap-6">
    <div data-slot="metric-tiles" role="group" aria-label="Key metrics" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   data-metric="tracked" class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Tracked keywords</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <span class="flex flex-col gap-1">
                    <bdi data-slot="num" data-numeric class="tabular-nums" x-text="tiles.find((m) => m.id === 'tracked').value"></bdi>
                    <span class="flex items-center gap-1 text-caption" x-show="tiles.find((m) => m.id === 'tracked').delta !== ''" style="display: none"
                        x-bind:class="tiles.find((m) => m.id === 'tracked').tone === 'positive' ? 'text-nq-success-text' : 'text-nq-danger-text'">
                        <bdi class="tabular-nums" x-text="tiles.find((m) => m.id === 'tracked').delta"></bdi>
                        <span class="text-muted-foreground" x-text="tiles.find((m) => m.id === 'tracked').was"></span>
                    </span>
                </span>
                                    </div>
                            </div>
                    </div>
    </div>
                    <div data-slot="stat-card"   data-metric="avg" class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Average position</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <span class="flex flex-col gap-1">
                    <bdi data-slot="num" data-numeric class="tabular-nums" x-text="tiles.find((m) => m.id === 'avg').value"></bdi>
                    <span class="flex items-center gap-1 text-caption" x-show="tiles.find((m) => m.id === 'avg').delta !== ''" style="display: none"
                        x-bind:class="tiles.find((m) => m.id === 'avg').tone === 'positive' ? 'text-nq-success-text' : 'text-nq-danger-text'">
                        <bdi class="tabular-nums" x-text="tiles.find((m) => m.id === 'avg').delta"></bdi>
                        <span class="text-muted-foreground" x-text="tiles.find((m) => m.id === 'avg').was"></span>
                    </span>
                </span>
                                    </div>
                            </div>
                    </div>
    </div>
                    <div data-slot="stat-card"   data-metric="top10" class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">In the top 10</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <span class="flex flex-col gap-1">
                    <bdi data-slot="num" data-numeric class="tabular-nums" x-text="tiles.find((m) => m.id === 'top10').value"></bdi>
                    <span class="flex items-center gap-1 text-caption" x-show="tiles.find((m) => m.id === 'top10').delta !== ''" style="display: none"
                        x-bind:class="tiles.find((m) => m.id === 'top10').tone === 'positive' ? 'text-nq-success-text' : 'text-nq-danger-text'">
                        <bdi class="tabular-nums" x-text="tiles.find((m) => m.id === 'top10').delta"></bdi>
                        <span class="text-muted-foreground" x-text="tiles.find((m) => m.id === 'top10').was"></span>
                    </span>
                </span>
                                    </div>
                            </div>
                    </div>
    </div>
                    <div data-slot="stat-card"   data-metric="visibility" class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Visibility</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <span class="flex flex-col gap-1">
                    <bdi data-slot="num" data-numeric class="tabular-nums" x-text="tiles.find((m) => m.id === 'visibility').value"></bdi>
                    <span class="flex items-center gap-1 text-caption" x-show="tiles.find((m) => m.id === 'visibility').delta !== ''" style="display: none"
                        x-bind:class="tiles.find((m) => m.id === 'visibility').tone === 'positive' ? 'text-nq-success-text' : 'text-nq-danger-text'">
                        <bdi class="tabular-nums" x-text="tiles.find((m) => m.id === 'visibility').delta"></bdi>
                        <span class="text-muted-foreground" x-text="tiles.find((m) => m.id === 'visibility').was"></span>
                    </span>
                </span>
                                    </div>
                            </div>
                    </div>
    </div></div>
    <div class="grid gap-4 lg:grid-cols-3">
                    <div data-slot="time-series-panel"  x-data="nqTimeSeriesPanel('position', false)"
    class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground lg:col-span-2">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Position history</h3>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Average position of ranked keywords over time.</div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="max-w-full overflow-x-auto">
                    <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022position\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="Metric" x-model="pressed" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('position')"      data-pressed         class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Avg. position</button>
                                                    <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('top10')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">In top 10</button>
</div>
                </div>
                                </div>
                                                    <div class="contents" data-metric="position" x-show="metric === 'position'" >
                    <div data-slot="time-series-total" class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="text-caption text-muted-foreground">Average</span>
                        <span class="text-h2 text-foreground tabular-nums">
                            <bdi data-slot="num" data-numeric="" class="tabular-nums">8.2</bdi>
                        </span>
                                            </div>
                    <div data-slot="chart"  role="img" aria-label="Avg. position, Sep 23 to Sep 29"   style="--color-current: var(--nq-info); --color-previous: var(--muted-foreground)"     class="flex w-full text-caption [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-dot]:stroke-card [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector]:stroke-card [&_.recharts-surface]:outline-hidden aspect-auto flex-col justify-start gap-2 h-64">
    <div class="flex min-h-0 flex-1 gap-2">
                            <div aria-hidden="true" class="relative w-11 shrink-0 text-end text-muted-foreground">
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 15.79%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">7</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 42.11%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">8</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 68.42%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">9</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 94.74%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">10</bdi>
                                                                            </span>
                                                            </div>
                            <div data-slot="time-series-plot" class="relative min-w-0 flex-1" x-data="nqTimeSeriesChart(JSON.parse('[{\u0022x\u0022:0,\u0022y\u0022:73.68,\u0022date\u0022:\u0022Sep 23\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00229.2\u0022}]},{\u0022x\u0022:16.67,\u0022y\u0022:63.16,\u0022date\u0022:\u0022Sep 24\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00228.8\u0022}]},{\u0022x\u0022:33.33,\u0022y\u0022:52.63,\u0022date\u0022:\u0022Sep 25\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00228.4\u0022}]},{\u0022x\u0022:50,\u0022y\u0022:44.74,\u0022date\u0022:\u0022Sep 26\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00228.1\u0022}]},{\u0022x\u0022:66.67,\u0022y\u0022:36.84,\u0022date\u0022:\u0022Sep 27\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00227.8\u0022}]},{\u0022x\u0022:83.33,\u0022y\u0022:31.58,\u0022date\u0022:\u0022Sep 28\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00227.6\u0022}]},{\u0022x\u0022:100,\u0022y\u0022:26.32,\u0022date\u0022:\u0022Sep 29\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Avg. position\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00227.4\u0022}]}]'))" x-on:pointermove="move($event)" x-on:pointerleave="leave()">
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 15.79%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 42.11%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 68.42%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 94.74%"></span>
                                                                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                    <defs>
                                        <linearGradient id="nq-ts-a912ff51" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" style="stop-color: var(--color-current); stop-opacity: 0.28" />
                                            <stop offset="100%" style="stop-color: var(--color-current); stop-opacity: 0.02" />
                                        </linearGradient>
                                    </defs>
                                                                                                            <path d="M0,73.68C5.56,70.17,11.11,66.67,16.67,63.16C22.22,59.65,27.78,55.7,33.33,52.63C38.89,49.56,44.44,47.37,50,44.74C55.56,42.11,61.11,39.03,66.67,36.84C72.22,34.65,77.78,33.33,83.33,31.58C88.89,29.83,94.44,28.07,100,26.32L100,100L0,100Z" fill="url(#nq-ts-a912ff51)" stroke="none" />
                                    <path data-slot="time-series-current" d="M0,73.68C5.56,70.17,11.11,66.67,16.67,63.16C22.22,59.65,27.78,55.7,33.33,52.63C38.89,49.56,44.44,47.37,50,44.74C55.56,42.11,61.11,39.03,66.67,36.84C72.22,34.65,77.78,33.33,83.33,31.58C88.89,29.83,94.44,28.07,100,26.32" fill="none" stroke="var(--color-current)" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                                </svg>
                                                                <div class="contents" x-show="hover !== null" style="display: none">
                                    <span aria-hidden="true" class="pointer-events-none absolute inset-y-0 w-px bg-border" x-bind:style="lineStyle"></span>
                                    <span aria-hidden="true" data-slot="chart-dot" class="pointer-events-none absolute size-2 -translate-y-1/2 rounded-full bg-[var(--color-current)] ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="dotStyle"></span>
                                    <div class="pointer-events-none absolute top-0 z-10 ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="tipStyle">
                                        <div data-slot="chart-tooltip" dir="ltr" class="grid min-w-32 gap-1.5 rounded-control border border-border bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md">
                                            <div class="text-label" x-text="tip.date"></div>
                                            <div class="grid gap-1">
                                                <template x-for="row in tip.rows" x-bind:key="row.k">
                                                    <div class="flex items-center gap-2" x-show="row.k === 'current' || compare">
                                                        <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" x-bind:style="{ backgroundColor: row.color }"></span>
                                                        <span class="text-muted-foreground" x-text="row.label"></span>
                                                        <span class="ms-auto ps-3 text-label tabular-nums" x-text="row.text"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="relative h-4 ms-[3.25rem]">
                                                                                            <span class="absolute top-0 whitespace-nowrap start-0"
                                    >Sep 23</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 16.67%" >Sep 24</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 33.33%" >Sep 25</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 66.67%" >Sep 27</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 83.33%" >Sep 28</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap end-0"
                                    >Sep 29</span>
                                                    </div>
</div>
                </div>
                                            <div class="contents" data-metric="top10" x-show="metric === 'top10'"  style="display: none" >
                    <div data-slot="time-series-total" class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="text-caption text-muted-foreground">Average</span>
                        <span class="text-h2 text-foreground tabular-nums">
                            <bdi data-slot="num" data-numeric="" class="tabular-nums">3</bdi>
                        </span>
                                            </div>
                    <div data-slot="chart"  role="img" aria-label="In top 10, Sep 23 to Sep 29"   style="--color-current: var(--nq-success); --color-previous: var(--muted-foreground)"     class="flex w-full text-caption [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-dot]:stroke-card [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector]:stroke-card [&_.recharts-surface]:outline-hidden aspect-auto flex-col justify-start gap-2 h-64">
    <div class="flex min-h-0 flex-1 gap-2">
                            <div aria-hidden="true" class="relative w-11 shrink-0 text-end text-muted-foreground">
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 100%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">0</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 66.67%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 33.33%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 0%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">3</bdi>
                                                                            </span>
                                                            </div>
                            <div data-slot="time-series-plot" class="relative min-w-0 flex-1" x-data="nqTimeSeriesChart(JSON.parse('[{\u0022x\u0022:0,\u0022y\u0022:33.33,\u0022date\u0022:\u0022Sep 23\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00222\u0022}]},{\u0022x\u0022:16.67,\u0022y\u0022:33.33,\u0022date\u0022:\u0022Sep 24\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00222\u0022}]},{\u0022x\u0022:33.33,\u0022y\u0022:0,\u0022date\u0022:\u0022Sep 25\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223\u0022}]},{\u0022x\u0022:50,\u0022y\u0022:0,\u0022date\u0022:\u0022Sep 26\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223\u0022}]},{\u0022x\u0022:66.67,\u0022y\u0022:0,\u0022date\u0022:\u0022Sep 27\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223\u0022}]},{\u0022x\u0022:83.33,\u0022y\u0022:0,\u0022date\u0022:\u0022Sep 28\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223\u0022}]},{\u0022x\u0022:100,\u0022y\u0022:0,\u0022date\u0022:\u0022Sep 29\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022In top 10\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223\u0022}]}]'))" x-on:pointermove="move($event)" x-on:pointerleave="leave()">
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 100%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 66.67%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 33.33%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 0%"></span>
                                                                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                    <defs>
                                        <linearGradient id="nq-ts-18498be1" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" style="stop-color: var(--color-current); stop-opacity: 0.28" />
                                            <stop offset="100%" style="stop-color: var(--color-current); stop-opacity: 0.02" />
                                        </linearGradient>
                                    </defs>
                                                                                                            <path d="M0,33.33C5.56,33.33,11.11,33.33,16.67,33.33C22.22,33.33,27.78,0,33.33,0C38.89,0,44.44,0,50,0C55.56,0,61.11,0,66.67,0C72.22,0,77.78,0,83.33,0C88.89,0,94.44,0,100,0L100,100L0,100Z" fill="url(#nq-ts-18498be1)" stroke="none" />
                                    <path data-slot="time-series-current" d="M0,33.33C5.56,33.33,11.11,33.33,16.67,33.33C22.22,33.33,27.78,0,33.33,0C38.89,0,44.44,0,50,0C55.56,0,61.11,0,66.67,0C72.22,0,77.78,0,83.33,0C88.89,0,94.44,0,100,0" fill="none" stroke="var(--color-current)" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                                </svg>
                                                                <div class="contents" x-show="hover !== null" style="display: none">
                                    <span aria-hidden="true" class="pointer-events-none absolute inset-y-0 w-px bg-border" x-bind:style="lineStyle"></span>
                                    <span aria-hidden="true" data-slot="chart-dot" class="pointer-events-none absolute size-2 -translate-y-1/2 rounded-full bg-[var(--color-current)] ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="dotStyle"></span>
                                    <div class="pointer-events-none absolute top-0 z-10 ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="tipStyle">
                                        <div data-slot="chart-tooltip" dir="ltr" class="grid min-w-32 gap-1.5 rounded-control border border-border bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md">
                                            <div class="text-label" x-text="tip.date"></div>
                                            <div class="grid gap-1">
                                                <template x-for="row in tip.rows" x-bind:key="row.k">
                                                    <div class="flex items-center gap-2" x-show="row.k === 'current' || compare">
                                                        <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" x-bind:style="{ backgroundColor: row.color }"></span>
                                                        <span class="text-muted-foreground" x-text="row.label"></span>
                                                        <span class="ms-auto ps-3 text-label tabular-nums" x-text="row.text"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="relative h-4 ms-[3.25rem]">
                                                                                            <span class="absolute top-0 whitespace-nowrap start-0"
                                    >Sep 23</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 16.67%" >Sep 24</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 33.33%" >Sep 25</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 66.67%" >Sep 27</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 83.33%" >Sep 28</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap end-0"
                                    >Sep 29</span>
                                                    </div>
</div>
                </div></div>
</div>
                <div class="flex flex-col gap-4">
            <div data-slot="rank-distribution" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Ranking distribution</h3>
                    <div data-slot="card-description" class="text-body-sm text-muted-foreground">How many keywords sit in each band of the results.</div></div>
                <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div role="img" x-bind:aria-label="distributionSummary" class="flex h-3 w-full overflow-hidden rounded-full bg-nq-surface-soft">
                        <template x-for="b in buckets" x-bind:key="b.id">
                            <span x-show="b.shown" style="display: none" x-bind:data-bucket="b.id" x-bind:class="'h-full ' + b.bar" x-bind:style="{ width: b.width }"></span>
                        </template>
                    </div>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-3">
                        <template x-for="b in buckets" x-bind:key="b.id">
                            <li x-bind:data-bucket="b.id" class="flex items-start gap-2">
                                <span aria-hidden="true" x-bind:class="'mt-1.5 size-2.5 shrink-0 rounded-full ' + b.bar"></span>
                                <div class="flex min-w-0 flex-col leading-tight">
                                    <span class="text-caption text-muted-foreground" x-text="b.label"></span>
                                    <span class="text-label text-foreground">
                                        <bdi data-slot="num" data-numeric class="tabular-nums" x-text="b.count"></bdi>
                                        <span class="text-caption font-normal text-muted-foreground"> <bdi data-slot="num" data-numeric class="tabular-nums" x-text="b.share"></bdi></span>
                                    </span>
                                </div>
                            </li>
                        </template>
                    </ul></div></div>
            <div data-slot="keyword-movers" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Biggest movers</h3></div>
                <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex flex-col gap-1.5">
                            <span class="text-caption font-medium text-muted-foreground">Gained</span>
                            <span class="text-caption text-muted-foreground" x-show="movers.gainers.length === 0" style="display: none">No movement yet</span>
                            <ul class="flex flex-col gap-1" x-show="movers.gainers.length > 0" style="display: none">
                                <template x-for="k in movers.gainers" x-bind:key="k.id">
                                    <li class="flex items-center justify-between gap-2 text-body-sm">
                                        <span dir="auto" class="min-w-0 truncate text-foreground" x-text="k.keyword"></span>
                                        <span x-bind:data-direction="k.dir" x-bind:class="'inline-flex shrink-0 items-center gap-0.5 text-caption font-medium ' + (k.dir === 'up' ? 'text-nq-success-text' : 'text-nq-danger-text')" x-bind:title="k.changeText">
                                            <svg aria-hidden="true" x-show="k.dir === 'up'" 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>                                            <svg aria-hidden="true" x-show="k.dir === 'down'" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="k.deltaText"></bdi>
                                            <span class="sr-only" x-text="k.changeText"></span>
                                        </span>
                                    </li>
                                </template>
                            </ul>
                        </div>
                                            <div class="flex flex-col gap-1.5">
                            <span class="text-caption font-medium text-muted-foreground">Lost</span>
                            <span class="text-caption text-muted-foreground" x-show="movers.losers.length === 0" style="display: none">No movement yet</span>
                            <ul class="flex flex-col gap-1" x-show="movers.losers.length > 0" style="display: none">
                                <template x-for="k in movers.losers" x-bind:key="k.id">
                                    <li class="flex items-center justify-between gap-2 text-body-sm">
                                        <span dir="auto" class="min-w-0 truncate text-foreground" x-text="k.keyword"></span>
                                        <span x-bind:data-direction="k.dir" x-bind:class="'inline-flex shrink-0 items-center gap-0.5 text-caption font-medium ' + (k.dir === 'up' ? 'text-nq-success-text' : 'text-nq-danger-text')" x-bind:title="k.changeText">
                                            <svg aria-hidden="true" x-show="k.dir === 'up'" 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>                                            <svg aria-hidden="true" x-show="k.dir === 'down'" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="k.deltaText"></bdi>
                                            <span class="sr-only" x-text="k.changeText"></span>
                                        </span>
                                    </li>
                                </template>
                            </ul>
                        </div></div></div>
        </div>
    </div>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('keywords')" x-modelable="value" x-id="['nq-tabs']" class="flex flex-col gap-4">
    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border">
    <button type="button" data-slot="tabs-tab" x-bind="tab('keywords')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5">Keywords</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('competitors')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5">Competitors</button>
                        <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] bottom-0 h-0.5 rounded-full bg-primary"></span>
</div>
        <div data-slot="tabs-panel" x-bind="panel('keywords')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Keywords</h3>
                    <div data-slot="card-description" class="text-body-sm text-muted-foreground">Each keyword&#039;s position in the results, how it moved and what it could bring.</div></div>
                <div data-slot="card-content" class="px-4 flex flex-col gap-3"><span data-slot="status" data-tone="danger" role="alert" x-show="notice" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 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>        <span class="truncate" ><span x-text="notice"></span></span>
</span>
                    <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022keyword\u0022,\u0022header\u0022:\u0022Keyword\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022position\u0022,\u0022header\u0022:\u0022Position\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022best\u0022,\u0022header\u0022:\u0022Best\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022trend\u0022,\u0022header\u0022:\u0022Trend\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022url\u0022,\u0022header\u0022:\u0022Ranking URL\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022edit\u0022:\u0022text\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022volume\u0022,\u0022header\u0022:\u0022Volume\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022difficulty\u0022,\u0022header\u0022:\u0022Difficulty\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022features\u0022,\u0022header\u0022:\u0022SERP features\u0022,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022keyword\u0022,\u0022selectable\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022refresh\u0022,\u0022group\u0022:\u0022a\u0022},{\u0022id\u0022:\u0022remove\u0022,\u0022group\u0022:\u0022z\u0022}],\u0022actionsKey\u0022:\u0022actions\u0022,\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="tableRows" 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="Filter keywords…" aria-label="Filter keywords…" 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="button"
     type="button"                         data-action="add" x-on:click="openAdd()" 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 ms-auto">
        <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 5v14"/>
</svg>Add keywords</button>
                                                                                                    <button data-slot="button"
     type="button"                         data-action="refresh" aria-label="Check now" title="Check now" x-on:click="checkAll()" x-bind:aria-busy="busy ? &#039;true&#039; : null" 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 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="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg></button>
                    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="selectedText()" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="selectedText()"></span>
            <button data-slot="button"
     type="button"                         x-on:click="askRemove(selectedIds()); clearSelection()" 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="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Stop tracking</button>            <button type="button" aria-label="Clear selection" x-on:click="clearSelection()"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_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="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Keywords"                 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="Keywords"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 2) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                            <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                            <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all rows on this page" x-on:click="togglePage()"
                                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null"
                                aria-checked="false" 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 after:absolute after:-inset-1 align-middle">
                                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                                </span>
                            </button>
                        </div>
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="keyword" x-show="shown['keyword']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('keyword')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('keyword', $event.shiftKey)"
                                    x-bind:class="sortOf('keyword') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Keyword</span>
                                    <svg aria-hidden="true" x-show="! sortOf('keyword')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('keyword') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('keyword') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="position" x-show="shown['position']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('position')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('position', $event.shiftKey)"
                                    x-bind:class="sortOf('position') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Position</span>
                                    <svg aria-hidden="true" x-show="! sortOf('position')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('position') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('position') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="best" x-show="shown['best']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('best')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('best', $event.shiftKey)"
                                    x-bind:class="sortOf('best') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Best</span>
                                    <svg aria-hidden="true" x-show="! sortOf('best')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('best') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('best') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="trend" x-show="shown['trend']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Trend
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="url" x-show="shown['url']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('url')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('url', $event.shiftKey)"
                                    x-bind:class="sortOf('url') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Ranking URL</span>
                                    <svg aria-hidden="true" x-show="! sortOf('url')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('url') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('url') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="volume" x-show="shown['volume']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('volume')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('volume', $event.shiftKey)"
                                    x-bind:class="sortOf('volume') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Volume</span>
                                    <svg aria-hidden="true" x-show="! sortOf('volume')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('volume') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('volume') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="difficulty" x-show="shown['difficulty']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('difficulty')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('difficulty', $event.shiftKey)"
                                    x-bind:class="sortOf('difficulty') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Difficulty</span>
                                    <svg aria-hidden="true" x-show="! sortOf('difficulty')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('difficulty') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('difficulty') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="features" x-show="shown['features']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            SERP features
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" 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>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" 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 keywords tracked</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)"
                                        aria-checked="false" x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                                        x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" 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 after:absolute after:-inset-1 align-middle">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><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="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="keyword" x-show="shown['keyword']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;keyword&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="position" x-show="shown['position']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="inline-flex items-center justify-end gap-2">
                                <bdi data-slot="num" data-numeric class="tabular-nums text-label font-semibold text-foreground" x-show="row.ranked" x-text="row.positionText" style="display: none"></bdi>
                                <span class="text-caption text-muted-foreground" x-show="! row.ranked" x-text="row.positionText" style="display: none"></span>
                                <span data-slot="badge"  style="display: none"     x-show="row.dir === &#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"><span x-text="row.changeText"></span></span>
                                <span data-slot="badge"  style="display: none"     x-show="row.dir === &#039;lost&#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"><span x-text="row.changeText"></span></span>
                                <span class="inline-flex items-center gap-0.5 text-caption text-muted-foreground" x-show="row.dir === 'same'" x-bind:title="row.changeText" style="display: none">
                                    <svg aria-hidden="true" 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="M5 12h14"/>
</svg>                                    <span class="sr-only" x-text="row.changeText"></span>
                                </span>
                                <span x-show="row.dir === 'up' || row.dir === 'down'" style="display: none" x-bind:data-direction="row.dir" x-bind:title="row.changeText"
                                    x-bind:class="'inline-flex items-center gap-0.5 text-caption font-medium ' + (row.dir === 'up' ? 'text-nq-success-text' : 'text-nq-danger-text')">
                                    <svg aria-hidden="true" x-show="row.dir === 'up'" 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>                                    <svg aria-hidden="true" x-show="row.dir === 'down'" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                    <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.deltaText"></bdi>
                                    <span class="sr-only" x-text="row.changeText"></span>
                                </span>
                            </span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="best" x-show="shown['best']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.bestText"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="trend" x-show="shown['trend']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <svg x-show="row.trendPath !== ''" style="display: none" viewBox="0 0 96 28" role="img" x-bind:aria-label="row.trendLabel" class="h-7 w-24 overflow-visible rtl:-scale-x-100">
                                <path x-bind:d="row.trendPath" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" x-bind:stroke="row.trendColor" />
                            </svg>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="url" x-show="shown['url']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;url&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;url&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;url&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;url&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;url&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;url&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;url&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;url&#039;)) ? 'bg-nq-danger-soft' : ''"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-nq-focus">
                                                                                                                        <template x-if="isEditing(row, col(&#039;url&#039;))">
                                                <div>
                                                                                                            <input type="text" x-model="draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;url&#039;))" x-bind:aria-invalid="invalid ? 'true' : null"
                                                            x-on:keydown.enter.prevent="commitEdit(row, col(&#039;url&#039;), 'down', $event)" x-on:keydown.tab="if (! commitEdit(row, col(&#039;url&#039;), 'right', $event)) $event.preventDefault()"
                                                            x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="commitEdit(row, col(&#039;url&#039;), 'none', $event)"
                                                            class="w-full min-w-0 rounded-control border border-input bg-card px-2 text-body-sm text-foreground outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus h-control-sm ">
                                                        <span role="alert" x-show="invalid" x-text="invalid" style="display: none" class="absolute start-0 top-full z-20 mt-1 max-w-64 rounded-control border border-nq-danger-text/30 bg-card px-2 py-1 text-caption whitespace-normal text-nq-danger-text shadow-md"></span>
                                                                                                    </div>
                                            </template>
                                                                                <span  x-show="! isEditing(row, col(&#039;url&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;url&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;url&#039;))"></span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;url&#039;))" style="display: none" class="size-3.5 shrink-0 animate-spin text-muted-foreground motion-reduce:animate-none" />
                                                <span x-show="failure(row, col(&#039;url&#039;))" x-bind:title="failure(row, col(&#039;url&#039;))" style="display: none" class="inline-flex shrink-0 items-center text-nq-danger-text">
                                                    <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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>                                                    <span class="sr-only" x-text="failText(row, col(&#039;url&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="volume" x-show="shown['volume']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-bind:title="'Searches a month'" x-text="row.volumeText"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="difficulty" x-show="shown['difficulty']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span data-slot="badge"  style="display: none"     x-show="row.band === &#039;easy&#039;" x-bind:title="row.difficultyText" 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"><span x-text="row.difficultyText"></span></span>
                            <span data-slot="badge"  style="display: none"     x-show="row.band === &#039;medium&#039;" x-bind:title="row.difficultyText" 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"><span x-text="row.difficultyText"></span></span>
                            <span data-slot="badge"  style="display: none"     x-show="row.band === &#039;hard&#039;" x-bind:title="row.difficultyText" 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"><span x-text="row.difficultyText"></span></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="features" x-show="shown['features']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="flex flex-wrap gap-1">
                                <template x-for="f in row.features" x-bind:key="f.id">
                                    <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-border text-muted-foreground"><span x-text="f.label"></span></span>
                                </template>
                            </span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-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 opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse: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;refresh&#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">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg>                                                                Check again</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="danger" x-bind="item"
        x-on:click="act(&#039;remove&#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 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">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                                                Stop tracking</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <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="ctxRow && actionOn(ctxRow, 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;refresh&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 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">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg>                                Check again</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 1)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 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="danger" x-bind="item"
        x-on:click="act(&#039;remove&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 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 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">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                Stop tracking</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div></div></div>
                    <div data-slot="tabs-panel" x-bind="panel('competitors')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="competitor-comparison" class="flex flex-col gap-4">
                    <div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Competitors</h3>
                            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Where you and your competitors rank for the same keywords.</div></div>
                        <div data-slot="card-content" class="px-4 flex flex-col gap-3"><div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022domain\u0022,\u0022header\u0022:\u0022Domain\u0022,\u0022sortable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022visibility\u0022,\u0022header\u0022:\u0022Visibility\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022avg\u0022,\u0022header\u0022:\u0022Avg. position\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022top10\u0022,\u0022header\u0022:\u0022Top 10\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022domain\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="summaryRows" class="flex min-w-0 flex-col gap-3">
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Competitors"                 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="Competitors"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 0) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="domain" x-show="shown['domain']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('domain')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('domain', $event.shiftKey)"
                                    x-bind:class="sortOf('domain') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Domain</span>
                                    <svg aria-hidden="true" x-show="! sortOf('domain')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('domain') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('domain') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="visibility" x-show="shown['visibility']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('visibility')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('visibility', $event.shiftKey)"
                                    x-bind:class="sortOf('visibility') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Visibility</span>
                                    <svg aria-hidden="true" x-show="! sortOf('visibility')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('visibility') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('visibility') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="avg" x-show="shown['avg']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('avg')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('avg', $event.shiftKey)"
                                    x-bind:class="sortOf('avg') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Avg. position</span>
                                    <svg aria-hidden="true" x-show="! sortOf('avg')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('avg') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('avg') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="top10" x-show="shown['top10']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('top10')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('top10', $event.shiftKey)"
                                    x-bind:class="sortOf('top10') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Top 10</span>
                                    <svg aria-hidden="true" x-show="! sortOf('top10')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('top10') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('top10') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                        </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" 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>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" 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 competitors added</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                                                                                    x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="domain" x-show="shown['domain']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="flex items-center gap-2">
                                        <bdi dir="ltr" class="text-label text-foreground" x-text="row.domain"></bdi>
                                        <span data-slot="badge"  style="display: none"     x-show="row.you" 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">You</span>
                                    </span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="visibility" x-show="shown['visibility']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.visibilityText"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="avg" x-show="shown['avg']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.avgText"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="top10" x-show="shown['top10']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.top10Text"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
                            <ul class="flex flex-wrap gap-2 text-caption text-muted-foreground">
                                <template x-for="r in summaryRows.filter((x) => x.other)" x-bind:key="r.id">
                                    <li><bdi dir="ltr" x-text="r.domain"></bdi>: <span x-text="r.aheadText"></span></li>
                                </template>
                            </ul></div></div>
                    <div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Keyword by keyword</h3>
                            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Lower is better</div></div>
                        <div data-slot="card-content" class="px-4"><div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022keyword\u0022,\u0022header\u0022:\u0022Keyword\u0022,\u0022sortable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022c0\u0022,\u0022header\u0022:\u0022nasaq.dev\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022c1\u0022,\u0022header\u0022:\u0022rtlkit.io\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022keyword\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="matrixRows" class="flex min-w-0 flex-col gap-3">
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Keyword by keyword"                 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="Keyword by keyword"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 0) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="keyword" x-show="shown['keyword']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('keyword')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('keyword', $event.shiftKey)"
                                    x-bind:class="sortOf('keyword') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Keyword</span>
                                    <svg aria-hidden="true" x-show="! sortOf('keyword')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('keyword') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('keyword') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="c0" x-show="shown['c0']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('c0')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('c0', $event.shiftKey)"
                                    x-bind:class="sortOf('c0') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >nasaq.dev</span>
                                    <svg aria-hidden="true" x-show="! sortOf('c0')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('c0') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('c0') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="c1" x-show="shown['c1']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('c1')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('c1', $event.shiftKey)"
                                    x-bind:class="sortOf('c1') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >rtlkit.io</span>
                                    <svg aria-hidden="true" x-show="! sortOf('c1')" class="size-3.5 shrink-0 opacity-40" 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('c1') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('c1') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                        </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" 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>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" 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 keywords tracked</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                                                                                    x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="keyword" x-show="shown['keyword']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span dir="auto" class="block max-w-[24ch] truncate text-label text-foreground" x-text="row.keyword"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="c0" x-show="shown['c0']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-bind:class="row.c0Best ? 'font-semibold text-nq-success-text' : ''" x-text="row.c0Text"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="c1" x-show="shown['c1']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <bdi data-slot="num" data-numeric class="tabular-nums" x-bind:class="row.c1Best ? 'font-semibold text-nq-success-text' : ''" x-text="row.c1Text"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div></div>
                </div></div>
</div>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="addOpen" 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="add-keywords-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)] 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 max-w-lg">
            <form x-on:submit.prevent="submitAdd()" class="flex flex-col gap-4" novalidate>
                    <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">Add keywords</h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">One keyword per line, or separated by commas. They are checked for the location and device you pick.</p></div>
                    <template x-if="addError !== null">
                        <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="addError"></span></div>
            </div>
    </div>
                    </template>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="addBad" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Keywords</label>
                        <textarea data-slot="textarea"
                x-model="addText" dir="auto" rows="5" placeholder="rtl react components
nasaq design system" 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 data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="addMsg"></span></div>
                        <span class="text-caption text-muted-foreground" aria-live="polite" x-text="addCountText"></span>
</div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Location</label>
                            <div data-slot="select" x-data="nqSelect('sa', false)" x-modelable="value" x-id="['nq-select']" x-model="addLocation" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                                <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('sa', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('sa')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Saudi Arabia</span>
</div>
                                                                            <div data-slot="select-item" x-bind="item('ae', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('ae')" x-cloak class="contents"><svg class="size-4" 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>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">United Arab Emirates</span>
</div>
    </div>
</template>
    </div>
</div>
                        <div class="flex flex-col gap-1.5">
                            <span class="text-label text-foreground">Device</span>
                            <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022desktop\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="Device" x-model="deviceSel" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('desktop')"      data-pressed         class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Desktop</button>
                                <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('mobile')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Mobile</button>
</div>
                        </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="addOpen = false" x-bind:disabled="busy ? &#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"                         x-bind:aria-busy="busy ? &#039;true&#039; : null" x-bind:data-disabled="busy ? &#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 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="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>                            <span x-text="addLabel"></span></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 data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="removeOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" 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="alert-dialog-content" 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-md 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="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><span x-text="removeTitle"></span></h2>
                    <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground">Its history is kept for 30 days in case you add it back.</p></div>
                <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="removeOpen = false" 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="button"                         data-action="confirm-remove" x-on:click="confirmRemove()" 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)]">
        Stop tracking</button></div>
        </div>
    </div>
</template>
</div>
    </div>
```