# SeoPageList

> A pages list with SEO score, open-issue count, index status and Core Web Vitals, plus a per-page issue checklist with fix hints.

Source: https://docs.nasaqui.com/components/seo-pages

## Install

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

SeoPageList lists crawled pages with a 0 to 100 SEO score, the number of open issues, index status and the three Core Web Vitals. Opening a page shows SeoIssueChecklist: each issue has a severity, a plain explanation and a fix hint, and can be ticked off as fixed, which raises the score at once. The list is a DataTable, so sorting, search, paging and row actions come with it.

## When to use

- A site audit screen after a crawl.
- A marketing dashboard that needs to show which pages need work first.

## When not to use

- One page's search snippet: use [`SeoPreview`](https://docs.nasaqui.com/components/seo-preview).
- Clicks and impressions: use [`SearchPerformanceTable`](https://docs.nasaqui.com/components/search-performance-table).

## Import

```tsx
import { SeoIssueChecklist, SeoPageList } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
import { SeoPageList, type SeoPageRow } from "@fadymondy/nasaq/web";

export function Audit({ pages }: { pages: SeoPageRow[] }) {
  return <SeoPageList pages={pages} onOpen={(p) => console.log(p.url)} onRecrawl={async (p) => {}} />;
}
```

## Anatomy

```
SeoPageList          data-slot="seo-page-list"   (Card + DataTable)
  toolbar            search, index status facet
  row                URL, score meter, issues, index status, LCP, INP, CLS, crawled
SeoIssueChecklist    data-slot="seo-issue-checklist"
  issue              checkbox, severity, title, fix hint (collapsible)
```

## API

### SeoPageList

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `pages` | `SeoPageRow[]` | required | Rows. |
| `onOpen` | `(page) => void` | none | Row click and the Open action. |
| `onRecrawl` | `(page) => Promise<void \| { error?: string }>` | none | Adds a Recrawl action. |
| `onRequestIndexing` | `(page) => Promise<void \| { error?: string }>` | none | Adds a Request indexing action for pages not indexed. |
| `catalog` | `Record<string, SeoIssueKind>` | `SEO_ISSUE_CATALOG` | Accepted for symmetry; the list only counts issues, the checklist reads it. |
| `title / description` | `ReactNode` | built-in | Header. |
| `pageSize` | `number` | `8` | Rows per page. |
| `loading / error / onRetry` | | none | Loading, failure and retry states. |
| `className` | `string` | none | Root classes. |
| `labels` | `Partial<SeoPagesLabels>` | none | Strings. |

### SeoPageRow

`{ id, url, title?, indexStatus: "indexed" | "not-indexed" | "blocked" | "pending", issues: SeoIssue[], vitals?: { LCP?, INP?, CLS? }, lastCrawled? }`.

### SeoIssueChecklist

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `issues` | `SeoIssue[]` | required | `{ id, code, severity, fixed?, detail? }`; severity is error, warning or info. |
| `url` | `string` | none | Shown in the header. |
| `onToggleFixed` | `(issue, fixed) => Promise<Result>` | none | Makes the checkboxes live. `Result` is `void` or `{ error?: string }`. |
| `catalog` | `Record<string, SeoIssueKind>` | `SEO_ISSUE_CATALOG` | Titles and hints. |
| `title` | `ReactNode` | built-in | Header. |
| `className / labels` | | none | Classes and strings. |

### Helpers

`seoScore(issues)` is 100 minus the weighted open issues (`SEVERITY_WEIGHT`), never below 0. `siteScore(pages)` averages it. `scoreBand(score)` gives good, fair or poor. `openIssues`, `issueCounts` and `sortIssues` (most severe first) work on `SeoIssue[]`.

## Examples

A checklist next to the preview:

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

<SeoIssueChecklist url="https://example.com/pricing" issues={issues} onToggleFixed={async (issue, fixed) => { await save(issue.id, fixed); }} />;
```

Your own issue codes:

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

<SeoIssueChecklist issues={issues} catalog={{ "missing-hreflang": { severity: "warning", en: { title: "Missing hreflang", why: "Search engines cannot match language versions.", fix: "Add an hreflang link per language." }, ar: { title: "hreflang مفقود", why: "لا تستطيع محركات البحث مطابقة نسخ اللغات.", fix: "أضف رابط hreflang لكل لغة." } } }} />;
```

## Accessibility

| Key | Action |
| --- | --- |
| Tab | Move through rows, actions and checkboxes. |
| Space | Tick or untick an issue. |
| Enter | Open the row or expand a hint. |

The score is a meter with a spoken value and a band word; severity is a word plus an icon, not colour alone.

## RTL & i18n

URLs are left-to-right inside the RTL layout. Numbers use Latin digits. Built-in English and Arabic; issue titles in `SEO_ISSUE_CATALOG` are localised, and `labels` overrides the rest.

## Styling & tokens

Score bands use the success, warning and danger tokens. All spacing is logical.

## Do / Don't

- Do sort worst first by default; teams fix the top of the list.
- Do give every issue a fix hint.
- Don't treat the score as a ranking prediction: it is a to-do measure.

## Related

- [SeoPreview](https://docs.nasaqui.com/components/seo-preview)
- [KeywordTracker](https://docs.nasaqui.com/components/keyword-tracker)

## Lab

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

## Code

### React

```tsx
import { SeoPageList, type SeoPageRow } from "@fadymondy/nasaq/web";

export function Audit({ pages }: { pages: SeoPageRow[] }) {
  return <SeoPageList pages={pages} onOpen={(p) => console.log(p.url)} onRecrawl={async (p) => {}} />;
}
```

### shadcn

```tsx
import { SeoPageList, type SeoPageRow } from "@/components/ui/seo-pages";

export function Audit({ pages }: { pages: SeoPageRow[] }) {
  return <SeoPageList pages={pages} onOpen={(p) => console.log(p.url)} onRecrawl={async (p) => {}} />;
}
```

### Vue

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

const pages: SeoPageRow[] = [
  {
    id: "p1",
    url: "https://nasaq.dev/",
    title: "Nasaq: the Arabic design system",
    indexStatus: "indexed",
    issues: [{ id: "i1", code: "og-image-missing", severity: "info" }],
    vitals: { LCP: 1900, INP: 120, CLS: 0.04 },
    lastCrawled: "2026-09-29T06:00:00Z",
  },
  {
    id: "p2",
    url: "https://nasaq.dev/pricing",
    title: "Pricing",
    indexStatus: "not-indexed",
    issues: [
      { id: "i2", code: "description-missing", severity: "warning" },
      { id: "i3", code: "alt-missing", severity: "warning", detail: "3 images have no alt text" },
    ],
    vitals: { LCP: 3100, INP: 240, CLS: 0.08 },
    lastCrawled: "2026-09-28T09:00:00Z",
  },
  {
    id: "p3",
    url: "https://nasaq.dev/draft",
    indexStatus: "blocked",
    issues: [
      { id: "i4", code: "title-missing", severity: "error" },
      { id: "i5", code: "noindex", severity: "error" },
      { id: "i6", code: "h1-missing", severity: "error" },
    ],
    lastCrawled: "2026-09-25T09:00:00Z",
  },
];

async function recrawl(_page: SeoPageRow) {}
async function requestIndexing(_page: SeoPageRow) {}
</script>

<template>
  <NqSeoPageList :pages="pages" :on-open="(p) => console.log(p.url)" :on-recrawl="recrawl" :on-request-indexing="requestIndexing" />
</template>
```

### Blade

```blade
@php
    $pages = [
        ['id' => 'p1', 'url' => 'https://nasaq.dev/', 'title' => 'Nasaq: the Arabic design system', 'indexStatus' => 'indexed', 'issues' => [['id' => 'i1', 'code' => 'og-image-missing', 'severity' => 'info']],
            'vitals' => ['LCP' => 1900, 'INP' => 120, 'CLS' => 0.04], 'lastCrawled' => '2026-09-29T06:00:00Z'],
        ['id' => 'p2', 'url' => 'https://nasaq.dev/pricing', 'title' => 'Pricing', 'indexStatus' => 'not-indexed', 'issues' => [
            ['id' => 'i2', 'code' => 'description-missing', 'severity' => 'warning'],
            ['id' => 'i3', 'code' => 'alt-missing', 'severity' => 'warning', 'detail' => '3 images have no alt text'],
        ], 'vitals' => ['LCP' => 3100, 'INP' => 240, 'CLS' => 0.08], 'lastCrawled' => '2026-09-28T09:00:00Z'],
        ['id' => 'p3', 'url' => 'https://nasaq.dev/draft', 'indexStatus' => 'blocked', 'issues' => [
            ['id' => 'i4', 'code' => 'title-missing', 'severity' => 'error'],
            ['id' => 'i5', 'code' => 'noindex', 'severity' => 'error'],
            ['id' => 'i6', 'code' => 'h1-missing', 'severity' => 'error'],
        ], 'lastCrawled' => '2026-09-25T09:00:00Z'],
    ];
@endphp
<div class="flex flex-col gap-6">
    <x-nq::seo-pages :pages="$pages" openable
        x-on:open-page="console.log($event.detail.url)"
        x-on:recrawl="$event.detail.wait(Promise.resolve())"
        x-on:request-indexing="$event.detail.wait(Promise.resolve())" />
    <x-nq::seo-pages.checklist :issues="$pages[1]['issues']" url="https://nasaq.dev/pricing"
        x-on:toggle-fixed="$event.detail.wait(Promise.resolve())" />
</div>
```

### HTML + Alpine

```html
<div class="flex flex-col gap-6">
    <div data-slot="seo-page-list" x-data="nqSeoPages(JSON.parse(&#039;{\u0022pages\u0022:[{\u0022id\u0022:\u0022p1\u0022,\u0022url\u0022:\u0022https:\\\/\\\/nasaq.dev\\\/\u0022,\u0022title\u0022:\u0022Nasaq: the Arabic design system\u0022,\u0022indexStatus\u0022:\u0022indexed\u0022,\u0022issues\u0022:[{\u0022id\u0022:\u0022i1\u0022,\u0022code\u0022:\u0022og-image-missing\u0022,\u0022severity\u0022:\u0022info\u0022}],\u0022vitals\u0022:{\u0022LCP\u0022:1900,\u0022INP\u0022:120,\u0022CLS\u0022:0.04},\u0022lastCrawled\u0022:\u00222026-09-29T06:00:00+00:00\u0022},{\u0022id\u0022:\u0022p2\u0022,\u0022url\u0022:\u0022https:\\\/\\\/nasaq.dev\\\/pricing\u0022,\u0022title\u0022:\u0022Pricing\u0022,\u0022indexStatus\u0022:\u0022not-indexed\u0022,\u0022issues\u0022:[{\u0022id\u0022:\u0022i2\u0022,\u0022code\u0022:\u0022description-missing\u0022,\u0022severity\u0022:\u0022warning\u0022},{\u0022id\u0022:\u0022i3\u0022,\u0022code\u0022:\u0022alt-missing\u0022,\u0022severity\u0022:\u0022warning\u0022,\u0022detail\u0022:\u00223 images have no alt text\u0022}],\u0022vitals\u0022:{\u0022LCP\u0022:3100,\u0022INP\u0022:240,\u0022CLS\u0022:0.08},\u0022lastCrawled\u0022:\u00222026-09-28T09:00:00+00:00\u0022},{\u0022id\u0022:\u0022p3\u0022,\u0022url\u0022:\u0022https:\\\/\\\/nasaq.dev\\\/draft\u0022,\u0022indexStatus\u0022:\u0022blocked\u0022,\u0022issues\u0022:[{\u0022id\u0022:\u0022i4\u0022,\u0022code\u0022:\u0022title-missing\u0022,\u0022severity\u0022:\u0022error\u0022},{\u0022id\u0022:\u0022i5\u0022,\u0022code\u0022:\u0022noindex\u0022,\u0022severity\u0022:\u0022error\u0022},{\u0022id\u0022:\u0022i6\u0022,\u0022code\u0022:\u0022h1-missing\u0022,\u0022severity\u0022:\u0022error\u0022}],\u0022lastCrawled\u0022:\u00222026-09-25T09:00:00+00:00\u0022}],\u0022can\u0022:{\u0022open\u0022:true,\u0022recrawl\u0022:true,\u0022index\u0022:true},\u0022locale\u0022:\u0022en\u0022,\u0022words\u0022:{\u0022failed\u0022:\u0022Could not complete this. Try again.\u0022,\u0022LCP\u0022:\u0022LCP\u0022,\u0022INP\u0022:\u0022INP\u0022,\u0022CLS\u0022:\u0022CLS\u0022,\u0022indexed\u0022:\u0022Indexed\u0022,\u0022not-indexed\u0022:\u0022Not indexed\u0022,\u0022blocked\u0022:\u0022Blocked\u0022,\u0022pending\u0022:\u0022Pending\u0022,\u0022errors1\u0022:\u00221 error\u0022,\u0022errorsN\u0022:\u0022{n} errors\u0022,\u0022warnings1\u0022:\u00221 warning\u0022,\u0022warningsN\u0022:\u0022{n} warnings\u0022,\u0022notices1\u0022:\u00221 notice\u0022,\u0022noticesN\u0022:\u0022{n} notices\u0022,\u0022good\u0022:\u0022Good\u0022,\u0022fair\u0022:\u0022Fair\u0022,\u0022poor\u0022:\u0022Poor\u0022,\u0022scoreOf\u0022:\u0022SEO score {n} of 100\u0022,\u0022ratingGood\u0022:\u0022good\u0022,\u0022ratingNeeds\u0022:\u0022needs improvement\u0022,\u0022ratingPoor\u0022:\u0022poor\u0022}}&#039;))" x-on:nq-data-table-action="onAction($event)" x-on:nq-data-table-row-click="onRowClick($event)" x-on:open-page="console.log($event.detail.url)" x-on:recrawl="$event.detail.wait(Promise.resolve())" x-on:request-indexing="$event.detail.wait(Promise.resolve())" 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">Pages</h3>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Every crawled page with its SEO score, open issues, index status and Core Web Vitals.</div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-3"><p role="alert" class="text-body-sm text-nq-danger-text" x-show="notice" x-text="notice" style="display: none"></p>
        <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022page\u0022,\u0022header\u0022:\u0022Page\u0022,\u0022key\u0022:\u0022page\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022score\u0022,\u0022header\u0022:\u0022Score\u0022,\u0022key\u0022:\u0022score\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022issues\u0022,\u0022header\u0022:\u0022Issues\u0022,\u0022key\u0022:\u0022total\u0022,\u0022type\u0022:\u0022number\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022index\u0022,\u0022header\u0022:\u0022Index status\u0022,\u0022key\u0022:\u0022index\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022indexed\u0022,\u0022label\u0022:\u0022Indexed\u0022},{\u0022value\u0022:\u0022pending\u0022,\u0022label\u0022:\u0022Pending\u0022},{\u0022value\u0022:\u0022not-indexed\u0022,\u0022label\u0022:\u0022Not indexed\u0022},{\u0022value\u0022:\u0022blocked\u0022,\u0022label\u0022:\u0022Blocked\u0022}],\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022vitals\u0022,\u0022header\u0022:\u0022Vitals\u0022,\u0022key\u0022:\u0022vitals\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022crawled\u0022,\u0022header\u0022:\u0022Last crawled\u0022,\u0022key\u0022:\u0022crawled\u0022,\u0022type\u0022:\u0022datetime\u0022,\u0022format\u0022:\u0022relative\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022page\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022issues\u0022,\u0022group\u0022:\u0022open\u0022},{\u0022id\u0022:\u0022open\u0022,\u0022group\u0022:\u0022open\u0022},{\u0022id\u0022:\u0022recrawl\u0022,\u0022group\u0022:\u0022crawl\u0022,\u0022disabledWhen\u0022:{\u0022field\u0022:\u0022busyCrawl\u0022,\u0022eq\u0022:true}},{\u0022id\u0022:\u0022index\u0022,\u0022group\u0022:\u0022crawl\u0022,\u0022disabledWhen\u0022:{\u0022field\u0022:\u0022busyIndex\u0022,\u0022eq\u0022:true}}],\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 pages…" aria-label="Filter pages…" 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>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;index&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="index" 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="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Index status
                        <span data-slot="badge" x-show="facetCount('index')" x-text="facetSummary('index')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></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-start.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-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;index|indexed&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Indexed
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;index|pending&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Pending
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;index|not-indexed&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Not indexed
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;index|blocked&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Blocked
</div></div>
                        <div x-show="facetCount('index')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;index&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Pages"                 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="Pages"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 1) + ', 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="page" x-show="shown['page']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('page')"                             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('page', $event.shiftKey)"
                                    x-bind:class="sortOf('page') ? '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 >Page</span>
                                    <svg aria-hidden="true" x-show="! sortOf('page')" 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('page') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('page') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="score" x-show="shown['score']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('score')"                             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('score', $event.shiftKey)"
                                    x-bind:class="sortOf('score') ? '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 >Score</span>
                                    <svg aria-hidden="true" x-show="! sortOf('score')" 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('score') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('score') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="issues" x-show="shown['issues']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('issues')"                             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('issues', $event.shiftKey)"
                                    x-bind:class="sortOf('issues') ? '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 >Issues</span>
                                    <svg aria-hidden="true" x-show="! sortOf('issues')" 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('issues') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('issues') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="index" x-show="shown['index']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('index')"                             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('index', $event.shiftKey)"
                                    x-bind:class="sortOf('index') ? '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 >Index status</span>
                                    <svg aria-hidden="true" x-show="! sortOf('index')" 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('index') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('index') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="vitals" x-show="shown['vitals']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Vitals
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="crawled" x-show="shown['crawled']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('crawled')"                             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('crawled', $event.shiftKey)"
                                    x-bind:class="sortOf('crawled') ? '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 >Last crawled</span>
                                    <svg aria-hidden="true" x-show="! sortOf('crawled')" 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('crawled') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('crawled') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </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 pages crawled yet</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, true)"
                             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-on:click="rowClick(row, $event)"                             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 cursor-pointer">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="page" x-show="shown['page']"  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 " >
                                                                                            <div class="flex min-w-0 max-w-[32ch] flex-col sm:max-w-[44ch]">
                    <span dir="auto" class="truncate text-label text-foreground" x-show="row.hasTitle" style="display: none" x-text="row.title"></span>
                    <bdi dir="ltr" class="block truncate text-caption text-muted-foreground" x-text="row.url"></bdi>
                </div>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="score" x-show="shown['score']"  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 " >
                                                                                            <div class="flex w-24 flex-col gap-1" x-bind:data-band="row.band">
                    <span class="text-label font-semibold" x-bind:class="row.band === 'good' ? 'text-nq-success-text' : (row.band === 'fair' ? 'text-nq-warning-text' : 'text-nq-danger-text')">
                        <bdi data-slot="num" data-numeric class="tabular-nums" x-text="row.scoreText"></bdi> <span class="text-caption font-normal text-muted-foreground" x-text="row.bandLabel"></span>
                    </span>
                    <div data-slot="meter" role="meter" aria-valuemin="0" aria-valuemax="100" x-bind:aria-valuenow="row.score" x-bind:aria-valuetext="row.scoreText" x-bind:aria-label="row.scoreLabel"
                        x-bind:data-tone="row.band === 'good' ? 'success' : (row.band === 'fair' ? 'warning' : 'danger')" class="flex w-full flex-col gap-1.5">
                        <div data-slot="meter-track" class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
                            <div data-slot="meter-indicator" x-bind:style="'inset-inline-start:0;width:' + row.score + '%'"
                                class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none"
                                x-bind:class="row.band === 'good' ? 'bg-nq-success' : (row.band === 'fair' ? 'bg-nq-warning' : 'bg-nq-danger')"></div>
                        </div>
                    </div>
                </div>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="issues" x-show="shown['issues']"  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="status" data-tone="success" x-show="row.clean" 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-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate"  title="No issues" >No issues</span>
</span>
                <div class="flex flex-wrap gap-1" x-show="! row.clean" style="display: none">
                    <span data-slot="badge"  style="display: none"     x-show="row.hasErrors" 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.errorsText"></span></span>
                    <span data-slot="badge"  style="display: none"     x-show="row.hasWarnings" 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.warningsText"></span></span>
                    <span data-slot="badge"  style="display: none"     x-show="row.hasInfo" 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.infoText"></span></span>
                </div>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="index" x-show="shown['index']"  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="status" data-tone="success" x-show="row.index === &#039;indexed&#039;" 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-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate" ><span x-text="row.indexLabel"></span></span>
</span>
                <span data-slot="status" data-tone="warning" x-show="row.index === &#039;not-indexed&#039;" 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-warning-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"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>        <span class="truncate" ><span x-text="row.indexLabel"></span></span>
</span>
                <span data-slot="status" data-tone="danger" x-show="row.index === &#039;blocked&#039;" 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="row.indexLabel"></span></span>
</span>
                <span data-slot="status" data-tone="info" x-show="row.index === &#039;pending&#039;" 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-info-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"/>
  <circle cx="12" cy="12" r="1"/>
</svg>        <span class="truncate" ><span x-text="row.indexLabel"></span></span>
</span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="vitals" x-show="shown['vitals']"  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="text-caption text-muted-foreground" x-show="row.noVitals" style="display: none">No field data</span>
                <div class="flex flex-wrap gap-1" x-show="! row.noVitals" style="display: none">
                    <template x-for="v in row.vitals" x-bind:key="v.id">
                        <span>
                            <span data-slot="badge"  style="display: none"     x-show="v.rating === &#039;good&#039;" x-bind:title="v.title" 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"><bdi x-text="v.text"></bdi></span>
                            <span data-slot="badge"  style="display: none"     x-show="v.rating === &#039;needs-improvement&#039;" x-bind:title="v.title" 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"><bdi x-text="v.text"></bdi></span>
                            <span data-slot="badge"  style="display: none"     x-show="v.rating === &#039;poor&#039;" x-bind:title="v.title" 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"><bdi x-text="v.text"></bdi></span>
                        </span>
                    </template>
                </div>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="crawled" x-show="shown['crawled']"  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" >
                                                                                            <time class="min-w-0 flex-1 tabular-nums" x-bind:datetime="isoOf(row, col(&#039;crawled&#039;))"  x-bind:title="absoluteOf(row, col(&#039;crawled&#039;))"  x-text="shownText(row, col(&#039;crawled&#039;))"></time>
                                                                                                                                </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;issues&#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="M13 5h8"/>
  <path d="M13 12h8"/>
  <path d="M13 19h8"/>
  <path d="m3 17 2 2 4-4"/>
  <path d="m3 7 2 2 4-4"/>
</svg>                                                                View issues</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 1)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>                                                                Open page</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 2)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;recrawl&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>                                                                Crawl again</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 3)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 3)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;index&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg>                                                                Request indexing</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;issues&#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="M13 5h8"/>
  <path d="M13 12h8"/>
  <path d="M13 19h8"/>
  <path d="m3 17 2 2 4-4"/>
  <path d="m3 7 2 2 4-4"/>
</svg>                                View issues</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="default" x-bind="item"
        x-on:click="act(&#039;open&#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 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="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>                                Open page</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 2)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;recrawl&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>                                Crawl again</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 3)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 3)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;index&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg>                                Request indexing</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div></div>
    <div data-slot="seo-issue-checklist" x-data="nqSeoChecklist(JSON.parse(&#039;{\u0022issues\u0022:[{\u0022id\u0022:\u0022i2\u0022,\u0022code\u0022:\u0022description-missing\u0022,\u0022severity\u0022:\u0022warning\u0022},{\u0022id\u0022:\u0022i3\u0022,\u0022code\u0022:\u0022alt-missing\u0022,\u0022severity\u0022:\u0022warning\u0022,\u0022detail\u0022:\u00223 images have no alt text\u0022}],\u0022texts\u0022:{\u0022description-missing\u0022:{\u0022title\u0022:\u0022Missing meta description\u0022,\u0022why\u0022:\u0022Search engines will pick a random snippet, which lowers the click rate.\u0022,\u0022fix\u0022:\u0022Write a 70 to 160 character description that says what the visitor gets.\u0022},\u0022alt-missing\u0022:{\u0022title\u0022:\u0022Images without alt text\u0022,\u0022why\u0022:\u0022Alt text is how screen readers and image search understand a picture.\u0022,\u0022fix\u0022:\u0022Describe each meaningful image in its alt attribute and leave decorative ones empty.\u0022}},\u0022can\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022words\u0022:{\u0022failed\u0022:\u0022Could not complete this. Try again.\u0022,\u0022descNone\u0022:\u0022Everything on this page is fixed.\u0022,\u0022descOne\u0022:\u00221 issue is open.\u0022,\u0022descMany\u0022:\u0022{n} issues are open.\u0022,\u0022scoreOf\u0022:\u0022SEO score {n} of 100\u0022,\u0022error\u0022:\u0022Error\u0022,\u0022warning\u0022:\u0022Warning\u0022,\u0022info\u0022:\u0022Notice\u0022,\u0022fixed\u0022:\u0022Fixed\u0022,\u0022markFixed\u0022:\u0022Mark \\u0022{title}\\u0022 as fixed\u0022}}&#039;))" x-on:toggle-fixed="$event.detail.wait(Promise.resolve())" 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">Issues to fix</h3>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground"><bdi dir="ltr" class="block truncate">https://nasaq.dev/pricing</bdi>            <span x-text="description">2 issues are open.</span></div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex items-center gap-3" data-band="good" x-bind:data-band="band">
            <span class="text-h3 font-semibold tabular-nums text-nq-success-text" x-bind:class="band === 'good' ? 'text-nq-success-text' : (band === 'fair' ? 'text-nq-warning-text' : 'text-nq-danger-text')">
                <bdi data-slot="num" data-numeric class="tabular-nums" x-text="num(score)">92</bdi>
            </span>
            <div class="flex min-w-0 flex-1 flex-col gap-1">
                <span class="text-caption text-muted-foreground" x-text="scoreText">SEO score 92 of 100</span>
                <div data-slot="meter" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" aria-valuetext="92" aria-label="SEO score 92 of 100"
                    x-bind:aria-valuenow="score" x-bind:aria-valuetext="num(score)" x-bind:aria-label="scoreText"
                    data-tone="success" x-bind:data-tone="band === 'good' ? 'success' : (band === 'fair' ? 'warning' : 'danger')" class="flex w-full flex-col gap-1.5">
                    <div data-slot="meter-track" class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
                        <div data-slot="meter-indicator" style="inset-inline-start:0;width:92%" x-bind:style="'inset-inline-start:0;width:' + score + '%'"
                            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-nq-success"
                            x-bind:class="band === 'good' ? 'bg-nq-success' : (band === 'fair' ? 'bg-nq-warning' : 'bg-nq-danger')"></div>
                    </div>
                </div>
            </div>
        </div>
        <p role="alert" class="text-body-sm text-nq-danger-text" x-show="notice" x-text="notice" style="display: none"></p>
        <div data-slot="empty-state" style="display: none;" x-show="items.length === 0" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <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="M13 5h8"/>
  <path d="M13 12h8"/>
  <path d="M13 19h8"/>
  <path d="m3 17 2 2 4-4"/>
  <path d="m3 7 2 2 4-4"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Nothing to fix</p>
                    <p class="text-body-sm text-muted-foreground">This page has no open issues.</p>
            </div>
    </div>
            <ul data-slot="seo-issue-initial" x-ignore class="flex flex-col divide-y divide-border rounded-card border border-border">
                                                        <li class="flex flex-col gap-2 p-3">
                        <div class="flex items-start gap-3">
                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 aria-label="Mark &amp;quot;Images without alt text&amp;quot; as fixed" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                            <div class="flex min-w-0 flex-1 flex-col gap-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span dir="auto" class="text-label text-foreground">Images without alt text</span>
                                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text"><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.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>Warning</span></span>
                                </div>
                                <p dir="auto" class="text-body-sm text-muted-foreground">3 images have no alt text</p>                                <details class="text-body-sm">
                                    <summary class="w-fit cursor-pointer text-caption text-muted-foreground hover:text-foreground">How to fix</summary>
                                    <dl class="mt-2 flex flex-col gap-2">
                                        <div><dt class="text-caption font-medium text-muted-foreground">Why it matters</dt><dd dir="auto" class="text-foreground">Alt text is how screen readers and image search understand a picture.</dd></div>
                                        <div><dt class="text-caption font-medium text-muted-foreground">How to fix</dt><dd dir="auto" class="text-foreground">Describe each meaningful image in its alt attribute and leave decorative ones empty.</dd></div>
                                    </dl>
                                </details>
                            </div>
                        </div>
                    </li>
                                                        <li class="flex flex-col gap-2 p-3">
                        <div class="flex items-start gap-3">
                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 aria-label="Mark &amp;quot;Missing meta description&amp;quot; as fixed" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                            <div class="flex min-w-0 flex-1 flex-col gap-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span dir="auto" class="text-label text-foreground">Missing meta description</span>
                                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text"><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.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>Warning</span></span>
                                </div>
                                                                <details class="text-body-sm">
                                    <summary class="w-fit cursor-pointer text-caption text-muted-foreground hover:text-foreground">How to fix</summary>
                                    <dl class="mt-2 flex flex-col gap-2">
                                        <div><dt class="text-caption font-medium text-muted-foreground">Why it matters</dt><dd dir="auto" class="text-foreground">Search engines will pick a random snippet, which lowers the click rate.</dd></div>
                                        <div><dt class="text-caption font-medium text-muted-foreground">How to fix</dt><dd dir="auto" class="text-foreground">Write a 70 to 160 character description that says what the visitor gets.</dd></div>
                                    </dl>
                                </details>
                            </div>
                        </div>
                    </li>
                            </ul>
                <ul class="flex flex-col divide-y divide-border rounded-card border border-border" x-show="items.length !== 0"  style="display: none" >
            <template x-for="issue in rows" x-bind:key="issue.id">
                <li class="flex flex-col gap-2 p-3" x-bind:data-severity="issue.severity" x-bind:data-fixed="issue.fixed ? '' : null">
                    <div data-slot="collapsible" x-data="nqCollapsible(false)" x-modelable="open" x-id="['nq-collapsible']"
    :data-open="open ? '' : undefined" :data-closed="open ? undefined : ''"
     data-closed     >
    <div class="flex items-start gap-3">
                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="marks[issue.id]" x-bind:aria-label="markLabel(issue)" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                            <div class="flex min-w-0 flex-1 flex-col gap-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span dir="auto" x-bind:class="issue.fixed ? 'text-label text-muted-foreground line-through' : 'text-label text-foreground'" x-text="textOf(issue).title"></span>
                                    <span data-slot="badge"  style="display: none"     x-show="badgeOf(issue) === &#039;fixed&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text"><svg aria-hidden="true" x-show="issue.severity === 'error'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                        <svg aria-hidden="true" x-show="issue.severity === 'warning'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>                                        <svg aria-hidden="true" x-show="issue.severity === 'info'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg>                                        <span x-text="badgeText(issue)"></span></span>
                                    <span data-slot="badge"  style="display: none"     x-show="badgeOf(issue) === &#039;error&#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"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg><span x-text="badgeText(issue)"></span></span>
                                    <span data-slot="badge"  style="display: none"     x-show="badgeOf(issue) === &#039;warning&#039;" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text"><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.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 x-text="badgeText(issue)"></span></span>
                                    <span data-slot="badge"  style="display: none"     x-show="badgeOf(issue) === &#039;info&#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"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg><span x-text="badgeText(issue)"></span></span>
                                </div>
                                <p dir="auto" class="text-body-sm text-muted-foreground" x-show="issue.detail" x-text="issue.detail" style="display: none"></p>
                                <button data-slot="collapsible-trigger"
     type="button"                         x-bind:aria-controls="$id(&#039;nq-collapsible&#039;, &#039;panel&#039;)" x-bind:data-panel-open="open ? &#039;&#039; : undefined" x-on:click="toggle()" :aria-expanded="open" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans 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 underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0 w-fit text-caption text-muted-foreground hover:text-foreground">
        How to fix</button>
                            </div>
                        </div>
                        <div data-slot="collapsible-panel" x-ref="panel" x-nq-presence="open" :id="$id('nq-collapsible', 'panel')"
     data-closed style="display:none"     class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0"><dl class="mt-2 flex flex-col gap-2 ps-7 text-body-sm">
                                <div>
                                    <dt class="text-caption font-medium text-muted-foreground">Why it matters</dt>
                                    <dd dir="auto" class="text-foreground" x-text="textOf(issue).why"></dd>
                                </div>
                                <div>
                                    <dt class="text-caption font-medium text-muted-foreground">How to fix</dt>
                                    <dd dir="auto" class="text-foreground" x-text="textOf(issue).fix"></dd>
                                </div>
                            </dl></div>
</div>
                </li>
            </template>
        </ul></div></div>
</div>
```