# Project View

> A project page with a header, progress and members, and tabs for overview, board, list, timeline, activity, time, AI cost, files, memory, vault, GitHub and settings.

Source: https://docs.nasaqui.com/components/project-view

## Install

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

One project end to end. It is presentational: you own the issues and every change awaits your callback.

## When to use

- The page for a project, with the work shown as an overview, a board, a list and a schedule.

## When not to use

- A list of projects: use `ProjectList`.

## Import

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

## Quick start

```tsx
<ProjectView
  project={project}
  issues={issues}
  statuses={statuses}
  labels={labels}
  people={people}
  onUpdateIssue={update}
  onMoveIssue={move}
  onOpenIssue={(issue) => open(issue.id)}
/>
```

## Anatomy

```
ProjectView            data-slot="project-view"
├─ header              name, key, client, status, dates, members, progress, New issue
└─ tabs                each shown only when its data is given
   ├─ overview         open issues by status, burndown, recent activity, budget against spend
   ├─ board            KanbanBoard, drag to change status
   ├─ list             DataTable with in-cell edit
   ├─ timeline         schedule bars and notes
   ├─ activity         the full feed, filtered by type and person, grouped by day
   ├─ time             TimeTracker and TimeEntryList
   ├─ ai               AiUsageCost
   ├─ files            upload, download, delete
   ├─ memory           remembered facts and decisions: search, tags, add, edit, forget
   ├─ vault            Vault for secrets and EnvList for variables
   ├─ github           RepositoryPicker and GithubActivity
   └─ settings         SettingsSections: general, budget, members, labels and statuses, integrations, danger zone
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `project` | `ProjectDetails` | required | Name, key, client, status, dates, members, budget. |
| `issues` / `statuses` / `labels` / `people` | arrays | required | The work. |
| `onUpdateIssue` | `(id, patch) => Promise<...>` | none | In-cell edit. Return `{ error }` to roll back. |
| `onMoveIssue` | `(id, statusId, index) => Promise<...>` | none | Board drop. Defaults to `onUpdateIssue({ statusId })`. |
| `onCreateIssue` / `onDeleteIssue` | | none | Omit to hide. |
| `onOpenIssue` | `(issue) => void` | none | Open the quick view or the page. |
| `activity` / `budget` | | none | Overview widgets. `activity` also shows the Activity tab; give each item a `kind` to filter by type. |
| `notes` / `time` / `ai` / `files` | | none | Each shows its tab. |
| `memory` | `{ items, onSave, onForget }` | none | Shows Memory. Items are `{ id, kind, text, tags, source, at }`. |
| `vault` | `VaultProps & { env? }` | none | Shows Vault. `env` takes `EnvListProps`. |
| `github` | `ProjectGithub` | none | Shows GitHub: `repo` (or null), `picker`, and the GithubActivity feeds. |
| `onSaveProject` / `workflow` | | none | Settings: general and budget pages, labels and statuses. |
| `settings` | `ProjectSettingsExtras` | none | Settings: `members` (MembersManager props), `integrations`, `onArchive`, `onDelete`. |
| `defaultTab` / `tab` / `onTabChange` / `tabs` | | overview | Tab control. |
| `labelsText` | `ProjectViewLabels` | en / ar | Every string. |

## Examples

- **With a quick view**: `onOpenIssue` opens `IssueQuickView`.

## Accessibility

Tabs are a real tab list. A board card opens on click, and Open is also in its context menu (context-click, Shift+F10 or the Menu key) for keyboard use. Charts have text labels.

## RTL & i18n

English and Arabic built in. Board columns, the schedule and the header mirror; keys and numbers stay left-to-right.

## Styling & tokens

Semantic tokens only. The tab list scrolls sideways on narrow screens; the settings pages switch to a select. Charts take colours from the tag tokens.

## Do / Don't

- Do return `{ error }` so a failed drop rolls back.
- Do not put thousands of issues on the board; filter first.

## Related

- [IssueView](https://docs.nasaqui.com/components/issue-view)
- [KanbanBoard](https://docs.nasaqui.com/components/kanban-board)

## Lab

https://docs.nasaqui.com/?path=/docs/components-projects-work-project-view--docs

## Code

### React

```tsx
<ProjectView
  project={project}
  issues={issues}
  statuses={statuses}
  labels={labels}
  people={people}
  onUpdateIssue={update}
  onMoveIssue={move}
  onOpenIssue={(issue) => open(issue.id)}
/>
```

### shadcn

```tsx
<ProjectView
  project={project}
  issues={issues}
  statuses={statuses}
  labels={labels}
  people={people}
  onUpdateIssue={update}
  onMoveIssue={move}
  onOpenIssue={(issue) => open(issue.id)}
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqProjectView, type Issue, type IssuePatch } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const statuses = [
  { id: "todo", name: "To do", hue: "gray" as const, stage: "todo" as const },
  { id: "doing", name: "In progress", hue: "blue" as const, stage: "active" as const },
  { id: "done", name: "Shipped", hue: "green" as const, stage: "done" as const },
];
const labels = [{ id: "l1", name: "Design", hue: "violet" as const }];
const people = [{ id: "u1", name: "Layla Hassan" }, { id: "u2", name: "Omar Said" }];
const project = { id: "p1", name: "Checkout", key: "NSQ", client: "Acme", status: "active" as const, progress: 40, startDate: "2026-09-01", dueDate: "2026-11-30", members: [{ name: "Layla Hassan" }, { name: "Omar Said" }] };

const issues = ref<Issue[]>([
  { id: "i1", key: "NSQ-1", title: "Refunds fail for split payments", statusId: "doing", priority: "high", type: "bug", assigneeId: "u1", labelIds: ["l1"], estimateHours: 4, dueDate: "2026-10-02", projectId: "p1", createdAt: "2026-09-20T09:00:00Z" },
  { id: "i2", key: "NSQ-2", title: "New receipt layout", statusId: "todo", priority: "medium", type: "task", assigneeId: "u2", labelIds: [], dueDate: "2026-10-10", projectId: "p1", createdAt: "2026-09-21T09:00:00Z" },
  { id: "i3", key: "NSQ-3", title: "Saved cards", statusId: "done", priority: "low", type: "story", labelIds: [], projectId: "p1", createdAt: "2026-09-10T09:00:00Z" },
]);

// Your save: apply the patch. Return { error } to roll the change back.
const update = async (id: string, patch: IssuePatch) => {
  issues.value = issues.value.map((i) => (i.id === id ? { ...i, ...patch } : i));
};
</script>

<template>
  <NqProjectView :project="project" :issues="issues" :statuses="statuses" :labels="labels" :people="people" :on-update-issue="update" :on-open-issue="() => {}" :now="Date.parse('2026-09-29T09:00:00Z')" />
</template>
```

### Blade

```blade
@php
    $statuses = [
        ['id' => 'todo', 'name' => 'To do', 'hue' => 'gray', 'stage' => 'todo'],
        ['id' => 'doing', 'name' => 'In progress', 'hue' => 'blue', 'stage' => 'active'],
        ['id' => 'done', 'name' => 'Shipped', 'hue' => 'green', 'stage' => 'done'],
    ];
    $labels = [['id' => 'l1', 'name' => 'Design', 'hue' => 'violet'], ['id' => 'l2', 'name' => 'Backend', 'hue' => 'teal']];
    $people = [['id' => 'u1', 'name' => 'Layla Hassan'], ['id' => 'u2', 'name' => 'Omar Said']];
    $project = [
        'id' => 'p1', 'name' => 'Checkout', 'key' => 'NSQ', 'client' => 'Acme', 'status' => 'active', 'progress' => 40,
        'startDate' => '2026-09-01', 'dueDate' => '2026-11-30', 'budget' => 12000, 'currency' => 'USD',
        'members' => [['name' => 'Layla Hassan'], ['name' => 'Omar Said']],
    ];
    $issues = [
        ['id' => 'i1', 'key' => 'NSQ-1', 'title' => 'Refunds fail for split payments', 'statusId' => 'doing', 'priority' => 'high', 'type' => 'bug', 'assigneeId' => 'u1', 'labelIds' => ['l2'], 'estimateHours' => 4, 'startDate' => '2026-09-24', 'dueDate' => '2026-10-02', 'projectId' => 'p1', 'createdAt' => '2026-09-20T09:00:00Z'],
        ['id' => 'i2', 'key' => 'NSQ-2', 'title' => 'New receipt layout', 'statusId' => 'todo', 'priority' => 'medium', 'type' => 'task', 'assigneeId' => 'u2', 'labelIds' => ['l1'], 'dueDate' => '2026-10-10', 'projectId' => 'p1', 'createdAt' => '2026-09-21T09:00:00Z'],
        ['id' => 'i3', 'key' => 'NSQ-3', 'title' => 'Saved cards', 'statusId' => 'done', 'priority' => 'low', 'type' => 'feature', 'labelIds' => [], 'projectId' => 'p1', 'createdAt' => '2026-09-10T09:00:00Z', 'completedAt' => '2026-09-25T09:00:00Z'],
        ['id' => 'i4', 'key' => 'NSQ-4', 'title' => 'Late fee wording', 'statusId' => 'doing', 'priority' => 'urgent', 'type' => 'chore', 'assigneeId' => 'u1', 'labelIds' => [], 'dueDate' => '2026-09-26', 'projectId' => 'p1', 'createdAt' => '2026-09-15T09:00:00Z'],
    ];
    $activity = [
        ['id' => 'a1', 'title' => 'Moved NSQ-1 to In progress', 'description' => 'From To do', 'at' => '2026-09-29T08:30:00', 'actor' => ['name' => 'Omar Said'], 'kind' => 'status'],
        ['id' => 'a2', 'title' => 'Commented on NSQ-1', 'at' => '2026-09-29T07:10:00', 'actor' => ['name' => 'Layla Hassan'], 'kind' => 'comment'],
        ['id' => 'a3', 'title' => 'Uploaded receipt-v2.pdf', 'at' => '2026-09-28T16:00:00', 'actor' => ['name' => 'Layla Hassan'], 'kind' => 'file'],
        ['id' => 'a4', 'title' => 'Created NSQ-4', 'at' => '2026-09-15T09:00:00', 'kind' => 'issue'],
    ];
    $files = [
        ['id' => 'f1', 'name' => 'receipt-v2.pdf', 'size' => 482304, 'uploadedBy' => 'Layla Hassan', 'uploadedAt' => '2026-09-28T16:00:00'],
        ['id' => 'f2', 'name' => 'refund-flow.png', 'size' => 1812480, 'uploadedBy' => 'Omar Said', 'uploadedAt' => '2026-09-22T10:30:00'],
    ];
    $memory = [
        ['id' => 'm1', 'kind' => 'decision', 'text' => 'Refunds are issued per card, never as one lump.', 'tags' => ['payments', 'refunds'], 'source' => 'Call with finance', 'at' => '2026-09-27T10:00:00'],
        ['id' => 'm2', 'kind' => 'fact', 'text' => 'The client closes books on the 25th.', 'tags' => ['payments'], 'source' => '', 'at' => '2026-09-12T10:00:00'],
        ['id' => 'm3', 'kind' => 'fact', 'text' => 'Receipts must show the VAT number.', 'tags' => ['receipts'], 'source' => 'Contract', 'at' => '2026-09-05T10:00:00'],
    ];
    $integrations = [
        ['id' => 'github', 'name' => 'GitHub', 'description' => 'Link pull requests to issues.', 'icon' => 'github', 'connected' => true],
        ['id' => 'slack', 'name' => 'Slack', 'description' => 'Post updates to a channel.', 'icon' => 'message-square', 'connected' => false],
    ];
    $roles = [['id' => 'owner', 'label' => 'Owner'], ['id' => 'member', 'label' => 'Member']];
    $teamMembers = [
        ['id' => 'm1', 'name' => 'Layla Hassan', 'email' => 'layla@acme.test', 'role' => 'owner', 'joinedAt' => '2025-01-12', 'lastActive' => '2026-09-29'],
        ['id' => 'm2', 'name' => 'Omar Said', 'email' => 'omar@acme.test', 'role' => 'member', 'joinedAt' => '2026-03-20', 'lastActive' => null],
    ];
    $secrets = [['id' => 's1', 'name' => 'STRIPE_SECRET_KEY', 'group' => 'Payments', 'kind' => 'api-key', 'hint' => '…4242', 'updatedAt' => '2026-08-30T09:00:00Z']];
    $notes = [
        ['id' => 'n1', 'kind' => 'note', 'body' => 'Kickoff done, scope agreed.', 'at' => '2026-09-01T09:00:00', 'actor' => ['name' => 'Layla Hassan']],
    ];
    $entries = [['id' => 'e1', 'date' => '2026-09-28', 'seconds' => 5400, 'projectId' => 'p1', 'taskId' => 'i1', 'note' => 'Reproduction']];
@endphp
<div class="w-full max-w-6xl">
    <x-nq::project-view :project="$project" :issues="$issues" :statuses="$statuses" :labels="$labels" :people="$people" update create delete-issue open-issue now="2026-09-29 09:00"
        :activity="$activity" :budget="['total' => 12000, 'spent' => 4800, 'currency' => 'USD']"
        :notes="['items' => $notes, 'toggle' => true, 'delete' => true]"
        :time="['entries' => $entries]"
        :ai="['days' => [['date' => '2026-09-28', 'billed' => 1.2, 'unbilled' => 0.4], ['date' => '2026-09-29', 'billed' => 0, 'unbilled' => 2.1]], 'currency' => 'USD']"
        :files="$files" upload download delete-file
        :memory="['items' => $memory, 'editable' => true, 'deletable' => true]"
        :vault="['secrets' => $secrets]"
        :github="['repo' => ['owner' => 'acme', 'name' => 'storefront'], 'commits' => [['id' => '4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902', 'message' => 'fix(refunds): split the total per card', 'author' => ['login' => 'layla-h'], 'date' => '2026-09-28T16:05:00Z', 'branch' => 'main']]]"
        save :workflow="true" :members="['members' => $teamMembers, 'roles' => $roles, 'currentUserId' => 'm1', 'canInvite' => true]" :integrations="$integrations" archive delete />
</div>
```

### HTML + Alpine

```html
<div class="w-full max-w-6xl">
    <section data-slot="project-view" aria-label="Checkout" x-data="nqProjectView(JSON.parse('{\u0022tab\u0022:\u0022overview\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022projectKey\u0022:\u0022NSQ\u0022,\u0022archived\u0022:false,\u0022project\u0022:{\u0022name\u0022:\u0022Checkout\u0022,\u0022client\u0022:\u0022Acme\u0022,\u0022status\u0022:\u0022active\u0022,\u0022startDate\u0022:\u00222026-09-01\u0022,\u0022dueDate\u0022:\u00222026-11-30\u0022,\u0022budget\u0022:\u002212000\u0022},\u0022issues\u0022:[{\u0022id\u0022:\u0022i1\u0022,\u0022key\u0022:\u0022NSQ-1\u0022},{\u0022id\u0022:\u0022i2\u0022,\u0022key\u0022:\u0022NSQ-2\u0022},{\u0022id\u0022:\u0022i3\u0022,\u0022key\u0022:\u0022NSQ-3\u0022},{\u0022id\u0022:\u0022i4\u0022,\u0022key\u0022:\u0022NSQ-4\u0022}],\u0022memory\u0022:[{\u0022id\u0022:\u0022m1\u0022,\u0022kind\u0022:\u0022decision\u0022,\u0022text\u0022:\u0022Refunds are issued per card, never as one lump.\u0022,\u0022tags\u0022:[\u0022payments\u0022,\u0022refunds\u0022],\u0022source\u0022:\u0022Call with finance\u0022},{\u0022id\u0022:\u0022m2\u0022,\u0022kind\u0022:\u0022fact\u0022,\u0022text\u0022:\u0022The client closes books on the 25th.\u0022,\u0022tags\u0022:[\u0022payments\u0022],\u0022source\u0022:\u0022\u0022},{\u0022id\u0022:\u0022m3\u0022,\u0022kind\u0022:\u0022fact\u0022,\u0022text\u0022:\u0022Receipts must show the VAT number.\u0022,\u0022tags\u0022:[\u0022receipts\u0022],\u0022source\u0022:\u0022Contract\u0022}],\u0022integrations\u0022:[{\u0022id\u0022:\u0022github\u0022,\u0022name\u0022:\u0022GitHub\u0022,\u0022connected\u0022:true},{\u0022id\u0022:\u0022slack\u0022,\u0022name\u0022:\u0022Slack\u0022,\u0022connected\u0022:false}],\u0022feedTotal\u0022:4,\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022,\u0022title\u0022:\u0022Title\u0022,\u0022name\u0022:\u0022Name\u0022,\u0022memoryText\u0022:\u0022What to remember\u0022,\u0022feedCount\u0022:\u0022%s events\u0022,\u0022memoryCount\u0022:\u0022%s remembered\u0022,\u0022connect\u0022:\u0022Connect\u0022,\u0022disconnect\u0022:\u0022Disconnect\u0022}}'))"
    class="@container flex min-w-0 flex-col gap-5">
    <header class="flex min-w-0 flex-col gap-3">
        <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1.5">
                <div class="flex min-w-0 flex-wrap items-center gap-2">
                    <h1 class="m-0 min-w-0 text-title-sm font-semibold">Checkout</h1>
                                            <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"><bdi dir="ltr" class="font-mono">NSQ</bdi></span>
                                        <span data-slot="status" data-tone="info" 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"  title="Active" >Active</span>
</span>
                </div>
                <div class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-body-sm text-muted-foreground">
                                            <span>Client: <span class="text-foreground">Acme</span></span>
                                        <span class="inline-flex items-center gap-1.5">
                        <svg aria-hidden="true" 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="M8 2v3"/>
  <path d="M16 2v3"/>
  <rect x="3" y="3" width="18" height="18" rx="2"/>
  <path d="M3 9h18"/>
  <path d="M8 13h.01"/>
  <path d="M12 13h.01"/>
  <path d="M16 13h.01"/>
  <path d="M8 17h.01"/>
  <path d="M12 17h.01"/>
  <path d="M16 17h.01"/>
</svg>                                                    <time data-slot="date-time" datetime="2026-09-01T00:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Sep 1, 2026</time>
                             –                             <time data-slot="date-time" datetime="2026-11-30T00:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Nov 30, 2026</time>
                                            </span>
                    <span class="inline-flex items-center gap-2">
                        <span>Members</span>
                        <span data-slot="avatar-stack" role="group" aria-label="Layla Hassan, Omar Said" class="inline-flex items-center">
        <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full -ms-1.5 ring-2 ring-card first:ms-0">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
<span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full -ms-1.5 ring-2 ring-card first:ms-0">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Said" >OS</span>
    </span>
            </span>
                    </span>
                </div>
            </div>
                            <button data-slot="button"
     type="button"                         x-on:click="newOpen = true" 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 px-[var(--nq-control-pad)]">
        <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>New issue</button>
                    </div>
        <div data-slot="progress" data-tone="default" role="progressbar"  aria-labelledby="nq-progress-46b5f8c5-label"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="40"     aria-valuetext="40%" data-progressing
    aria-label="Progress" class="flex w-full flex-col gap-1.5">
            <div data-slot="progress-head" class="flex items-baseline justify-between gap-3 text-body-sm">
            <span id="nq-progress-46b5f8c5-label" class="text-label text-foreground">Progress</span>            <span aria-hidden="true" class="text-muted-foreground tabular-nums">40%</span>        </div>
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:40%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
    </header>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('overview')" x-modelable="value" x-id="['nq-tabs']" x-model="tab" class="flex flex-col gap-4">
    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    aria-label="Checkout" class="relative z-0 flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border max-w-full overflow-x-auto">
    <button type="button" data-slot="tabs-tab" x-bind="tab('overview')"
     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">Overview</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('board')"
            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">Board<span class="ms-1.5 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">3</bdi>
</span></button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('list')"
            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">List<span class="ms-1.5 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">4</bdi>
</span></button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('timeline')"
            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">Timeline</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('activity')"
            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">Activity</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('time')"
            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">Time</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('ai')"
            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">AI cost</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('files')"
            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">Files</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('memory')"
            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">Memory</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('vault')"
            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">Vault</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('github')"
            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">GitHub</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('settings')"
            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">Settings</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('overview')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="project-overview" class="@container flex min-w-0 flex-col gap-4">
    <div data-slot="stat-grid" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Open issues</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">3</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Done</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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="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>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Overdue</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Progress</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">25%</bdi>
                                    </div>
                            </div>
                    </div>
    </div></div>
    <div class="grid min-w-0 gap-4 @3xl:grid-cols-2">
        <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-foreground text-h3">Open issues by status</h3>
                <div data-slot="card-description" class="text-body-sm text-muted-foreground">Where the work sits now</div></div>
            <div data-slot="card-content" class="px-4"><div data-slot="project-status-chart" role="img" aria-label="Open issues by status. To do 1, In progress 2" class="flex h-56 items-stretch gap-2">
                                            <div class="flex min-w-0 flex-1 flex-col items-center gap-1">
                            <div class="flex min-h-0 w-full flex-1 items-end border-b border-border">
                                <div class="w-full rounded-t-[3px]" style="height: 50%; background: var(--nq-tag-gray)"></div>
                            </div>
                            <span class="text-caption tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                            <span class="w-full truncate text-center text-[11px] text-muted-foreground">To do</span>
                        </div>
                                            <div class="flex min-w-0 flex-1 flex-col items-center gap-1">
                            <div class="flex min-h-0 w-full flex-1 items-end border-b border-border">
                                <div class="w-full rounded-t-[3px]" style="height: 100%; background: var(--nq-tag-blue)"></div>
                            </div>
                            <span class="text-caption tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                            <span class="w-full truncate text-center text-[11px] text-muted-foreground">In progress</span>
                        </div>
                                    </div></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-foreground text-h3">Burndown</h3>
                <div data-slot="card-description" class="text-body-sm text-muted-foreground">Open issues per day against the ideal line</div></div>
            <div data-slot="card-content" class="px-4"><div data-slot="project-burndown" role="img" aria-label="Burndown. 2026-09-16 - 2026-10-10" class="flex flex-col gap-1">
                    <div class="relative h-56">
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                                            <line x1="0" x2="100" y1="0" y2="0" stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke" />
                                                            <line x1="0" x2="100" y1="25" y2="25" stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke" />
                                                            <line x1="0" x2="100" y1="50" y2="50" stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke" />
                                                            <line x1="0" x2="100" y1="75" y2="75" stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke" />
                                                            <line x1="0" x2="100" y1="100" y2="100" stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke" />
                                                        <polyline points="0,50 4.2,52.4 8.3,54.8 12.5,54.8 16.7,57.2 20.8,59.6 25,62 29.2,64.4 33.3,66.8 37.5,66.8 41.7,69.2 45.8,71.6 50,74 54.2,76.4 58.3,78.8 62.5,78.8 66.7,81.2 70.8,83.6 75,86 79.2,88.4 83.3,90.8 87.5,90.8 91.7,93.2 95.8,95.6 100,98" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" stroke-dasharray="4 4" vector-effect="non-scaling-stroke" />
                            <polyline points="0,50 4.2,50 8.3,50 12.5,50 16.7,26 20.8,2 25,2 29.2,2 33.3,2 37.5,26 41.7,26 45.8,26 50,26 54.2,26" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
                        </svg>
                        <span class="absolute start-0 top-0 text-caption tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">4</bdi>
</span>
                    </div>
                    <div class="flex justify-between text-caption text-muted-foreground"><span>16 Sep</span><span>10 Oct</span></div>
                </div>
                <ul class="m-0 mt-2 flex list-none justify-center gap-4 p-0 text-caption text-muted-foreground">
                    <li class="flex items-center gap-1.5"><span aria-hidden="true" class="h-0.5 w-4 bg-primary"></span>Remaining</li>
                    <li class="flex items-center gap-1.5"><span aria-hidden="true" class="w-4 border-t-2 border-dashed border-muted-foreground"></span>Ideal</li>
                </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-foreground text-h3">Recent activity</h3></div>
            <div data-slot="card-content" class="px-4"><ol data-slot="timeline" aria-label="Recent activity" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Said" >OS</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Moved NSQ-1 to In progress</p>
                            <time data-slot="date-time" datetime="2026-09-29T08:30:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">30 minutes ago</time>
                    </div>
                    <p class="text-body-sm text-muted-foreground">From To do</p>
                    </div>
</li>
                                                    <li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Commented on NSQ-1</p>
                            <time data-slot="date-time" datetime="2026-09-29T07:10:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">1 hour ago</time>
                    </div>
                    </div>
</li>
                                                    <li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Uploaded receipt-v2.pdf</p>
                            <time data-slot="date-time" datetime="2026-09-28T16:00:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">17 hours ago</time>
                    </div>
                    </div>
</li>
                                                    <li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span aria-hidden="true" class="size-2.5 rounded-full border-2 border-nq-line bg-background"></span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Created NSQ-4</p>
                            <time data-slot="date-time" datetime="2026-09-15T09:00:00+00:00" dir="auto"  title="Sep 15, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">2 weeks ago</time>
                    </div>
                    </div>
</li></ol></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-foreground text-h3">Budget</h3>
                <div data-slot="card-description" class="text-body-sm text-muted-foreground">Spent against the budget</div></div>
            <div data-slot="card-content" class="px-4 flex flex-col gap-3"><div data-slot="meter" data-tone="default" role="meter"  aria-labelledby="nq-meter-822bead6-label"     aria-valuemin="0" aria-valuemax="12000" aria-valuenow="4800" aria-valuetext="4,800%"
    class="flex w-full flex-col gap-1.5">
            <div data-slot="progress-head" class="flex items-baseline justify-between gap-3 text-body-sm">
            <span id="nq-meter-822bead6-label" class="text-label text-foreground">Budget</span>                    </div>
        <div data-slot="meter-track" class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-2">
        <div data-slot="meter-indicator" style="inset-inline-start:0;width:40%" class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                    <dl class="m-0 grid grid-cols-3 gap-3">
                        <div>
                            <dt class="text-caption text-muted-foreground">Spent</dt>
                            <dd class="m-0 text-body font-semibold"><bdi>$4,800.00</bdi></dd>
                        </div>
                        <div>
                            <dt class="text-caption text-muted-foreground">Left</dt>
                            <dd class="m-0 text-body font-semibold"><bdi>$7,200.00</bdi></dd>
                        </div>
                        <div>
                            <dt class="text-caption text-muted-foreground">Budget</dt>
                            <dd class="m-0 text-body font-semibold"><bdi>$12,000.00</bdi></dd>
                        </div>
                    </dl></div></div>
    </div>
</div></div>
                            <div data-slot="tabs-panel" x-bind="panel('board')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-2 pt-4"><p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="moveError" x-cloak style="display: none" x-text="moveError"></p>
                <div class="min-w-0 overflow-x-auto" data-pv-board x-on:move="onMove($event)">
                    <div data-slot="project-board" role="group" aria-label="Issue board"
    x-data="nqKanbanBoard(JSON.parse('[{\u0022id\u0022:\u0022todo\u0022,\u0022title\u0022:\u0022To do\u0022,\u0022stage\u0022:\u0022todo\u0022},{\u0022id\u0022:\u0022doing\u0022,\u0022title\u0022:\u0022In progress\u0022,\u0022stage\u0022:\u0022active\u0022},{\u0022id\u0022:\u0022done\u0022,\u0022title\u0022:\u0022Shipped\u0022,\u0022stage\u0022:\u0022done\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022i1\u0022,\u0022columnId\u0022:\u0022doing\u0022,\u0022title\u0022:\u0022NSQ-1 Refunds fail for split payments\u0022,\u0022key\u0022:\u0022NSQ-1\u0022,\u0022issueTitle\u0022:\u0022Refunds fail for split payments\u0022,\u0022type\u0022:\u0022bug\u0022,\u0022priority\u0022:\u0022high\u0022,\u0022priorityLabel\u0022:\u0022High\u0022,\u0022typeLabel\u0022:\u0022Bug\u0022,\u0022dueState\u0022:\u0022soon\u0022,\u0022dueWord\u0022:\u0022Due\u0022,\u0022overdueWord\u0022:\u0022Overdue\u0022,\u0022assigneeLabel\u0022:\u0022Assigned to Layla Hassan\u0022,\u0022due\u0022:\u00222 Oct\u0022,\u0022labels\u0022:[{\u0022label\u0022:\u0022Backend\u0022,\u0022hue\u0022:\u0022teal\u0022}],\u0022assignee\u0022:{\u0022name\u0022:\u0022Layla Hassan\u0022}},{\u0022id\u0022:\u0022i2\u0022,\u0022columnId\u0022:\u0022todo\u0022,\u0022title\u0022:\u0022NSQ-2 New receipt layout\u0022,\u0022key\u0022:\u0022NSQ-2\u0022,\u0022issueTitle\u0022:\u0022New receipt layout\u0022,\u0022type\u0022:\u0022task\u0022,\u0022priority\u0022:\u0022medium\u0022,\u0022priorityLabel\u0022:\u0022Medium\u0022,\u0022typeLabel\u0022:\u0022Task\u0022,\u0022dueState\u0022:\u0022later\u0022,\u0022dueWord\u0022:\u0022Due\u0022,\u0022overdueWord\u0022:\u0022Overdue\u0022,\u0022assigneeLabel\u0022:\u0022Assigned to Omar Said\u0022,\u0022due\u0022:\u002210 Oct\u0022,\u0022labels\u0022:[{\u0022label\u0022:\u0022Design\u0022,\u0022hue\u0022:\u0022violet\u0022}],\u0022assignee\u0022:{\u0022name\u0022:\u0022Omar Said\u0022}},{\u0022id\u0022:\u0022i3\u0022,\u0022columnId\u0022:\u0022done\u0022,\u0022title\u0022:\u0022NSQ-3 Saved cards\u0022,\u0022key\u0022:\u0022NSQ-3\u0022,\u0022issueTitle\u0022:\u0022Saved cards\u0022,\u0022type\u0022:\u0022feature\u0022,\u0022priority\u0022:\u0022low\u0022,\u0022priorityLabel\u0022:\u0022Low\u0022,\u0022typeLabel\u0022:\u0022Feature\u0022,\u0022dueState\u0022:\u0022none\u0022,\u0022dueWord\u0022:\u0022Due\u0022,\u0022overdueWord\u0022:\u0022Overdue\u0022,\u0022assigneeLabel\u0022:\u0022\u0022,\u0022due\u0022:\u0022\u0022,\u0022labels\u0022:[],\u0022assignee\u0022:null},{\u0022id\u0022:\u0022i4\u0022,\u0022columnId\u0022:\u0022doing\u0022,\u0022title\u0022:\u0022NSQ-4 Late fee wording\u0022,\u0022key\u0022:\u0022NSQ-4\u0022,\u0022issueTitle\u0022:\u0022Late fee wording\u0022,\u0022type\u0022:\u0022chore\u0022,\u0022priority\u0022:\u0022urgent\u0022,\u0022priorityLabel\u0022:\u0022Urgent\u0022,\u0022typeLabel\u0022:\u0022Chore\u0022,\u0022dueState\u0022:\u0022overdue\u0022,\u0022dueWord\u0022:\u0022Due\u0022,\u0022overdueWord\u0022:\u0022Overdue\u0022,\u0022assigneeLabel\u0022:\u0022Assigned to Layla Hassan\u0022,\u0022due\u0022:\u002226 Sep\u0022,\u0022labels\u0022:[],\u0022assignee\u0022:{\u0022name\u0022:\u0022Layla Hassan\u0022}}]'), {})" x-modelable="cards"
    class="flex w-full items-start gap-4 overflow-x-auto pb-2">
    <p id="nq-kanban-hint-e286f5" class="sr-only">To pick up a card, press Space or Enter. Use the arrow keys to move it within or between columns, Space or Enter to drop it, Escape to cancel.</p>
    <template x-for="column in columns" :key="column.id">
        <section data-slot="kanban-column" x-bind:data-column-id="column.id" x-bind:data-over="overColumn() === column.id ? '' : null"
            class="flex max-h-full w-72 shrink-0 flex-col gap-3 rounded-card border border-border bg-secondary p-3 transition-colors duration-150 ease-nq data-over:border-nq-focus">
            <header data-slot="kanban-column-header" class="flex items-center justify-between gap-2">
                <h3 class="min-w-0 truncate text-label text-foreground" x-text="column.title"></h3>
                <span data-slot="badge" x-bind:aria-label="countLabel(column.id)" 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 class="tabular-nums" x-text="num(count(column.id))"></span>
                </span>
            </header>
            <ul data-slot="kanban-list" class="flex min-h-16 flex-1 flex-col gap-2 overflow-y-auto">
                <template x-for="card in list(column.id)" :key="card.id">
                    <li data-slot="kanban-item" x-bind:data-card-id="card.id" x-bind:data-dragging="activeId === card.id ? '' : null" role="button" tabindex="0"
                        aria-roledescription="draggable card" x-bind:aria-pressed="activeId === card.id ? 'true' : 'false'" aria-describedby="nq-kanban-hint-e286f5"
                        x-bind:class="activeId === card.id && 'opacity-40'" x-on:pointerdown="down($event, card.id)" x-on:keydown="key($event, card.id)"
                        class="cursor-grab touch-manipulation rounded-card outline-none active:cursor-grabbing focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                        <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger"><div data-slot="issue-card" x-on:click="openIssue(card.id)"
    x-data="{ cls: { overdue: 'text-nq-danger-text', today: 'text-nq-warning-text', soon: 'text-nq-warning-text', later: 'text-muted-foreground', none: 'text-muted-foreground' },
        due(card, columns) { const stage = (columns.find((c) => c.id === card.columnId) || {}).stage; return card.dueState === 'overdue' && (stage === 'done' || stage === 'canceled') ? 'later' : card.dueState; } }"
    class="flex w-full cursor-pointer flex-col gap-2 rounded-card border border-border bg-card p-3 text-start text-card-foreground">
    <div class="flex items-center gap-2 text-caption text-muted-foreground">
                    <span x-show="card.type === 'bug'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M12 20v-9"/>
  <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/>
  <path d="M14.12 3.88 16 2"/>
  <path d="M21 21a4 4 0 0 0-3.81-4"/>
  <path d="M21 5a4 4 0 0 1-3.55 3.97"/>
  <path d="M22 13h-4"/>
  <path d="M3 21a4 4 0 0 1 3.81-4"/>
  <path d="M3 5a4 4 0 0 0 3.55 3.97"/>
  <path d="M6 13H2"/>
  <path d="m8 2 1.88 1.88"/>
  <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>
</svg></span>
                    <span x-show="card.type === 'feature'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg></span>
                    <span x-show="card.type === 'improvement'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg></span>
                    <span x-show="card.type === 'task'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="m9 12 2 2 4-4"/>
</svg></span>
                    <span x-show="card.type === 'chore'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>
</svg></span>
                <bdi dir="ltr" class="font-mono" x-text="card.key"></bdi>
        <span class="ms-auto inline-flex items-center gap-1" x-bind:title="card.priorityLabel">
                            <span x-show="card.priority === 'urgent'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-danger)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'high'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-orange)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'medium'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-amber)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'low'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-blue)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'none'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-fg-muted)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                        <span class="sr-only" x-text="card.priorityLabel"></span>
        </span>
    </div>
    <div class="text-label text-foreground" x-text="card.issueTitle"></div>
    <div x-show="card.labels && card.labels.length" x-cloak style="display: none" class="flex flex-wrap gap-1">
        <template x-for="l in (card.labels || [])" :key="l.label">
            <span data-slot="badge" x-bind:style="tagStyle(l.hue)" 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-transparent" x-text="l.label"></span>
        </template>
    </div>
    <div x-show="card.due || card.assignee" x-cloak style="display: none" class="flex items-center gap-3 text-caption text-muted-foreground">
        <span x-show="card.due" x-cloak style="display: none" x-bind:data-due="due(card, columns)" x-bind:class="cls[due(card, columns)]" class="inline-flex items-center gap-1">
            <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="M8 2v3"/>
  <path d="M16 2v3"/>
  <rect x="3" y="3" width="18" height="18" rx="2"/>
  <path d="M3 9h18"/>
  <path d="M8 13h.01"/>
  <path d="M12 13h.01"/>
  <path d="M16 13h.01"/>
  <path d="M8 17h.01"/>
  <path d="M12 17h.01"/>
  <path d="M16 17h.01"/>
</svg>            <span class="sr-only" x-text="card.dueWord"></span>
            <span x-text="card.due"></span>
            <span x-show="due(card, columns) === 'overdue'" x-cloak style="display: none" class="sr-only" x-text="'(' + card.overdueWord + ')'"></span>
        </span>
        <span x-show="card.assignee" x-cloak style="display: none" data-slot="avatar" x-bind:title="card.assignee && card.assignee.name" x-bind:aria-label="card.assigneeLabel" class="ms-auto inline-flex size-5 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle text-[9px] font-medium text-secondary-foreground" x-text="card.assignee ? initials(card.assignee.name) : ''"></span>
    </div>
</div></div>
                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openIssue(card.id)" 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</div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyKey(card.key)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                    </li>
                </template>
                <li data-slot="kanban-empty" x-show="count(column.id) === 0" x-cloak style="display: none" class="flex flex-1 items-center justify-center rounded-card border border-dashed border-border p-4 text-body-sm text-muted-foreground">No issues</li>
            </ul>
        </section>
    </template>
    <div data-slot="kanban-overlay" aria-hidden="true" x-show="activeCard() && overlay" x-cloak style="display: none" x-bind:style="overlay ? 'left:' + overlay.left + 'px;top:' + overlay.top + 'px;width:' + overlay.width + 'px' : null" class="pointer-events-none fixed z-50 cursor-grabbing shadow-lg">
        <template x-if="activeCard()">
            <template x-for="card in [activeCard()]" :key="card.id">
                <div data-slot="issue-card" x-on:click="openIssue(card.id)"
    x-data="{ cls: { overdue: 'text-nq-danger-text', today: 'text-nq-warning-text', soon: 'text-nq-warning-text', later: 'text-muted-foreground', none: 'text-muted-foreground' },
        due(card, columns) { const stage = (columns.find((c) => c.id === card.columnId) || {}).stage; return card.dueState === 'overdue' && (stage === 'done' || stage === 'canceled') ? 'later' : card.dueState; } }"
    class="flex w-full cursor-pointer flex-col gap-2 rounded-card border border-border bg-card p-3 text-start text-card-foreground">
    <div class="flex items-center gap-2 text-caption text-muted-foreground">
                    <span x-show="card.type === 'bug'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M12 20v-9"/>
  <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/>
  <path d="M14.12 3.88 16 2"/>
  <path d="M21 21a4 4 0 0 0-3.81-4"/>
  <path d="M21 5a4 4 0 0 1-3.55 3.97"/>
  <path d="M22 13h-4"/>
  <path d="M3 21a4 4 0 0 1 3.81-4"/>
  <path d="M3 5a4 4 0 0 0 3.55 3.97"/>
  <path d="M6 13H2"/>
  <path d="m8 2 1.88 1.88"/>
  <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>
</svg></span>
                    <span x-show="card.type === 'feature'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg></span>
                    <span x-show="card.type === 'improvement'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg></span>
                    <span x-show="card.type === 'task'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="m9 12 2 2 4-4"/>
</svg></span>
                    <span x-show="card.type === 'chore'" x-cloak style="display: none" role="img" x-bind:aria-label="card.typeLabel" class="inline-flex"><svg aria-hidden="true" class="size-4 shrink-0 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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>
</svg></span>
                <bdi dir="ltr" class="font-mono" x-text="card.key"></bdi>
        <span class="ms-auto inline-flex items-center gap-1" x-bind:title="card.priorityLabel">
                            <span x-show="card.priority === 'urgent'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-danger)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'high'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-orange)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'medium'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-amber)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'low'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-tag-blue)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                            <span x-show="card.priority === 'none'" x-cloak style="display: none" class="contents"><svg aria-hidden="true" style="color: var(--nq-fg-muted)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                        <span class="sr-only" x-text="card.priorityLabel"></span>
        </span>
    </div>
    <div class="text-label text-foreground" x-text="card.issueTitle"></div>
    <div x-show="card.labels && card.labels.length" x-cloak style="display: none" class="flex flex-wrap gap-1">
        <template x-for="l in (card.labels || [])" :key="l.label">
            <span data-slot="badge" x-bind:style="tagStyle(l.hue)" 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-transparent" x-text="l.label"></span>
        </template>
    </div>
    <div x-show="card.due || card.assignee" x-cloak style="display: none" class="flex items-center gap-3 text-caption text-muted-foreground">
        <span x-show="card.due" x-cloak style="display: none" x-bind:data-due="due(card, columns)" x-bind:class="cls[due(card, columns)]" class="inline-flex items-center gap-1">
            <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="M8 2v3"/>
  <path d="M16 2v3"/>
  <rect x="3" y="3" width="18" height="18" rx="2"/>
  <path d="M3 9h18"/>
  <path d="M8 13h.01"/>
  <path d="M12 13h.01"/>
  <path d="M16 13h.01"/>
  <path d="M8 17h.01"/>
  <path d="M12 17h.01"/>
  <path d="M16 17h.01"/>
</svg>            <span class="sr-only" x-text="card.dueWord"></span>
            <span x-text="card.due"></span>
            <span x-show="due(card, columns) === 'overdue'" x-cloak style="display: none" class="sr-only" x-text="'(' + card.overdueWord + ')'"></span>
        </span>
        <span x-show="card.assignee" x-cloak style="display: none" data-slot="avatar" x-bind:title="card.assignee && card.assignee.name" x-bind:aria-label="card.assigneeLabel" class="ms-auto inline-flex size-5 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle text-[9px] font-medium text-secondary-foreground" x-text="card.assignee ? initials(card.assignee.name) : ''"></span>
    </div>
</div>
            </template>
        </template>
    </div>
    <div role="status" aria-live="assertive" class="sr-only" x-text="announcement"></div>
</div>
                </div></div>
                            <div data-slot="tabs-panel" x-bind="panel('list')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-2 pt-4"><p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="listError" x-cloak style="display: none" x-text="listError"></p>
                <div data-pv-list class="min-w-0" x-on:nq-data-table-edit="onListEdit($event)" x-on:nq-data-table-action="onListAction($event)" x-on:nq-data-table-row-click="onListRow($event)">
                    <div data-slot="project-issue-table" class="flex min-w-0 flex-col gap-3">
    <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022i1\u0022,\u0022key\u0022:\u0022NSQ-1\u0022,\u0022title\u0022:\u0022Refunds fail for split payments\u0022,\u0022status\u0022:\u0022doing\u0022,\u0022priority\u0022:\u0022high\u0022,\u0022assignee\u0022:\u0022u1\u0022,\u0022due\u0022:\u00222026-10-02\u0022,\u0022estimate\u0022:4},{\u0022id\u0022:\u0022i2\u0022,\u0022key\u0022:\u0022NSQ-2\u0022,\u0022title\u0022:\u0022New receipt layout\u0022,\u0022status\u0022:\u0022todo\u0022,\u0022priority\u0022:\u0022medium\u0022,\u0022assignee\u0022:\u0022u2\u0022,\u0022due\u0022:\u00222026-10-10\u0022,\u0022estimate\u0022:null},{\u0022id\u0022:\u0022i3\u0022,\u0022key\u0022:\u0022NSQ-3\u0022,\u0022title\u0022:\u0022Saved cards\u0022,\u0022status\u0022:\u0022done\u0022,\u0022priority\u0022:\u0022low\u0022,\u0022assignee\u0022:\u0022\u0022,\u0022due\u0022:null,\u0022estimate\u0022:null},{\u0022id\u0022:\u0022i4\u0022,\u0022key\u0022:\u0022NSQ-4\u0022,\u0022title\u0022:\u0022Late fee wording\u0022,\u0022status\u0022:\u0022doing\u0022,\u0022priority\u0022:\u0022urgent\u0022,\u0022assignee\u0022:\u0022u1\u0022,\u0022due\u0022:\u00222026-09-26\u0022,\u0022estimate\u0022:null}]'), JSON.parse('[{\u0022id\u0022:\u0022key\u0022,\u0022header\u0022:\u0022Key\u0022,\u0022type\u0022:\u0022mono\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022title\u0022,\u0022header\u0022:\u0022Title\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022edit\u0022:\u0022text\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022todo\u0022,\u0022label\u0022:\u0022To do\u0022,\u0022hue\u0022:\u0022gray\u0022},{\u0022value\u0022:\u0022doing\u0022,\u0022label\u0022:\u0022In progress\u0022,\u0022hue\u0022:\u0022blue\u0022},{\u0022value\u0022:\u0022done\u0022,\u0022label\u0022:\u0022Shipped\u0022,\u0022hue\u0022:\u0022green\u0022}],\u0022edit\u0022:\u0022select\u0022},{\u0022id\u0022:\u0022priority\u0022,\u0022header\u0022:\u0022Priority\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022urgent\u0022,\u0022label\u0022:\u0022Urgent\u0022,\u0022hue\u0022:\u0022red\u0022},{\u0022value\u0022:\u0022high\u0022,\u0022label\u0022:\u0022High\u0022,\u0022hue\u0022:\u0022orange\u0022},{\u0022value\u0022:\u0022medium\u0022,\u0022label\u0022:\u0022Medium\u0022,\u0022hue\u0022:\u0022amber\u0022},{\u0022value\u0022:\u0022low\u0022,\u0022label\u0022:\u0022Low\u0022,\u0022hue\u0022:\u0022blue\u0022},{\u0022value\u0022:\u0022none\u0022,\u0022label\u0022:\u0022No priority\u0022,\u0022hue\u0022:\u0022gray\u0022}],\u0022edit\u0022:\u0022select\u0022},{\u0022id\u0022:\u0022assignee\u0022,\u0022header\u0022:\u0022Assignee\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Unassigned\u0022,\u0022hue\u0022:\u0022gray\u0022},{\u0022value\u0022:\u0022u1\u0022,\u0022label\u0022:\u0022Layla Hassan\u0022,\u0022hue\u0022:\u0022gray\u0022},{\u0022value\u0022:\u0022u2\u0022,\u0022label\u0022:\u0022Omar Said\u0022,\u0022hue\u0022:\u0022gray\u0022}],\u0022edit\u0022:\u0022select\u0022},{\u0022id\u0022:\u0022due\u0022,\u0022header\u0022:\u0022Due\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true,\u0022edit\u0022:\u0022date\u0022},{\u0022id\u0022:\u0022estimate\u0022,\u0022header\u0022:\u0022Estimate (h)\u0022,\u0022type\u0022:\u0022number\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true,\u0022edit\u0022:\u0022number\u0022}]'), JSON.parse('{\u0022pageSize\u0022:25,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022open\u0022},{\u0022id\u0022:\u0022copy\u0022},{\u0022id\u0022:\u0022delete\u0022,\u0022group\u0022:\u0022danger\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"
    class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search issues…" aria-label="Search issues…" 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;status&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="status" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <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>                        Status
                        <span data-slot="badge" x-show="facetCount('status')" x-text="facetSummary('status')" 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;status|todo&#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>
    To do
</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;status|doing&#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>
    In progress
</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;status|done&#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>
    Shipped
</div></div>
                        <div x-show="facetCount('status')" 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;status&#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 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;priority&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="priority" 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>                        Priority
                        <span data-slot="badge" x-show="facetCount('priority')" x-text="facetSummary('priority')" 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;priority|urgent&#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>
    Urgent
</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;priority|high&#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>
    High
</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;priority|medium&#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>
    Medium
</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;priority|low&#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>
    Low
</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;priority|none&#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>
    No priority
</div></div>
                        <div x-show="facetCount('priority')" 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;priority&#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 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;assignee&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="assignee" 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>                        Assignee
                        <span data-slot="badge" x-show="facetCount('assignee')" x-text="facetSummary('assignee')" 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;assignee|&#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>
    Unassigned
</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;assignee|u1&#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>
    Layla Hassan
</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;assignee|u2&#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>
    Omar Said
</div></div>
                        <div x-show="facetCount('assignee')" 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;assignee&#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>
            <button data-slot="button"
     type="button"                         x-on:click="newOpen = true" 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>New issue</button>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Issues"                 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="Issues"  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="key" x-show="shown['key']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('key')"                             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('key', $event.shiftKey)"
                                    x-bind:class="sortOf('key') ? '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 >Key</span>
                                    <svg aria-hidden="true" x-show="! sortOf('key')" 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('key') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('key') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="title" x-show="shown['title']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('title')"                             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('title', $event.shiftKey)"
                                    x-bind:class="sortOf('title') ? '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 >Title</span>
                                    <svg aria-hidden="true" x-show="! sortOf('title')" 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('title') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('title') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('status')"                             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('status', $event.shiftKey)"
                                    x-bind:class="sortOf('status') ? '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 >Status</span>
                                    <svg aria-hidden="true" x-show="! sortOf('status')" 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('status') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="priority" x-show="shown['priority']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('priority')"                             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('priority', $event.shiftKey)"
                                    x-bind:class="sortOf('priority') ? '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 >Priority</span>
                                    <svg aria-hidden="true" x-show="! sortOf('priority')" 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('priority') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('priority') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="assignee" x-show="shown['assignee']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('assignee')"                             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('assignee', $event.shiftKey)"
                                    x-bind:class="sortOf('assignee') ? '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 >Assignee</span>
                                    <svg aria-hidden="true" x-show="! sortOf('assignee')" 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('assignee') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('assignee') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="due" x-show="shown['due']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('due')"                             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('due', $event.shiftKey)"
                                    x-bind:class="sortOf('due') ? '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 >Due</span>
                                    <svg aria-hidden="true" x-show="! sortOf('due')" 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('due') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('due') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="estimate" x-show="shown['estimate']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('estimate')"                             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('estimate', $event.shiftKey)"
                                    x-bind:class="sortOf('estimate') ? '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 >Estimate (h)</span>
                                    <svg aria-hidden="true" x-show="! sortOf('estimate')" 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('estimate') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('estimate') === '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 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">
  <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 issues yet</p>
                    <p class="text-body-sm text-muted-foreground">Create the first issue to start the board.</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="key" x-show="shown['key']"  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 " >
                                                                                            <bdi dir="ltr" class="min-w-0 truncate font-mono text-code" x-text="shownText(row, col(&#039;key&#039;))"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="title" x-show="shown['title']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;title&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;title&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;title&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;title&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;title&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;title&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;title&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;title&#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;title&#039;))">
                                                <div>
                                                                                                            <input type="text" x-model="draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;title&#039;))" x-bind:aria-invalid="invalid ? 'true' : null"
                                                            x-on:keydown.enter.prevent="commitEdit(row, col(&#039;title&#039;), 'down', $event)" x-on:keydown.tab="if (! commitEdit(row, col(&#039;title&#039;), 'right', $event)) $event.preventDefault()"
                                                            x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="commitEdit(row, col(&#039;title&#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;title&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;title&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;title&#039;))"></span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;title&#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;title&#039;))" x-bind:title="failure(row, col(&#039;title&#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;title&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;status&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;status&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;status&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;status&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;status&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;status&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;status&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;status&#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;status&#039;))">
                                                <div>
                                                                                                            <select x-model="draft" x-effect="draft = draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;status&#039;))"
                                                            x-on:change="commitEdit(row, col(&#039;status&#039;), 'none', $event, $event.target.value)" x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="cancelEdit($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">
                                                            <option value=""></option>
                                                                                                                            <option value="todo">To do</option>
                                                                                                                            <option value="doing">In progress</option>
                                                                                                                            <option value="done">Shipped</option>
                                                                                                                    </select>
                                                                                                    </div>
                                            </template>
                                                                                <span  x-show="! isEditing(row, col(&#039;status&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;status&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span data-slot="badge" x-show="shownText(row, col(&#039;status&#039;)) !== ''" x-bind:style="hueStyle(row, col(&#039;status&#039;))" style="display: none"
                                                    class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-transparent bg-[var(--tag-soft)] px-1.5 text-caption font-medium text-[var(--tag-solid)]" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;status&#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;status&#039;))" x-bind:title="failure(row, col(&#039;status&#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;status&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="priority" x-show="shown['priority']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;priority&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;priority&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;priority&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;priority&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;priority&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;priority&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;priority&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;priority&#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;priority&#039;))">
                                                <div>
                                                                                                            <select x-model="draft" x-effect="draft = draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;priority&#039;))"
                                                            x-on:change="commitEdit(row, col(&#039;priority&#039;), 'none', $event, $event.target.value)" x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="cancelEdit($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">
                                                            <option value=""></option>
                                                                                                                            <option value="urgent">Urgent</option>
                                                                                                                            <option value="high">High</option>
                                                                                                                            <option value="medium">Medium</option>
                                                                                                                            <option value="low">Low</option>
                                                                                                                            <option value="none">No priority</option>
                                                                                                                    </select>
                                                                                                    </div>
                                            </template>
                                                                                <span  x-show="! isEditing(row, col(&#039;priority&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;priority&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="inline-flex items-center gap-1.5">
                                    <span class="contents" x-show="row.priority === 'urgent'" style="display: none"><svg aria-hidden="true" style="color: var(--nq-danger)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                                    <span class="contents" x-show="row.priority === 'high'" style="display: none"><svg aria-hidden="true" style="color: var(--nq-tag-orange)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                                    <span class="contents" x-show="row.priority === 'medium'" style="display: none"><svg aria-hidden="true" style="color: var(--nq-tag-amber)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                                    <span class="contents" x-show="row.priority === 'low'" style="display: none"><svg aria-hidden="true" style="color: var(--nq-tag-blue)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                                    <span class="contents" x-show="row.priority === 'none'" style="display: none"><svg aria-hidden="true" style="color: var(--nq-fg-muted)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg></span>
                                <span x-text="shownText(row, col('priority'))"></span>
            </span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;priority&#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;priority&#039;))" x-bind:title="failure(row, col(&#039;priority&#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;priority&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="assignee" x-show="shown['assignee']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;assignee&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;assignee&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;assignee&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;assignee&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;assignee&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;assignee&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;assignee&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;assignee&#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;assignee&#039;))">
                                                <div>
                                                                                                            <select x-model="draft" x-effect="draft = draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;assignee&#039;))"
                                                            x-on:change="commitEdit(row, col(&#039;assignee&#039;), 'none', $event, $event.target.value)" x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="cancelEdit($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">
                                                            <option value=""></option>
                                                                                                                            <option value="">Unassigned</option>
                                                                                                                            <option value="u1">Layla Hassan</option>
                                                                                                                            <option value="u2">Omar Said</option>
                                                                                                                    </select>
                                                                                                    </div>
                                            </template>
                                                                                <span  x-show="! isEditing(row, col(&#039;assignee&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;assignee&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="inline-flex items-center gap-2">
                                    <span class="contents" x-show="row.assignee === 'u1'" style="display: none"><span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-5 text-[9px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
</span>
                                    <span class="contents" x-show="row.assignee === 'u2'" style="display: none"><span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-5 text-[9px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Said" >OS</span>
    </span>
</span>
                                <span x-bind:class="row.assignee === '' ? 'text-muted-foreground' : ''" x-text="shownText(row, col('assignee'))"></span>
            </span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;assignee&#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;assignee&#039;))" x-bind:title="failure(row, col(&#039;assignee&#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;assignee&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="due" x-show="shown['due']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;due&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;due&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;due&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;due&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;due&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;due&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;due&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;due&#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;due&#039;))">
                                                <div>
                                                                                                            <input type="date" x-model="draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;due&#039;))" x-bind:aria-invalid="invalid ? 'true' : null"
                                                            x-on:keydown.enter.prevent="commitEdit(row, col(&#039;due&#039;), 'down', $event)" x-on:keydown.tab="if (! commitEdit(row, col(&#039;due&#039;), 'right', $event)) $event.preventDefault()"
                                                            x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="commitEdit(row, col(&#039;due&#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;due&#039;))"  class="flex min-w-0 items-center gap-1.5 "  x-bind:class="isPending(row, col(&#039;due&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;due&#039;))"></span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;due&#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;due&#039;))" x-bind:title="failure(row, col(&#039;due&#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;due&#039;))"></span>
                                                </span>
                                                                                    </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="estimate" x-show="shown['estimate']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;estimate&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;estimate&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;estimate&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;estimate&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;estimate&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;estimate&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;estimate&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;estimate&#039;)) ? 'bg-nq-danger-soft' : ''"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-nq-focus">
                                                                                                                        <template x-if="isEditing(row, col(&#039;estimate&#039;))">
                                                <div>
                                                                                                            <input type="number" x-model="draft" aria-label="" x-bind:aria-label="editName(row, col(&#039;estimate&#039;))" x-bind:aria-invalid="invalid ? 'true' : null"
                                                            x-on:keydown.enter.prevent="commitEdit(row, col(&#039;estimate&#039;), 'down', $event)" x-on:keydown.tab="if (! commitEdit(row, col(&#039;estimate&#039;), 'right', $event)) $event.preventDefault()"
                                                            x-on:keydown.escape.stop.prevent="cancelEdit($event)" x-on:blur="commitEdit(row, col(&#039;estimate&#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 tabular-nums">
                                                        <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;estimate&#039;))"  class="flex min-w-0 items-center gap-1.5 justify-end"  x-bind:class="isPending(row, col(&#039;estimate&#039;)) ? 'opacity-60' : ''" >
                                                                                            <span class="min-w-0 flex-1  tabular-nums" x-text="shownText(row, col(&#039;estimate&#039;))"></span>
                                                                                                                                        <x-lucide-loader-circle aria-hidden="true" x-show="isPending(row, col(&#039;estimate&#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;estimate&#039;))" x-bind:title="failure(row, col(&#039;estimate&#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;estimate&#039;))"></span>
                                                </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;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <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</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;copy&#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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>                                                                Copy key</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="danger" x-bind="item"
        x-on:click="act(&#039;delete&#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 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>                                                                Delete</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <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;open&#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="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</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;copy&#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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>                                Copy key</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="danger" x-bind="item"
        x-on:click="act(&#039;delete&#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 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>                                Delete</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('timeline')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-6 pt-4"><div data-slot="project-schedule" class="flex min-w-0 flex-col gap-4">
        <div role="group" aria-label="Issue schedule" class="min-w-0 overflow-x-auto rounded-card border border-border">
            <div class="min-w-[44rem]">
                <div class="grid grid-cols-[13rem_minmax(0,1fr)] border-b border-border bg-muted/40 text-caption text-muted-foreground">
                    <div class="px-3 py-2"></div>
                    <div class="relative h-8">
                                                    <span class="absolute top-2 whitespace-nowrap ps-1.5" style="inset-inline-start: 0%">10 Sep</span>
                                                    <span class="absolute top-2 whitespace-nowrap ps-1.5" style="inset-inline-start: 22.581%">17 Sep</span>
                                                    <span class="absolute top-2 whitespace-nowrap ps-1.5" style="inset-inline-start: 45.161%">24 Sep</span>
                                                    <span class="absolute top-2 whitespace-nowrap ps-1.5" style="inset-inline-start: 67.742%">1 Oct</span>
                                                    <span class="absolute top-2 whitespace-nowrap ps-1.5" style="inset-inline-start: 90.323%">8 Oct</span>
                                            </div>
                </div>
                <div role="list" class="m-0 p-0">
                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="grid grid-cols-[13rem_minmax(0,1fr)] items-center border-b border-border last:border-b-0" role="listitem" data-issue-id="i1"><div class="flex min-w-0 items-center gap-2 px-3 py-2">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-blue)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">NSQ-1</bdi>
                                    <button type="button" x-on:click="openAt(0)" class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline">Refunds fail for split payments</button>
                                    <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" aria-label="Actions: NSQ-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 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">
  <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 min-w-44 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"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(0)" 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</div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(0)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                </div>
                                <div class="relative h-9">
                                                                            <span aria-hidden="true" class="absolute inset-y-0 w-px bg-nq-danger" style="inset-inline-start: 61.29%"></span>
                                                                        <span role="img" aria-label="NSQ-1: 24 Sep - 2 Oct"
                                        class="absolute top-2.5 h-4 rounded-full"
                                        style="inset-inline-start: 45.161%; inline-size: 29.032%; background: var(--nq-tag-blue)"></span>
                                </div></div>
                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(0)" 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</div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(0)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="grid grid-cols-[13rem_minmax(0,1fr)] items-center border-b border-border last:border-b-0" role="listitem" data-issue-id="i2"><div class="flex min-w-0 items-center gap-2 px-3 py-2">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-gray)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">NSQ-2</bdi>
                                    <button type="button" x-on:click="openAt(1)" class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline">New receipt layout</button>
                                    <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" aria-label="Actions: NSQ-2" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <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 min-w-44 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"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(1)" 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</div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(1)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                </div>
                                <div class="relative h-9">
                                                                            <span aria-hidden="true" class="absolute inset-y-0 w-px bg-nq-danger" style="inset-inline-start: 61.29%"></span>
                                                                        <span role="img" aria-label="NSQ-2: 21 Sep - 10 Oct"
                                        class="absolute top-2.5 h-4 rounded-full"
                                        style="inset-inline-start: 35.484%; inline-size: 64.516%; background: var(--nq-tag-gray)"></span>
                                </div></div>
                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(1)" 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</div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(1)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="grid grid-cols-[13rem_minmax(0,1fr)] items-center border-b border-border last:border-b-0" role="listitem" data-issue-id="i3"><div class="flex min-w-0 items-center gap-2 px-3 py-2">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-green)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">NSQ-3</bdi>
                                    <button type="button" x-on:click="openAt(2)" class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline">Saved cards</button>
                                    <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" aria-label="Actions: NSQ-3" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <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 min-w-44 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"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(2)" 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</div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(2)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                </div>
                                <div class="relative h-9">
                                                                            <span aria-hidden="true" class="absolute inset-y-0 w-px bg-nq-danger" style="inset-inline-start: 61.29%"></span>
                                                                        <span role="img" aria-label="NSQ-3: 10 Sep - 25 Sep"
                                        class="absolute top-2.5 h-4 rounded-full opacity-60"
                                        style="inset-inline-start: 0%; inline-size: 51.613%; background: var(--nq-tag-green)"></span>
                                </div></div>
                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(2)" 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</div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(2)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="grid grid-cols-[13rem_minmax(0,1fr)] items-center border-b border-border last:border-b-0" role="listitem" data-issue-id="i4"><div class="flex min-w-0 items-center gap-2 px-3 py-2">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-blue)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">NSQ-4</bdi>
                                    <button type="button" x-on:click="openAt(3)" class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline">Late fee wording</button>
                                    <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" aria-label="Actions: NSQ-4" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <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 min-w-44 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"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(3)" 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</div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(3)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                </div>
                                <div class="relative h-9">
                                                                            <span aria-hidden="true" class="absolute inset-y-0 w-px bg-nq-danger" style="inset-inline-start: 61.29%"></span>
                                                                        <span role="img" aria-label="NSQ-4: 15 Sep - 26 Sep"
                                        class="absolute top-2.5 h-4 rounded-full"
                                        style="inset-inline-start: 16.129%; inline-size: 38.71%; background: var(--nq-tag-blue)"></span>
                                </div></div>
                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openAt(3)" 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</div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyAt(3)" 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="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Copy key</div></div>
</template></div>
                                    </div>
            </div>
        </div>
                    <p class="m-0 flex items-center gap-2 text-caption text-muted-foreground"><span aria-hidden="true" class="inline-block h-3 w-px bg-nq-danger"></span>Today</p>
                    </div>
                                    <section aria-labelledby="project-notes-h" class="flex flex-col gap-3">
                        <h2 id="project-notes-h" class="m-0 text-body font-semibold">Notes and calls</h2>
                        <form data-slot="activity-composer" novalidate x-data="nqActivityComposer(JSON.parse('{\u0022kind\u0022:\u0022note\u0022,\u0022when\u0022:\u00222026-09-29T09:00\u0022,\u0022t\u0022:{\u0022bodyLabel\u0022:{\u0022note\u0022:\u0022Note\u0022,\u0022call\u0022:\u0022What was discussed\u0022,\u0022meeting\u0022:\u0022Minutes\u0022,\u0022task\u0022:\u0022What needs doing\u0022},\u0022bodyHint\u0022:{\u0022note\u0022:\u0022Write a note\\u2026\u0022,\u0022call\u0022:\u0022Summarise the call\\u2026\u0022,\u0022meeting\u0022:\u0022Decisions and next steps\\u2026\u0022,\u0022task\u0022:\u0022Follow up on\\u2026\u0022},\u0022whenLabel\u0022:{\u0022note\u0022:\u0022When\u0022,\u0022call\u0022:\u0022When\u0022,\u0022meeting\u0022:\u0022When\u0022,\u0022task\u0022:\u0022Due\u0022},\u0022submit\u0022:{\u0022note\u0022:\u0022Log note\u0022,\u0022call\u0022:\u0022Log call\u0022,\u0022meeting\u0022:\u0022Log meeting\u0022,\u0022task\u0022:\u0022Add task\u0022},\u0022errors\u0022:{\u0022empty\u0022:\u0022Write something first.\u0022,\u0022badDate\u0022:\u0022Pick a valid date and time.\u0022,\u0022badDuration\u0022:\u0022Duration must be between 0 and 1440 minutes.\u0022},\u0022failed\u0022:\u0022That did not work. Try again.\u0022}}'))" x-on:submit.prevent="submit()"
    class="flex min-w-0 flex-col gap-3 rounded-card border border-border bg-card p-3">
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('note')" x-modelable="value" x-id="['nq-tabs']" x-model="kind" class="flex flex-col gap-4">
    <div data-slot="tabs-list" data-variant="segmented" aria-orientation="horizontal" x-bind="list"
    aria-label="Kind of activity" class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden w-fit gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="tabs-tab" x-bind="tab('note')"
     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-7 rounded-[calc(var(--radius-control)-2px)] px-3"><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.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/>
  <path d="M2 6h4"/>
  <path d="M2 10h4"/>
  <path d="M2 14h4"/>
  <path d="M2 18h4"/>
  <path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>
</svg>                    Note</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('call')"
            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-7 rounded-[calc(var(--radius-control)-2px)] px-3"><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.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
</svg>                    Call</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('meeting')"
            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-7 rounded-[calc(var(--radius-control)-2px)] px-3"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
  <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
  <circle cx="9" cy="7" r="4"/>
</svg>                    Meeting</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('task')"
            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-7 rounded-[calc(var(--radius-control)-2px)] px-3"><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"/>
  <rect x="3" y="4" width="6" height="6" rx="1"/>
</svg>                    Task</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)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] rounded-[calc(var(--radius-control)-2px)] bg-background shadow-xs"></span>
</div>
</div>
    <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"  x-text="t.bodyLabel[kind]" class="text-label text-foreground data-disabled:opacity-50 sr-only">Note</label>
        <textarea data-slot="textarea"
                rows="3" dir="auto" x-model="body" x-bind:placeholder="t.bodyHint[kind]" x-bind:disabled="busy" 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>
    <div class="flex flex-wrap items-end gap-3">
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5 min-w-44 flex-1">
    <label data-slot="field-label"  x-text="t.whenLabel[kind]" class="text-label text-foreground data-disabled:opacity-50">When</label>
            <input data-slot="input" type="datetime-local"
     dir="ltr"                 value="2026-09-29T09:00" x-model="when" x-bind:disabled="busy" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-show="timed" style="display: none" class="flex flex-col gap-1.5 w-40">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Duration (minutes)</label>
            <input data-slot="input" type="number"
     dir="ltr"                 min="0" max="1440" inputmode="numeric" x-model="duration" x-bind:disabled="busy" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
        <button data-slot="button"
     type="submit"                         x-bind:disabled="busy" x-bind:aria-busy="busy || 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="t.submit[kind]">Log note</span></button>
    </div>
    <p x-show="error" style="display: none" x-text="error" role="alert" class="text-body-sm text-nq-danger-text"></p>
</form>
                        <div data-slot="activity-timeline" x-data="nqActivityTimeline(JSON.parse('{\u0022ids\u0022:[\u0022n1\u0022],\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022}}'))" class="flex min-w-0 flex-col gap-5">
                                                <section aria-label="Activity history" class="flex flex-col gap-2">
                    <h3 class="text-label text-foreground">History</h3>
                    <ol data-slot="timeline" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" data-activity-id="n1" data-kind="note"  x-data="nqContextMenu()"  class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div  data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger"  class="contents">
        <div class="flex flex-col items-center">
            <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                <span class="flex size-8 items-center justify-center rounded-full border border-border bg-secondary text-muted-foreground [&_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="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/>
  <path d="M2 6h4"/>
  <path d="M2 10h4"/>
  <path d="M2 14h4"/>
  <path d="M2 18h4"/>
  <path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>
</svg></span>
            </span>
            <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
        </div>
        <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
            <div class="flex items-baseline justify-between gap-3">
                <p class="min-w-0 text-body-sm font-medium text-foreground">
                                            <span class="flex flex-wrap items-center gap-2">
                            Note
                                                                                                            </span>
                                    </p>
                <time data-slot="date-time" datetime="2026-09-01T09:00:00+00:00" dir="auto"  title="Sep 1, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">4 weeks ago</time>
            </div>
                            <p class="text-body-sm text-muted-foreground">
                                            <span dir="auto" class="block whitespace-pre-wrap text-foreground">Kickoff done, scope agreed.</span>
                                    </p>
                                        <div class="flex flex-wrap items-center gap-2">
                                            <span class="text-caption text-muted-foreground">by Layla Hassan</span>
                                                                                    <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" aria-label="Activity actions" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <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-item" role="menuitem" data-variant="danger" x-bind="item"
        data-action="delete" x-on:click="removeActivity(0)" 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>Delete</div></div>
</template></div>
                                    </div>
                    </div>
    </div>
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        data-action="delete" x-on:click="removeActivity(0)" 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>Delete</div></div>
</template>
    </li></ol>
                </section>
                            <p x-show="error" style="display: none" x-text="error" role="alert" class="text-body-sm text-nq-danger-text"></p>
    </div>
                    </section></div>
                            <div data-slot="tabs-panel" x-bind="panel('time')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-4 pt-4"><div data-slot="time-tracker-root" x-data="nqTimeTracker(JSON.parse('{\u0022projects\u0022:[{\u0022id\u0022:\u0022p1\u0022,\u0022name\u0022:\u0022Checkout\u0022,\u0022tasks\u0022:[{\u0022id\u0022:\u0022i1\u0022,\u0022name\u0022:\u0022NSQ-1 Refunds fail for split payments\u0022},{\u0022id\u0022:\u0022i2\u0022,\u0022name\u0022:\u0022NSQ-2 New receipt layout\u0022},{\u0022id\u0022:\u0022i3\u0022,\u0022name\u0022:\u0022NSQ-3 Saved cards\u0022},{\u0022id\u0022:\u0022i4\u0022,\u0022name\u0022:\u0022NSQ-4 Late fee wording\u0022}]}],\u0022entries\u0022:[{\u0022id\u0022:\u0022e1\u0022,\u0022date\u0022:\u00222026-09-28\u0022,\u0022seconds\u0022:5400,\u0022projectId\u0022:\u0022p1\u0022,\u0022taskId\u0022:\u0022i1\u0022,\u0022note\u0022:\u0022Reproduction\u0022}],\u0022view\u0022:\u0022week\u0022}'))" class="flex flex-col gap-6">
    <div data-slot="time-tracker" 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]"><div data-slot="card-title" class="text-label text-foreground">Timer</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 role="timer" aria-label="Timer" aria-live="off" class="flex flex-col gap-0.5">
                <bdi dir="ltr" class="tabular-nums text-display-sm font-semibold text-foreground" x-text="clockText()">0:00:00</bdi>
                <span class="text-body-sm text-muted-foreground" x-text="activeLabel()">Choose a project to start the timer.</span>
            </div>
            <button data-slot="button"
     type="button"                         x-show="isRunning()" x-cloak="x-cloak" style="display: none" x-on:click="stop()" 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 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
</svg>                Stop timer</button>
            <button data-slot="button"
     type="button"                         x-show="!isRunning()" x-on:click="start()" 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 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-[calc(var(--nq-control)+8px)] px-5 text-body">
        <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 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                Start timer</button>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <div x-id="['project', 'task']" class="contents">
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('project')" class="text-label text-foreground">Project</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none 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" x-bind:id="$id('project')" x-effect="syncProject($el, 'sel')" x-on:change="pickProject('sel', $event.target.value)" x-bind:disabled="locked('sel')" x-bind:aria-invalid="invalidProject('sel') ? 'true' : null">
                    <option value=""   selected >Choose a project</option>
                            <option value="p1"  >Checkout</option>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 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="m6 9 6 6 6-6"/>
</svg></div>
        <div data-slot="field-error" role="alert" x-show="invalidProject('sel')" style="display: none" class="text-caption text-nq-danger-text">Choose a project.</div>
    </div>
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('task')" class="text-label text-foreground">Task</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none 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" x-bind:id="$id('task')" x-effect="syncTask($el, 'sel')" x-on:change="pickTask('sel', $event.target.value)" x-bind:disabled="taskLocked('sel')">
                    <option value=""   selected >No task</option>
                        <template x-for="x in tasksOf(projectValue('sel'))" x-bind:key="x.id"><option x-bind:value="x.id" x-text="x.name"></option></template>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 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="m6 9 6 6 6-6"/>
</svg></div>
    </div>
</div>
            <div x-id="['note']" data-slot="field" class="flex flex-col gap-1.5 sm:col-span-2">
                <label data-slot="field-label" x-bind:for="$id('note')" class="text-label text-foreground">What are you working on?</label>
                <input data-slot="input" type="text"
                    x-bind:id="$id(&#039;note&#039;)" x-model="note" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
            </div>
        </div>
        <p role="alert" x-show="message" style="display: none" x-text="message" class="text-body-sm text-nq-danger-text"></p>
        <span role="status" class="sr-only" x-text="announce"></span></div></div>
                    <section data-slot="time-entry-list" x-id="['entries']" x-bind:aria-labelledby="$id('entries')" class="flex flex-col gap-3">
    <div class="flex items-center justify-between gap-3">
        <h2 x-bind:id="$id('entries')" class="text-title-sm text-foreground">Time entries</h2>
                    <button data-slot="button"
     type="button"                         x-on:click="openDialog(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 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="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>                Add time</button>
            </div>
    <div x-show="!entries.length" style="display: none">
        <div data-slot="empty-state" 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">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No time logged yet</p>
                    <p class="text-body-sm text-muted-foreground">Start the timer or add an entry by hand.</p>
            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="openDialog(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg 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 time</button></div>
    </div>
    </div>
    <template x-for="g in groups()" x-bind:key="g.day">
        <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 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] flex-row items-center justify-between gap-3"><div data-slot="card-title" class="text-foreground text-label"><span x-text="g.text"></span></div>
                <span class="text-body-sm text-muted-foreground">
                    Day total <bdi dir="ltr" class="tabular-nums font-medium text-foreground" x-text="hours(g.total)"></bdi>
                </span></div>
            <div data-slot="card-content" class="px-4"><ul class="divide-y divide-border">
                    <template x-for="e in g.items" x-bind:key="e.id">
                        <li class="flex items-center gap-3 py-2">
                            <div class="flex min-w-0 flex-1 flex-col">
                                <span class="truncate text-body-sm font-medium text-foreground" x-text="label(e.projectId, e.taskId)"></span>
                                <span x-show="e.note" class="truncate text-body-sm text-muted-foreground" x-text="e.note"></span>
                            </div>
                            <bdi dir="ltr" class="tabular-nums text-body-sm font-medium text-foreground" x-text="hours(e.seconds)"></bdi>
                                                            <button data-slot="button"
     type="button"                         x-bind:aria-label="entryAria(&#039;edit&#039;, e)" x-on:click="openDialog(e)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                        <button data-slot="button"
     type="button"                         x-bind:aria-label="entryAria(&#039;remove&#039;, e)" x-on:click="removeEntry(e)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                                    </li>
                    </template>
                </ul></div></div>
    </template>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="dlg.open" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form novalidate class="grid gap-4" x-on:submit.prevent="submitDialog()">
                    <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"><span x-text="dialogTitle()">Add time</span></h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Log time you did not track with the timer.</p></div>
                    <div data-slot="field" class="flex flex-col gap-1.5">
                        <span data-slot="field-label" class="text-label text-foreground">Date</span>
                        <div data-slot="date-picker" x-data="nqDatePicker(JSON.parse('{\u0022value\u0022:null,\u0022locale\u0022:\u0022en\u0022,\u0022calendar\u0022:null,\u0022placeholder\u0022:\u0022Select a date\u0022}'))" x-modelable="date" class="contents" x-model="dlg.date">
    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button type="button" x-ref="trigger" data-slot="date-picker-trigger" aria-haspopup="dialog" x-on:click="toggle()"
    :aria-expanded="open" x-bind:data-popup-open="open ? '' : undefined"
            aria-label="Date" 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 aria-invalid:border-nq-danger data-disabled:cursor-not-allowed data-disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span class="min-w-0 flex-1 truncate text-start tabular-nums" x-bind:class="label ? '' : 'text-muted-foreground'" x-bind:data-placeholder="label ? null : ''"
        x-text="label ?? placeholder">Select a date</span>
    <svg aria-hidden="true" class="size-4 shrink-0 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="M8 2v3"/>
  <path d="M16 2v3"/>
  <rect x="3" y="3" width="18" height="18" rx="2"/>
  <path d="M3 9h18"/>
  <path d="M8 13h.01"/>
  <path d="M12 13h.01"/>
  <path d="M16 13h.01"/>
  <path d="M8 17h.01"/>
  <path d="M12 17h.01"/>
  <path d="M16 17h.01"/>
</svg></button>
                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        dir="ltr" lang="en" aria-label="Choose date" x-effect="date; $nextTick(() =&gt; close())" class="z-50 rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-auto max-w-[var(--available-width)] p-3"><div data-slot="calendar" data-mode="single" dir="ltr" lang="en" x-data="nqCalendar(JSON.parse('{\u0022mode\u0022:\u0022single\u0022,\u0022value\u0022:null,\u0022month\u0022:\u00222026-09-01\u0022,\u0022numberOfMonths\u0022:1,\u0022min\u0022:null,\u0022max\u0022:null,\u0022disabled\u0022:[],\u0022disabledWeekdays\u0022:[],\u0022showOutsideDays\u0022:true,\u0022fixedWeeks\u0022:false,\u0022weekStartsOn\u0022:null,\u0022locale\u0022:\u0022en\u0022,\u0022dir\u0022:\u0022ltr\u0022,\u0022calendar\u0022:null,\u0022today\u0022:null,\u0022previousMonthLabel\u0022:null,\u0022nextMonthLabel\u0022:null}'))" x-modelable="value" x-bind="root"
    x-model="date" class="inline-flex w-fit flex-col gap-2 text-body-sm text-foreground">
    <div class="flex flex-wrap gap-x-6 gap-y-4">
                                <div data-ssr data-slot="calendar-month" class="flex flex-col gap-2">
                <div class="flex items-center justify-between gap-2">
                                            <button data-slot="button"
     type="button"                         aria-label="Previous month" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
                                        <div aria-live="polite" data-slot="calendar-title" class="text-label font-semibold">September 2026</div>
                                            <button data-slot="button"
     type="button"                         aria-label="Next month" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
                                    </div>
                <table role="grid" aria-label="September 2026" data-slot="calendar-grid" class="border-separate border-spacing-0">
                    <thead>
                        <tr>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">S</span><span class="sr-only">Sunday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">M</span><span class="sr-only">Monday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">T</span><span class="sr-only">Tuesday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">W</span><span class="sr-only">Wednesday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">T</span><span class="sr-only">Thursday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">F</span><span class="sr-only">Friday</span></th>
                                                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true">S</span><span class="sr-only">Saturday</span></th>
                                                    </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-08-30"                                                   data-outside   aria-label="Sunday, August 30, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">30</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-08-31"                                                   data-outside   aria-label="Monday, August 31, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">31</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-01"                                                    aria-label="Tuesday, September 1, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">1</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-02"                                                    aria-label="Wednesday, September 2, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">2</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-03"                                                    aria-label="Thursday, September 3, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">3</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-04"                                                    aria-label="Friday, September 4, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">4</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-05"                                                    aria-label="Saturday, September 5, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">5</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-06"                                                    aria-label="Sunday, September 6, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">6</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-07"                                                    aria-label="Monday, September 7, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">7</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-08"                                                    aria-label="Tuesday, September 8, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">8</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-09"                                                    aria-label="Wednesday, September 9, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">9</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-10"                                                    aria-label="Thursday, September 10, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">10</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-11"                                                    aria-label="Friday, September 11, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">11</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-12"                                                    aria-label="Saturday, September 12, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">12</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-13"                                                    aria-label="Sunday, September 13, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">13</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-14"                                                    aria-label="Monday, September 14, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">14</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-15"                                                    aria-label="Tuesday, September 15, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">15</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-16"                                                    aria-label="Wednesday, September 16, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">16</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-17"                                                    aria-label="Thursday, September 17, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">17</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-18"                                                    aria-label="Friday, September 18, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">18</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-19"                                                    aria-label="Saturday, September 19, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">19</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-20"                                                    aria-label="Sunday, September 20, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">20</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-21"                                                    aria-label="Monday, September 21, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">21</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-22"                                                    aria-label="Tuesday, September 22, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">22</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-23"                                                    aria-label="Wednesday, September 23, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">23</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-24"                                                    aria-label="Thursday, September 24, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">24</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-25"                                                    aria-label="Friday, September 25, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">25</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-26"                                                    aria-label="Saturday, September 26, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">26</button>
                                        </td>
                                                                                                </tr>
                                                    <tr>
                                                                                                                                                <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-27"                                                    aria-label="Sunday, September 27, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">27</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-28"                                                    aria-label="Monday, September 28, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">28</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="0" data-date="2026-09-29"   data-today aria-current="date"                                                   aria-label="Tuesday, September 29, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">29</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-09-30"                                                    aria-label="Wednesday, September 30, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">30</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-01"                                                   data-outside   aria-label="Thursday, October 1, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">1</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-02"                                                   data-outside   aria-label="Friday, October 2, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">2</button>
                                        </td>
                                                                                                                                                                                    <td role="gridcell"   class="p-0 text-center   ">
                                            <button type="button" tabindex="-1" data-date="2026-10-03"                                                   data-outside   aria-label="Saturday, October 3, 2026" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary">3</button>
                                        </td>
                                                                                                </tr>
                                            </tbody>
                </table>
            </div>
                <template x-for="m in monthViews" :key="m.key">
            <div data-slot="calendar-month" class="flex flex-col gap-2">
                <div class="flex items-center justify-between gap-2">
                    <button data-slot="button"
     type="button"                         x-show="m.first" x-bind:aria-label="prevLabel" x-bind:disabled="prevBlocked" x-on:click="step(-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 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="rtl" 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="m9 18 6-6-6-6"/>
</svg>                        <svg x-show="!rtl" 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 18-6-6 6-6"/>
</svg></button>
                    <span x-show="!m.first" class="size-control-sm"></span>
                    <div aria-live="polite" data-slot="calendar-title" class="text-label font-semibold" x-text="m.title"></div>
                    <button data-slot="button"
     type="button"                         x-show="m.last" x-bind:aria-label="nextLabel" x-bind:disabled="nextBlocked" x-on:click="step(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 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="rtl" 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 18-6-6 6-6"/>
</svg>                        <svg x-show="!rtl" 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="m9 18 6-6-6-6"/>
</svg></button>
                    <span x-show="!m.last" class="size-control-sm"></span>
                </div>
                <table role="grid" :aria-label="m.title" data-slot="calendar-grid" class="border-separate border-spacing-0">
                    <thead>
                        <tr>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[0].narrow"></span><span class="sr-only" x-text="m.heads[0].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[1].narrow"></span><span class="sr-only" x-text="m.heads[1].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[2].narrow"></span><span class="sr-only" x-text="m.heads[2].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[3].narrow"></span><span class="sr-only" x-text="m.heads[3].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[4].narrow"></span><span class="sr-only" x-text="m.heads[4].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[5].narrow"></span><span class="sr-only" x-text="m.heads[5].long"></span></th>
                                                            <th scope="col" class="size-9 p-0 text-caption font-medium text-muted-foreground"><span aria-hidden="true" x-text="m.heads[6].narrow"></span><span class="sr-only" x-text="m.heads[6].long"></span></th>
                                                    </tr>
                    </thead>
                    <tbody>
                                                    <tr x-show="m.weeks.length > 0">
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 0).selected ? 'true' : null" :data-in-range="cell(m, 0, 0).band ? '' : null" :class="cell(m, 0, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 0).blank" :tabindex="cell(m, 0, 0).tab ? 0 : -1" :data-date="cell(m, 0, 0).key"
                                            :data-selected="cell(m, 0, 0).selected ? '' : null" :data-today="cell(m, 0, 0).today ? '' : null"
                                            :data-outside="cell(m, 0, 0).outside ? '' : null" :data-disabled="cell(m, 0, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 0).disabled ? 'true' : null" :aria-current="cell(m, 0, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 0).label" x-text="cell(m, 0, 0).day" x-on:click="pick(cell(m, 0, 0).key)"
                                            x-on:focus="!cell(m, 0, 0).disabled && hoverIfOpen(cell(m, 0, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 1).selected ? 'true' : null" :data-in-range="cell(m, 0, 1).band ? '' : null" :class="cell(m, 0, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 1).blank" :tabindex="cell(m, 0, 1).tab ? 0 : -1" :data-date="cell(m, 0, 1).key"
                                            :data-selected="cell(m, 0, 1).selected ? '' : null" :data-today="cell(m, 0, 1).today ? '' : null"
                                            :data-outside="cell(m, 0, 1).outside ? '' : null" :data-disabled="cell(m, 0, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 1).disabled ? 'true' : null" :aria-current="cell(m, 0, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 1).label" x-text="cell(m, 0, 1).day" x-on:click="pick(cell(m, 0, 1).key)"
                                            x-on:focus="!cell(m, 0, 1).disabled && hoverIfOpen(cell(m, 0, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 2).selected ? 'true' : null" :data-in-range="cell(m, 0, 2).band ? '' : null" :class="cell(m, 0, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 2).blank" :tabindex="cell(m, 0, 2).tab ? 0 : -1" :data-date="cell(m, 0, 2).key"
                                            :data-selected="cell(m, 0, 2).selected ? '' : null" :data-today="cell(m, 0, 2).today ? '' : null"
                                            :data-outside="cell(m, 0, 2).outside ? '' : null" :data-disabled="cell(m, 0, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 2).disabled ? 'true' : null" :aria-current="cell(m, 0, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 2).label" x-text="cell(m, 0, 2).day" x-on:click="pick(cell(m, 0, 2).key)"
                                            x-on:focus="!cell(m, 0, 2).disabled && hoverIfOpen(cell(m, 0, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 3).selected ? 'true' : null" :data-in-range="cell(m, 0, 3).band ? '' : null" :class="cell(m, 0, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 3).blank" :tabindex="cell(m, 0, 3).tab ? 0 : -1" :data-date="cell(m, 0, 3).key"
                                            :data-selected="cell(m, 0, 3).selected ? '' : null" :data-today="cell(m, 0, 3).today ? '' : null"
                                            :data-outside="cell(m, 0, 3).outside ? '' : null" :data-disabled="cell(m, 0, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 3).disabled ? 'true' : null" :aria-current="cell(m, 0, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 3).label" x-text="cell(m, 0, 3).day" x-on:click="pick(cell(m, 0, 3).key)"
                                            x-on:focus="!cell(m, 0, 3).disabled && hoverIfOpen(cell(m, 0, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 4).selected ? 'true' : null" :data-in-range="cell(m, 0, 4).band ? '' : null" :class="cell(m, 0, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 4).blank" :tabindex="cell(m, 0, 4).tab ? 0 : -1" :data-date="cell(m, 0, 4).key"
                                            :data-selected="cell(m, 0, 4).selected ? '' : null" :data-today="cell(m, 0, 4).today ? '' : null"
                                            :data-outside="cell(m, 0, 4).outside ? '' : null" :data-disabled="cell(m, 0, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 4).disabled ? 'true' : null" :aria-current="cell(m, 0, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 4).label" x-text="cell(m, 0, 4).day" x-on:click="pick(cell(m, 0, 4).key)"
                                            x-on:focus="!cell(m, 0, 4).disabled && hoverIfOpen(cell(m, 0, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 5).selected ? 'true' : null" :data-in-range="cell(m, 0, 5).band ? '' : null" :class="cell(m, 0, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 5).blank" :tabindex="cell(m, 0, 5).tab ? 0 : -1" :data-date="cell(m, 0, 5).key"
                                            :data-selected="cell(m, 0, 5).selected ? '' : null" :data-today="cell(m, 0, 5).today ? '' : null"
                                            :data-outside="cell(m, 0, 5).outside ? '' : null" :data-disabled="cell(m, 0, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 5).disabled ? 'true' : null" :aria-current="cell(m, 0, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 5).label" x-text="cell(m, 0, 5).day" x-on:click="pick(cell(m, 0, 5).key)"
                                            x-on:focus="!cell(m, 0, 5).disabled && hoverIfOpen(cell(m, 0, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 0, 6).selected ? 'true' : null" :data-in-range="cell(m, 0, 6).band ? '' : null" :class="cell(m, 0, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 0, 6).blank" :tabindex="cell(m, 0, 6).tab ? 0 : -1" :data-date="cell(m, 0, 6).key"
                                            :data-selected="cell(m, 0, 6).selected ? '' : null" :data-today="cell(m, 0, 6).today ? '' : null"
                                            :data-outside="cell(m, 0, 6).outside ? '' : null" :data-disabled="cell(m, 0, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 0, 6).disabled ? 'true' : null" :aria-current="cell(m, 0, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 0, 6).label" x-text="cell(m, 0, 6).day" x-on:click="pick(cell(m, 0, 6).key)"
                                            x-on:focus="!cell(m, 0, 6).disabled && hoverIfOpen(cell(m, 0, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 0, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 1">
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 0).selected ? 'true' : null" :data-in-range="cell(m, 1, 0).band ? '' : null" :class="cell(m, 1, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 0).blank" :tabindex="cell(m, 1, 0).tab ? 0 : -1" :data-date="cell(m, 1, 0).key"
                                            :data-selected="cell(m, 1, 0).selected ? '' : null" :data-today="cell(m, 1, 0).today ? '' : null"
                                            :data-outside="cell(m, 1, 0).outside ? '' : null" :data-disabled="cell(m, 1, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 0).disabled ? 'true' : null" :aria-current="cell(m, 1, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 0).label" x-text="cell(m, 1, 0).day" x-on:click="pick(cell(m, 1, 0).key)"
                                            x-on:focus="!cell(m, 1, 0).disabled && hoverIfOpen(cell(m, 1, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 1).selected ? 'true' : null" :data-in-range="cell(m, 1, 1).band ? '' : null" :class="cell(m, 1, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 1).blank" :tabindex="cell(m, 1, 1).tab ? 0 : -1" :data-date="cell(m, 1, 1).key"
                                            :data-selected="cell(m, 1, 1).selected ? '' : null" :data-today="cell(m, 1, 1).today ? '' : null"
                                            :data-outside="cell(m, 1, 1).outside ? '' : null" :data-disabled="cell(m, 1, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 1).disabled ? 'true' : null" :aria-current="cell(m, 1, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 1).label" x-text="cell(m, 1, 1).day" x-on:click="pick(cell(m, 1, 1).key)"
                                            x-on:focus="!cell(m, 1, 1).disabled && hoverIfOpen(cell(m, 1, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 2).selected ? 'true' : null" :data-in-range="cell(m, 1, 2).band ? '' : null" :class="cell(m, 1, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 2).blank" :tabindex="cell(m, 1, 2).tab ? 0 : -1" :data-date="cell(m, 1, 2).key"
                                            :data-selected="cell(m, 1, 2).selected ? '' : null" :data-today="cell(m, 1, 2).today ? '' : null"
                                            :data-outside="cell(m, 1, 2).outside ? '' : null" :data-disabled="cell(m, 1, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 2).disabled ? 'true' : null" :aria-current="cell(m, 1, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 2).label" x-text="cell(m, 1, 2).day" x-on:click="pick(cell(m, 1, 2).key)"
                                            x-on:focus="!cell(m, 1, 2).disabled && hoverIfOpen(cell(m, 1, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 3).selected ? 'true' : null" :data-in-range="cell(m, 1, 3).band ? '' : null" :class="cell(m, 1, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 3).blank" :tabindex="cell(m, 1, 3).tab ? 0 : -1" :data-date="cell(m, 1, 3).key"
                                            :data-selected="cell(m, 1, 3).selected ? '' : null" :data-today="cell(m, 1, 3).today ? '' : null"
                                            :data-outside="cell(m, 1, 3).outside ? '' : null" :data-disabled="cell(m, 1, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 3).disabled ? 'true' : null" :aria-current="cell(m, 1, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 3).label" x-text="cell(m, 1, 3).day" x-on:click="pick(cell(m, 1, 3).key)"
                                            x-on:focus="!cell(m, 1, 3).disabled && hoverIfOpen(cell(m, 1, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 4).selected ? 'true' : null" :data-in-range="cell(m, 1, 4).band ? '' : null" :class="cell(m, 1, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 4).blank" :tabindex="cell(m, 1, 4).tab ? 0 : -1" :data-date="cell(m, 1, 4).key"
                                            :data-selected="cell(m, 1, 4).selected ? '' : null" :data-today="cell(m, 1, 4).today ? '' : null"
                                            :data-outside="cell(m, 1, 4).outside ? '' : null" :data-disabled="cell(m, 1, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 4).disabled ? 'true' : null" :aria-current="cell(m, 1, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 4).label" x-text="cell(m, 1, 4).day" x-on:click="pick(cell(m, 1, 4).key)"
                                            x-on:focus="!cell(m, 1, 4).disabled && hoverIfOpen(cell(m, 1, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 5).selected ? 'true' : null" :data-in-range="cell(m, 1, 5).band ? '' : null" :class="cell(m, 1, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 5).blank" :tabindex="cell(m, 1, 5).tab ? 0 : -1" :data-date="cell(m, 1, 5).key"
                                            :data-selected="cell(m, 1, 5).selected ? '' : null" :data-today="cell(m, 1, 5).today ? '' : null"
                                            :data-outside="cell(m, 1, 5).outside ? '' : null" :data-disabled="cell(m, 1, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 5).disabled ? 'true' : null" :aria-current="cell(m, 1, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 5).label" x-text="cell(m, 1, 5).day" x-on:click="pick(cell(m, 1, 5).key)"
                                            x-on:focus="!cell(m, 1, 5).disabled && hoverIfOpen(cell(m, 1, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 1, 6).selected ? 'true' : null" :data-in-range="cell(m, 1, 6).band ? '' : null" :class="cell(m, 1, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 1, 6).blank" :tabindex="cell(m, 1, 6).tab ? 0 : -1" :data-date="cell(m, 1, 6).key"
                                            :data-selected="cell(m, 1, 6).selected ? '' : null" :data-today="cell(m, 1, 6).today ? '' : null"
                                            :data-outside="cell(m, 1, 6).outside ? '' : null" :data-disabled="cell(m, 1, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 1, 6).disabled ? 'true' : null" :aria-current="cell(m, 1, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 1, 6).label" x-text="cell(m, 1, 6).day" x-on:click="pick(cell(m, 1, 6).key)"
                                            x-on:focus="!cell(m, 1, 6).disabled && hoverIfOpen(cell(m, 1, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 1, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 2">
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 0).selected ? 'true' : null" :data-in-range="cell(m, 2, 0).band ? '' : null" :class="cell(m, 2, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 0).blank" :tabindex="cell(m, 2, 0).tab ? 0 : -1" :data-date="cell(m, 2, 0).key"
                                            :data-selected="cell(m, 2, 0).selected ? '' : null" :data-today="cell(m, 2, 0).today ? '' : null"
                                            :data-outside="cell(m, 2, 0).outside ? '' : null" :data-disabled="cell(m, 2, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 0).disabled ? 'true' : null" :aria-current="cell(m, 2, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 0).label" x-text="cell(m, 2, 0).day" x-on:click="pick(cell(m, 2, 0).key)"
                                            x-on:focus="!cell(m, 2, 0).disabled && hoverIfOpen(cell(m, 2, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 1).selected ? 'true' : null" :data-in-range="cell(m, 2, 1).band ? '' : null" :class="cell(m, 2, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 1).blank" :tabindex="cell(m, 2, 1).tab ? 0 : -1" :data-date="cell(m, 2, 1).key"
                                            :data-selected="cell(m, 2, 1).selected ? '' : null" :data-today="cell(m, 2, 1).today ? '' : null"
                                            :data-outside="cell(m, 2, 1).outside ? '' : null" :data-disabled="cell(m, 2, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 1).disabled ? 'true' : null" :aria-current="cell(m, 2, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 1).label" x-text="cell(m, 2, 1).day" x-on:click="pick(cell(m, 2, 1).key)"
                                            x-on:focus="!cell(m, 2, 1).disabled && hoverIfOpen(cell(m, 2, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 2).selected ? 'true' : null" :data-in-range="cell(m, 2, 2).band ? '' : null" :class="cell(m, 2, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 2).blank" :tabindex="cell(m, 2, 2).tab ? 0 : -1" :data-date="cell(m, 2, 2).key"
                                            :data-selected="cell(m, 2, 2).selected ? '' : null" :data-today="cell(m, 2, 2).today ? '' : null"
                                            :data-outside="cell(m, 2, 2).outside ? '' : null" :data-disabled="cell(m, 2, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 2).disabled ? 'true' : null" :aria-current="cell(m, 2, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 2).label" x-text="cell(m, 2, 2).day" x-on:click="pick(cell(m, 2, 2).key)"
                                            x-on:focus="!cell(m, 2, 2).disabled && hoverIfOpen(cell(m, 2, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 3).selected ? 'true' : null" :data-in-range="cell(m, 2, 3).band ? '' : null" :class="cell(m, 2, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 3).blank" :tabindex="cell(m, 2, 3).tab ? 0 : -1" :data-date="cell(m, 2, 3).key"
                                            :data-selected="cell(m, 2, 3).selected ? '' : null" :data-today="cell(m, 2, 3).today ? '' : null"
                                            :data-outside="cell(m, 2, 3).outside ? '' : null" :data-disabled="cell(m, 2, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 3).disabled ? 'true' : null" :aria-current="cell(m, 2, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 3).label" x-text="cell(m, 2, 3).day" x-on:click="pick(cell(m, 2, 3).key)"
                                            x-on:focus="!cell(m, 2, 3).disabled && hoverIfOpen(cell(m, 2, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 4).selected ? 'true' : null" :data-in-range="cell(m, 2, 4).band ? '' : null" :class="cell(m, 2, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 4).blank" :tabindex="cell(m, 2, 4).tab ? 0 : -1" :data-date="cell(m, 2, 4).key"
                                            :data-selected="cell(m, 2, 4).selected ? '' : null" :data-today="cell(m, 2, 4).today ? '' : null"
                                            :data-outside="cell(m, 2, 4).outside ? '' : null" :data-disabled="cell(m, 2, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 4).disabled ? 'true' : null" :aria-current="cell(m, 2, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 4).label" x-text="cell(m, 2, 4).day" x-on:click="pick(cell(m, 2, 4).key)"
                                            x-on:focus="!cell(m, 2, 4).disabled && hoverIfOpen(cell(m, 2, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 5).selected ? 'true' : null" :data-in-range="cell(m, 2, 5).band ? '' : null" :class="cell(m, 2, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 5).blank" :tabindex="cell(m, 2, 5).tab ? 0 : -1" :data-date="cell(m, 2, 5).key"
                                            :data-selected="cell(m, 2, 5).selected ? '' : null" :data-today="cell(m, 2, 5).today ? '' : null"
                                            :data-outside="cell(m, 2, 5).outside ? '' : null" :data-disabled="cell(m, 2, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 5).disabled ? 'true' : null" :aria-current="cell(m, 2, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 5).label" x-text="cell(m, 2, 5).day" x-on:click="pick(cell(m, 2, 5).key)"
                                            x-on:focus="!cell(m, 2, 5).disabled && hoverIfOpen(cell(m, 2, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 2, 6).selected ? 'true' : null" :data-in-range="cell(m, 2, 6).band ? '' : null" :class="cell(m, 2, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 2, 6).blank" :tabindex="cell(m, 2, 6).tab ? 0 : -1" :data-date="cell(m, 2, 6).key"
                                            :data-selected="cell(m, 2, 6).selected ? '' : null" :data-today="cell(m, 2, 6).today ? '' : null"
                                            :data-outside="cell(m, 2, 6).outside ? '' : null" :data-disabled="cell(m, 2, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 2, 6).disabled ? 'true' : null" :aria-current="cell(m, 2, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 2, 6).label" x-text="cell(m, 2, 6).day" x-on:click="pick(cell(m, 2, 6).key)"
                                            x-on:focus="!cell(m, 2, 6).disabled && hoverIfOpen(cell(m, 2, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 2, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 3">
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 0).selected ? 'true' : null" :data-in-range="cell(m, 3, 0).band ? '' : null" :class="cell(m, 3, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 0).blank" :tabindex="cell(m, 3, 0).tab ? 0 : -1" :data-date="cell(m, 3, 0).key"
                                            :data-selected="cell(m, 3, 0).selected ? '' : null" :data-today="cell(m, 3, 0).today ? '' : null"
                                            :data-outside="cell(m, 3, 0).outside ? '' : null" :data-disabled="cell(m, 3, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 0).disabled ? 'true' : null" :aria-current="cell(m, 3, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 0).label" x-text="cell(m, 3, 0).day" x-on:click="pick(cell(m, 3, 0).key)"
                                            x-on:focus="!cell(m, 3, 0).disabled && hoverIfOpen(cell(m, 3, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 1).selected ? 'true' : null" :data-in-range="cell(m, 3, 1).band ? '' : null" :class="cell(m, 3, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 1).blank" :tabindex="cell(m, 3, 1).tab ? 0 : -1" :data-date="cell(m, 3, 1).key"
                                            :data-selected="cell(m, 3, 1).selected ? '' : null" :data-today="cell(m, 3, 1).today ? '' : null"
                                            :data-outside="cell(m, 3, 1).outside ? '' : null" :data-disabled="cell(m, 3, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 1).disabled ? 'true' : null" :aria-current="cell(m, 3, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 1).label" x-text="cell(m, 3, 1).day" x-on:click="pick(cell(m, 3, 1).key)"
                                            x-on:focus="!cell(m, 3, 1).disabled && hoverIfOpen(cell(m, 3, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 2).selected ? 'true' : null" :data-in-range="cell(m, 3, 2).band ? '' : null" :class="cell(m, 3, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 2).blank" :tabindex="cell(m, 3, 2).tab ? 0 : -1" :data-date="cell(m, 3, 2).key"
                                            :data-selected="cell(m, 3, 2).selected ? '' : null" :data-today="cell(m, 3, 2).today ? '' : null"
                                            :data-outside="cell(m, 3, 2).outside ? '' : null" :data-disabled="cell(m, 3, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 2).disabled ? 'true' : null" :aria-current="cell(m, 3, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 2).label" x-text="cell(m, 3, 2).day" x-on:click="pick(cell(m, 3, 2).key)"
                                            x-on:focus="!cell(m, 3, 2).disabled && hoverIfOpen(cell(m, 3, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 3).selected ? 'true' : null" :data-in-range="cell(m, 3, 3).band ? '' : null" :class="cell(m, 3, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 3).blank" :tabindex="cell(m, 3, 3).tab ? 0 : -1" :data-date="cell(m, 3, 3).key"
                                            :data-selected="cell(m, 3, 3).selected ? '' : null" :data-today="cell(m, 3, 3).today ? '' : null"
                                            :data-outside="cell(m, 3, 3).outside ? '' : null" :data-disabled="cell(m, 3, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 3).disabled ? 'true' : null" :aria-current="cell(m, 3, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 3).label" x-text="cell(m, 3, 3).day" x-on:click="pick(cell(m, 3, 3).key)"
                                            x-on:focus="!cell(m, 3, 3).disabled && hoverIfOpen(cell(m, 3, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 4).selected ? 'true' : null" :data-in-range="cell(m, 3, 4).band ? '' : null" :class="cell(m, 3, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 4).blank" :tabindex="cell(m, 3, 4).tab ? 0 : -1" :data-date="cell(m, 3, 4).key"
                                            :data-selected="cell(m, 3, 4).selected ? '' : null" :data-today="cell(m, 3, 4).today ? '' : null"
                                            :data-outside="cell(m, 3, 4).outside ? '' : null" :data-disabled="cell(m, 3, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 4).disabled ? 'true' : null" :aria-current="cell(m, 3, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 4).label" x-text="cell(m, 3, 4).day" x-on:click="pick(cell(m, 3, 4).key)"
                                            x-on:focus="!cell(m, 3, 4).disabled && hoverIfOpen(cell(m, 3, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 5).selected ? 'true' : null" :data-in-range="cell(m, 3, 5).band ? '' : null" :class="cell(m, 3, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 5).blank" :tabindex="cell(m, 3, 5).tab ? 0 : -1" :data-date="cell(m, 3, 5).key"
                                            :data-selected="cell(m, 3, 5).selected ? '' : null" :data-today="cell(m, 3, 5).today ? '' : null"
                                            :data-outside="cell(m, 3, 5).outside ? '' : null" :data-disabled="cell(m, 3, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 5).disabled ? 'true' : null" :aria-current="cell(m, 3, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 5).label" x-text="cell(m, 3, 5).day" x-on:click="pick(cell(m, 3, 5).key)"
                                            x-on:focus="!cell(m, 3, 5).disabled && hoverIfOpen(cell(m, 3, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 3, 6).selected ? 'true' : null" :data-in-range="cell(m, 3, 6).band ? '' : null" :class="cell(m, 3, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 3, 6).blank" :tabindex="cell(m, 3, 6).tab ? 0 : -1" :data-date="cell(m, 3, 6).key"
                                            :data-selected="cell(m, 3, 6).selected ? '' : null" :data-today="cell(m, 3, 6).today ? '' : null"
                                            :data-outside="cell(m, 3, 6).outside ? '' : null" :data-disabled="cell(m, 3, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 3, 6).disabled ? 'true' : null" :aria-current="cell(m, 3, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 3, 6).label" x-text="cell(m, 3, 6).day" x-on:click="pick(cell(m, 3, 6).key)"
                                            x-on:focus="!cell(m, 3, 6).disabled && hoverIfOpen(cell(m, 3, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 3, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 4">
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 0).selected ? 'true' : null" :data-in-range="cell(m, 4, 0).band ? '' : null" :class="cell(m, 4, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 0).blank" :tabindex="cell(m, 4, 0).tab ? 0 : -1" :data-date="cell(m, 4, 0).key"
                                            :data-selected="cell(m, 4, 0).selected ? '' : null" :data-today="cell(m, 4, 0).today ? '' : null"
                                            :data-outside="cell(m, 4, 0).outside ? '' : null" :data-disabled="cell(m, 4, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 0).disabled ? 'true' : null" :aria-current="cell(m, 4, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 0).label" x-text="cell(m, 4, 0).day" x-on:click="pick(cell(m, 4, 0).key)"
                                            x-on:focus="!cell(m, 4, 0).disabled && hoverIfOpen(cell(m, 4, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 1).selected ? 'true' : null" :data-in-range="cell(m, 4, 1).band ? '' : null" :class="cell(m, 4, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 1).blank" :tabindex="cell(m, 4, 1).tab ? 0 : -1" :data-date="cell(m, 4, 1).key"
                                            :data-selected="cell(m, 4, 1).selected ? '' : null" :data-today="cell(m, 4, 1).today ? '' : null"
                                            :data-outside="cell(m, 4, 1).outside ? '' : null" :data-disabled="cell(m, 4, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 1).disabled ? 'true' : null" :aria-current="cell(m, 4, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 1).label" x-text="cell(m, 4, 1).day" x-on:click="pick(cell(m, 4, 1).key)"
                                            x-on:focus="!cell(m, 4, 1).disabled && hoverIfOpen(cell(m, 4, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 2).selected ? 'true' : null" :data-in-range="cell(m, 4, 2).band ? '' : null" :class="cell(m, 4, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 2).blank" :tabindex="cell(m, 4, 2).tab ? 0 : -1" :data-date="cell(m, 4, 2).key"
                                            :data-selected="cell(m, 4, 2).selected ? '' : null" :data-today="cell(m, 4, 2).today ? '' : null"
                                            :data-outside="cell(m, 4, 2).outside ? '' : null" :data-disabled="cell(m, 4, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 2).disabled ? 'true' : null" :aria-current="cell(m, 4, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 2).label" x-text="cell(m, 4, 2).day" x-on:click="pick(cell(m, 4, 2).key)"
                                            x-on:focus="!cell(m, 4, 2).disabled && hoverIfOpen(cell(m, 4, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 3).selected ? 'true' : null" :data-in-range="cell(m, 4, 3).band ? '' : null" :class="cell(m, 4, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 3).blank" :tabindex="cell(m, 4, 3).tab ? 0 : -1" :data-date="cell(m, 4, 3).key"
                                            :data-selected="cell(m, 4, 3).selected ? '' : null" :data-today="cell(m, 4, 3).today ? '' : null"
                                            :data-outside="cell(m, 4, 3).outside ? '' : null" :data-disabled="cell(m, 4, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 3).disabled ? 'true' : null" :aria-current="cell(m, 4, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 3).label" x-text="cell(m, 4, 3).day" x-on:click="pick(cell(m, 4, 3).key)"
                                            x-on:focus="!cell(m, 4, 3).disabled && hoverIfOpen(cell(m, 4, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 4).selected ? 'true' : null" :data-in-range="cell(m, 4, 4).band ? '' : null" :class="cell(m, 4, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 4).blank" :tabindex="cell(m, 4, 4).tab ? 0 : -1" :data-date="cell(m, 4, 4).key"
                                            :data-selected="cell(m, 4, 4).selected ? '' : null" :data-today="cell(m, 4, 4).today ? '' : null"
                                            :data-outside="cell(m, 4, 4).outside ? '' : null" :data-disabled="cell(m, 4, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 4).disabled ? 'true' : null" :aria-current="cell(m, 4, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 4).label" x-text="cell(m, 4, 4).day" x-on:click="pick(cell(m, 4, 4).key)"
                                            x-on:focus="!cell(m, 4, 4).disabled && hoverIfOpen(cell(m, 4, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 5).selected ? 'true' : null" :data-in-range="cell(m, 4, 5).band ? '' : null" :class="cell(m, 4, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 5).blank" :tabindex="cell(m, 4, 5).tab ? 0 : -1" :data-date="cell(m, 4, 5).key"
                                            :data-selected="cell(m, 4, 5).selected ? '' : null" :data-today="cell(m, 4, 5).today ? '' : null"
                                            :data-outside="cell(m, 4, 5).outside ? '' : null" :data-disabled="cell(m, 4, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 5).disabled ? 'true' : null" :aria-current="cell(m, 4, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 5).label" x-text="cell(m, 4, 5).day" x-on:click="pick(cell(m, 4, 5).key)"
                                            x-on:focus="!cell(m, 4, 5).disabled && hoverIfOpen(cell(m, 4, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 4, 6).selected ? 'true' : null" :data-in-range="cell(m, 4, 6).band ? '' : null" :class="cell(m, 4, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 4, 6).blank" :tabindex="cell(m, 4, 6).tab ? 0 : -1" :data-date="cell(m, 4, 6).key"
                                            :data-selected="cell(m, 4, 6).selected ? '' : null" :data-today="cell(m, 4, 6).today ? '' : null"
                                            :data-outside="cell(m, 4, 6).outside ? '' : null" :data-disabled="cell(m, 4, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 4, 6).disabled ? 'true' : null" :aria-current="cell(m, 4, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 4, 6).label" x-text="cell(m, 4, 6).day" x-on:click="pick(cell(m, 4, 6).key)"
                                            x-on:focus="!cell(m, 4, 6).disabled && hoverIfOpen(cell(m, 4, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 4, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                                    <tr x-show="m.weeks.length > 5">
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 0).selected ? 'true' : null" :data-in-range="cell(m, 5, 0).band ? '' : null" :class="cell(m, 5, 0).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 0).blank" :tabindex="cell(m, 5, 0).tab ? 0 : -1" :data-date="cell(m, 5, 0).key"
                                            :data-selected="cell(m, 5, 0).selected ? '' : null" :data-today="cell(m, 5, 0).today ? '' : null"
                                            :data-outside="cell(m, 5, 0).outside ? '' : null" :data-disabled="cell(m, 5, 0).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 0).disabled ? 'true' : null" :aria-current="cell(m, 5, 0).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 0).label" x-text="cell(m, 5, 0).day" x-on:click="pick(cell(m, 5, 0).key)"
                                            x-on:focus="!cell(m, 5, 0).disabled && hoverIfOpen(cell(m, 5, 0).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 0).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 1).selected ? 'true' : null" :data-in-range="cell(m, 5, 1).band ? '' : null" :class="cell(m, 5, 1).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 1).blank" :tabindex="cell(m, 5, 1).tab ? 0 : -1" :data-date="cell(m, 5, 1).key"
                                            :data-selected="cell(m, 5, 1).selected ? '' : null" :data-today="cell(m, 5, 1).today ? '' : null"
                                            :data-outside="cell(m, 5, 1).outside ? '' : null" :data-disabled="cell(m, 5, 1).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 1).disabled ? 'true' : null" :aria-current="cell(m, 5, 1).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 1).label" x-text="cell(m, 5, 1).day" x-on:click="pick(cell(m, 5, 1).key)"
                                            x-on:focus="!cell(m, 5, 1).disabled && hoverIfOpen(cell(m, 5, 1).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 1).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 2).selected ? 'true' : null" :data-in-range="cell(m, 5, 2).band ? '' : null" :class="cell(m, 5, 2).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 2).blank" :tabindex="cell(m, 5, 2).tab ? 0 : -1" :data-date="cell(m, 5, 2).key"
                                            :data-selected="cell(m, 5, 2).selected ? '' : null" :data-today="cell(m, 5, 2).today ? '' : null"
                                            :data-outside="cell(m, 5, 2).outside ? '' : null" :data-disabled="cell(m, 5, 2).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 2).disabled ? 'true' : null" :aria-current="cell(m, 5, 2).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 2).label" x-text="cell(m, 5, 2).day" x-on:click="pick(cell(m, 5, 2).key)"
                                            x-on:focus="!cell(m, 5, 2).disabled && hoverIfOpen(cell(m, 5, 2).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 2).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 3).selected ? 'true' : null" :data-in-range="cell(m, 5, 3).band ? '' : null" :class="cell(m, 5, 3).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 3).blank" :tabindex="cell(m, 5, 3).tab ? 0 : -1" :data-date="cell(m, 5, 3).key"
                                            :data-selected="cell(m, 5, 3).selected ? '' : null" :data-today="cell(m, 5, 3).today ? '' : null"
                                            :data-outside="cell(m, 5, 3).outside ? '' : null" :data-disabled="cell(m, 5, 3).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 3).disabled ? 'true' : null" :aria-current="cell(m, 5, 3).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 3).label" x-text="cell(m, 5, 3).day" x-on:click="pick(cell(m, 5, 3).key)"
                                            x-on:focus="!cell(m, 5, 3).disabled && hoverIfOpen(cell(m, 5, 3).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 3).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 4).selected ? 'true' : null" :data-in-range="cell(m, 5, 4).band ? '' : null" :class="cell(m, 5, 4).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 4).blank" :tabindex="cell(m, 5, 4).tab ? 0 : -1" :data-date="cell(m, 5, 4).key"
                                            :data-selected="cell(m, 5, 4).selected ? '' : null" :data-today="cell(m, 5, 4).today ? '' : null"
                                            :data-outside="cell(m, 5, 4).outside ? '' : null" :data-disabled="cell(m, 5, 4).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 4).disabled ? 'true' : null" :aria-current="cell(m, 5, 4).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 4).label" x-text="cell(m, 5, 4).day" x-on:click="pick(cell(m, 5, 4).key)"
                                            x-on:focus="!cell(m, 5, 4).disabled && hoverIfOpen(cell(m, 5, 4).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 4).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 5).selected ? 'true' : null" :data-in-range="cell(m, 5, 5).band ? '' : null" :class="cell(m, 5, 5).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 5).blank" :tabindex="cell(m, 5, 5).tab ? 0 : -1" :data-date="cell(m, 5, 5).key"
                                            :data-selected="cell(m, 5, 5).selected ? '' : null" :data-today="cell(m, 5, 5).today ? '' : null"
                                            :data-outside="cell(m, 5, 5).outside ? '' : null" :data-disabled="cell(m, 5, 5).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 5).disabled ? 'true' : null" :aria-current="cell(m, 5, 5).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 5).label" x-text="cell(m, 5, 5).day" x-on:click="pick(cell(m, 5, 5).key)"
                                            x-on:focus="!cell(m, 5, 5).disabled && hoverIfOpen(cell(m, 5, 5).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 5).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                                    <td role="gridcell" :aria-selected="cell(m, 5, 6).selected ? 'true' : null" :data-in-range="cell(m, 5, 6).band ? '' : null" :class="cell(m, 5, 6).tdClass">
                                        <button type="button" x-show="!cell(m, 5, 6).blank" :tabindex="cell(m, 5, 6).tab ? 0 : -1" :data-date="cell(m, 5, 6).key"
                                            :data-selected="cell(m, 5, 6).selected ? '' : null" :data-today="cell(m, 5, 6).today ? '' : null"
                                            :data-outside="cell(m, 5, 6).outside ? '' : null" :data-disabled="cell(m, 5, 6).disabled ? '' : null"
                                            :aria-disabled="cell(m, 5, 6).disabled ? 'true' : null" :aria-current="cell(m, 5, 6).today ? 'date' : null"
                                            :aria-label="cell(m, 5, 6).label" x-text="cell(m, 5, 6).day" x-on:click="pick(cell(m, 5, 6).key)"
                                            x-on:focus="!cell(m, 5, 6).disabled && hoverIfOpen(cell(m, 5, 6).key)" x-on:mouseenter="hoverIfOpen(cell(m, 5, 6).key)" class="inline-flex size-9 min-h-[var(--nq-touch-min,0px)] min-w-[var(--nq-touch-min,0px)] items-center justify-center rounded-control border border-transparent text-body-sm tabular-nums outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-today:border-nq-focus data-outside:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:text-muted-foreground data-disabled:opacity-40 data-disabled:hover:bg-transparent data-selected:border-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary"></button>
                                    </td>
                                                            </tr>
                                            </tbody>
                </table>
            </div>
        </template>
    </div>
</div></div>
</template>
</div>
</div>
                    </div>
                    <div x-id="['project', 'task']" class="contents">
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('project')" class="text-label text-foreground">Project</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none 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" x-bind:id="$id('project')" x-effect="syncProject($el, 'dlg')" x-on:change="pickProject('dlg', $event.target.value)" x-bind:disabled="locked('dlg')" x-bind:aria-invalid="invalidProject('dlg') ? 'true' : null">
                    <option value=""   selected >Choose a project</option>
                            <option value="p1"  >Checkout</option>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 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="m6 9 6 6 6-6"/>
</svg></div>
        <div data-slot="field-error" role="alert" x-show="invalidProject('dlg')" style="display: none" class="text-caption text-nq-danger-text">Choose a project.</div>
    </div>
    <div data-slot="field" class="flex flex-col gap-1.5">
        <label data-slot="field-label" x-bind:for="$id('task')" class="text-label text-foreground">Task</label>
        <div data-slot="native-select" class="relative w-full min-w-0">
    <select           class="w-full min-w-0 appearance-none rounded-control border border-input bg-card ps-3 pe-9 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none 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" x-bind:id="$id('task')" x-effect="syncTask($el, 'dlg')" x-on:change="pickTask('dlg', $event.target.value)" x-bind:disabled="taskLocked('dlg')">
                    <option value=""   selected >No task</option>
                        <template x-for="x in tasksOf(projectValue('dlg'))" x-bind:key="x.id"><option x-bind:value="x.id" x-text="x.name"></option></template>
    </select>
    <svg aria-hidden="true" class="pointer-events-none absolute end-3 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="m6 9 6 6 6-6"/>
</svg></div>
    </div>
</div>
                    <div x-id="['duration']" data-slot="field" class="flex flex-col gap-1.5">
                        <label data-slot="field-label" x-bind:for="$id('duration')" class="text-label text-foreground">Duration</label>
                        <input data-slot="input" type="text"
     dir="ltr"                 inputmode="text" autocomplete="off" x-bind:id="$id(&#039;duration&#039;)" x-model="dlg.duration" x-bind:aria-invalid="showDurationProblem() ? &#039;true&#039; : null" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
                        <p data-slot="field-description" class="text-caption text-muted-foreground">For example 1h 30m, 1:30 or 1.5.</p>
                        <p data-slot="field-error" role="alert" x-show="showDurationProblem()" style="display: none" x-text="durationProblem()" class="text-caption text-nq-danger-text"></p>
                    </div>
                    <div x-id="['dnote']" data-slot="field" class="flex flex-col gap-1.5">
                        <label data-slot="field-label" x-bind:for="$id('dnote')" class="text-label text-foreground">What are you working on?</label>
                        <input data-slot="input" type="text"
                    x-bind:id="$id(&#039;dnote&#039;)" x-model="dlg.note" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                    </div>
                    <p x-show="dlg.message" style="display: none" role="alert" x-text="dlg.message" class="text-body-sm text-nq-danger-text"></p>
                    <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="dlg.open = 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="submit"                         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)]">
        Save</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>
    </section>
</div></div>
                            <div data-slot="tabs-panel" x-bind="panel('ai')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="ai-usage-cost" class="flex min-w-0 flex-col gap-4">
    <div data-slot="stat-grid" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/>
  <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Total cost</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$4</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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="M12 20v2"/>
  <path d="M12 2v2"/>
  <path d="M17 20v2"/>
  <path d="M17 2v2"/>
  <path d="M2 12h2"/>
  <path d="M2 17h2"/>
  <path d="M2 7h2"/>
  <path d="M20 12h2"/>
  <path d="M20 17h2"/>
  <path d="M20 7h2"/>
  <path d="M7 20v2"/>
  <path d="M7 2v2"/>
  <rect x="4" y="4" width="16" height="16" rx="2"/>
  <rect x="8" y="8" width="8" height="8" rx="1"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Tokens</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">0</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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="M13 16H8"/>
  <path d="M14 8H8"/>
  <path d="M16 12H8"/>
  <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Billed</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$1.20</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
        <div data-slot="stat-card"   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">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary 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="M13.744 17.736a6 6 0 1 1-7.48-7.48"/>
  <path d="M15 6h1v4"/>
  <path d="m6.134 14.768.866-.5 2 3.464"/>
  <circle cx="16" cy="8" r="6"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Unbilled</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">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$2.50</bdi>
                                    </div>
                            </div>
                    </div>
    </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-foreground text-h3">Cost per day</h3>
            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Billed and unbilled spend, by day</div></div>
        <div data-slot="card-content" class="px-4"><div data-slot="chart"  role="img" aria-label="Cost per day. Daily cost, 2 days"   style="--color-billed: var(--primary); --color-unbilled: var(--nq-warning)"     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 h-52 flex-col justify-start gap-2">
    <div class="flex min-h-0 flex-1 gap-2">
                    <div aria-hidden="true" class="flex w-12 shrink-0 flex-col justify-between text-end text-muted-foreground tabular-nums">
                        <span>$2</span>
                        <span>$0</span>
                    </div>
                    <div class="flex min-w-0 flex-1 items-end gap-1 border-b border-border bg-[linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[length:100%_50%]">
                                                    <div data-slot="chart-bar" title="Sep 28: Billed $1.20, Unbilled $0.40" class="flex h-full min-w-0 flex-1 flex-col-reverse justify-start">
                                <span class="block w-full" style="height: 57.1429%; background-color: var(--color-billed)"></span>
                                <span class="block w-full rounded-t-[3px]" style="height: 19.0476%; background-color: var(--color-unbilled)"></span>
                            </div>
                                                    <div data-slot="chart-bar" title="Sep 29: Billed $0.00, Unbilled $2.10" class="flex h-full min-w-0 flex-1 flex-col-reverse justify-start">
                                <span class="block w-full" style="height: 0%; background-color: var(--color-billed)"></span>
                                <span class="block w-full rounded-t-[3px]" style="height: 100%; background-color: var(--color-unbilled)"></span>
                            </div>
                                            </div>
                </div>
                <div aria-hidden="true" class="flex justify-between ps-14 text-muted-foreground"><span>Sep 28</span><span>Sep 29</span></div>
                <ul data-slot="chart-legend" class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3 text-caption">
                                <li class="flex items-center gap-1.5 text-muted-foreground">
                <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]"  style="background-color: var(--color-billed)" ></span>
                Billed
            </li>
                                <li class="flex items-center gap-1.5 text-muted-foreground">
                <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]"  style="background-color: var(--color-unbilled)" ></span>
                Unbilled
            </li>
            </ul>
</div></div></div>
    </div></div>
                            <div data-slot="tabs-panel" x-bind="panel('files')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-pv-filelist class="min-w-0" x-on:nq-data-table-action="onFileAction($event)">
                    <div data-slot="project-files" class="flex min-w-0 flex-col gap-3">
            <input type="file" multiple hidden data-pv-files x-on:change="pickFiles($event)" />
        <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="filesError" x-cloak style="display: none" x-text="filesError"></p>
    <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022f1\u0022,\u0022name\u0022:\u0022receipt-v2.pdf\u0022,\u0022size\u0022:\u0022471 KB\u0022,\u0022bytes\u0022:482304,\u0022by\u0022:\u0022Layla Hassan\u0022,\u0022at\u0022:\u00222026-09-28T16:00:00Z\u0022},{\u0022id\u0022:\u0022f2\u0022,\u0022name\u0022:\u0022refund-flow.png\u0022,\u0022size\u0022:\u00221.7 MB\u0022,\u0022bytes\u0022:1812480,\u0022by\u0022:\u0022Omar Said\u0022,\u0022at\u0022:\u00222026-09-22T10:30:00Z\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022name\u0022,\u0022header\u0022:\u0022Name\u0022,\u0022type\u0022:\u0022mono\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022size\u0022,\u0022header\u0022:\u0022Size\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true,\u0022sortKey\u0022:\u0022bytes\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022by\u0022,\u0022header\u0022:\u0022Added by\u0022,\u0022sortable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022at\u0022,\u0022header\u0022:\u0022Added\u0022,\u0022type\u0022:\u0022datetime\u0022,\u0022sortable\u0022:true}]'), JSON.parse('{\u0022nameKey\u0022:\u0022name\u0022,\u0022pageSize\u0022:20,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022download\u0022},{\u0022id\u0022:\u0022delete\u0022,\u0022group\u0022:\u0022danger\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"
    class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search issues…" aria-label="Search issues…" 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"                         x-bind:disabled="uploading" x-on:click="chooseFiles()" 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="M12 3v12"/>
  <path d="m17 8-5-5-5 5"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
</svg>Upload</button>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Project files"                 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="Project files"  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="name" x-show="shown['name']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('name')"                             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('name', $event.shiftKey)"
                                    x-bind:class="sortOf('name') ? '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 >Name</span>
                                    <svg aria-hidden="true" x-show="! sortOf('name')" 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('name') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('name') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="size" x-show="shown['size']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('size')"                             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('size', $event.shiftKey)"
                                    x-bind:class="sortOf('size') ? '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 >Size</span>
                                    <svg aria-hidden="true" x-show="! sortOf('size')" 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('size') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('size') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="by" x-show="shown['by']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('by')"                             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('by', $event.shiftKey)"
                                    x-bind:class="sortOf('by') ? '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 >Added by</span>
                                    <svg aria-hidden="true" x-show="! sortOf('by')" 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('by') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('by') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="at" x-show="shown['at']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('at')"                             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('at', $event.shiftKey)"
                                    x-bind:class="sortOf('at') ? '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 >Added</span>
                                    <svg aria-hidden="true" x-show="! sortOf('at')" 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('at') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('at') === '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 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">
  <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 files yet</p>
                    <p class="text-body-sm text-muted-foreground">Upload contracts, briefs and assets.</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" data-cell-col="name" x-show="shown['name']"  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 " >
                                                                                            <bdi dir="ltr" class="min-w-0 truncate font-mono text-code" x-text="shownText(row, col(&#039;name&#039;))"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="size" x-show="shown['size']"  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="min-w-0 flex-1  " x-text="shownText(row, col(&#039;size&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="by" x-show="shown['by']"  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;by&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="at" x-show="shown['at']"  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 " >
                                                                                            <time class="min-w-0 flex-1 tabular-nums" x-bind:datetime="isoOf(row, col(&#039;at&#039;))"  x-text="shownText(row, col(&#039;at&#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;download&#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="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>                                                                Download</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;delete&#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>                                                                Delete</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <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;download&#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="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>                                Download</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;delete&#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>                                Delete</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('activity')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="project-feed" class="flex min-w-0 flex-col gap-4">
    <div class="flex min-w-0 flex-wrap items-center justify-between gap-3">
        <div class="flex min-w-0 flex-col gap-0.5">
            <h2 class="m-0 text-h3">Project activity</h2>
            <p role="status" class="m-0 text-body-sm text-muted-foreground" data-feed-count x-text="feedCountText()">4 events</p>
        </div>
        <div class="flex min-w-0 flex-wrap items-center gap-3">
            <div class="flex min-w-0 items-center gap-2">
                <span id="nq-pv-feed-ac5dce-kind" class="shrink-0 text-body-sm text-muted-foreground">Type</span>
                <div data-slot="select" x-data="nqSelect('all', false)" x-modelable="value" x-id="['nq-select']" x-model="feedKind" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-feed-ac5dce-kind" class="flex h-control w-full 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] min-w-32">
    <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('all', 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('all')" 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">All</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('issue', 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('issue')" 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">Issues</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('comment', 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('comment')" 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">Comments</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('status', 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('status')" 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">Status changes</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('file', 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('file')" 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">Files</span>
</div>
    </div>
</template>
    </div>
            </div>
            <div class="flex min-w-0 items-center gap-2">
                <span id="nq-pv-feed-ac5dce-person" class="shrink-0 text-body-sm text-muted-foreground">Person</span>
                <div data-slot="select" x-data="nqSelect('all', false)" x-modelable="value" x-id="['nq-select']" x-model="feedActor" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-feed-ac5dce-person" class="flex h-control w-full 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] min-w-32">
    <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('all', 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('all')" 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">Everyone</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('Layla Hassan', 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('Layla Hassan')" 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">Layla Hassan</span>
</div>
                                                    <div data-slot="select-item" x-bind="item('Omar Said', 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('Omar Said')" 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">Omar Said</span>
</div>
    </div>
</template>
    </div>
            </div>
            <button data-slot="button"
     type="button"                         x-show="feedKind !== &#039;all&#039; || feedActor !== &#039;all&#039;" x-cloak="x-cloak" style="display: none" x-on:click="clearFeed()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>Clear filters</button>
        </div>
    </div>
            <div data-feed-nomatch hidden>
            <div data-slot="empty-state" 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="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Nothing matches these filters</p>
                    <p class="text-body-sm text-muted-foreground">Change the type or the person.</p>
            </div>
    </div>
        </div>
        <div data-feed-groups x-effect="applyFeed()" class="flex min-w-0 flex-col gap-5">
                            <section data-feed-group aria-label="Today" class="flex min-w-0 flex-col gap-2">
                    <h3 class="m-0 flex items-center gap-2 text-label text-muted-foreground">
                        Today
                        <span class="font-normal" data-feed-group-count><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                    </h3>
                    <ol data-slot="timeline" aria-label="Today" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" data-feed-item="data-feed-item" data-kind="status" data-actor="Omar Said" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Said" >OS</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Moved NSQ-1 to In progress</p>
                            <time data-slot="date-time" datetime="2026-09-29T08:30:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">30 minutes ago</time>
                    </div>
                    <p class="text-body-sm text-muted-foreground">From To do</p>
                    </div>
</li>
                                                    <li data-slot="timeline-item" data-feed-item="data-feed-item" data-kind="comment" data-actor="Layla Hassan" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Commented on NSQ-1</p>
                            <time data-slot="date-time" datetime="2026-09-29T07:10:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">1 hour ago</time>
                    </div>
                    </div>
</li></ol>
                </section>
                            <section data-feed-group aria-label="Yesterday" class="flex min-w-0 flex-col gap-2">
                    <h3 class="m-0 flex items-center gap-2 text-label text-muted-foreground">
                        Yesterday
                        <span class="font-normal" data-feed-group-count><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                    </h3>
                    <ol data-slot="timeline" aria-label="Yesterday" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" data-feed-item="data-feed-item" data-kind="file" data-actor="Layla Hassan" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Layla Hassan" >LH</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Uploaded receipt-v2.pdf</p>
                            <time data-slot="date-time" datetime="2026-09-28T16:00:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">17 hours ago</time>
                    </div>
                    </div>
</li></ol>
                </section>
                            <section data-feed-group aria-label="Tuesday, September 15, 2026" class="flex min-w-0 flex-col gap-2">
                    <h3 class="m-0 flex items-center gap-2 text-label text-muted-foreground">
                        Tuesday, September 15, 2026
                        <span class="font-normal" data-feed-group-count><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                    </h3>
                    <ol data-slot="timeline" aria-label="Tuesday, September 15, 2026" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" data-feed-item="data-feed-item" data-kind="issue" data-actor="" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span class="flex size-8 items-center justify-center rounded-full border border-border bg-secondary 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">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg></span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Created NSQ-4</p>
                            <time data-slot="date-time" datetime="2026-09-15T09:00:00+00:00" dir="auto"  title="Sep 15, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">2 weeks ago</time>
                    </div>
                    </div>
</li></ol>
                </section>
                    </div>
    </div></div>
                            <div data-slot="tabs-panel" x-bind="panel('memory')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="project-memory" class="flex min-w-0 flex-col gap-4">
    <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
        <div class="flex min-w-0 flex-col gap-0.5">
            <h2 class="m-0 text-h3">Project memory</h2>
            <p class="m-0 text-body-sm text-muted-foreground">Facts and decisions worth remembering about this project. <span>3 remembered</span></p>
        </div>
                    <button data-slot="button"
     type="button"                         x-on:click="openMemory(-1)" 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 px-[var(--nq-control-pad)]">
        <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>Remember something</button>
            </div>
    <div class="flex min-w-0 flex-col gap-3">
        <div class="relative">
            <svg aria-hidden="true" class="pointer-events-none absolute inset-y-0 start-3 my-auto size-4 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="memQuery" aria-label="Search memory" placeholder="Search memory" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control ps-9">
        </div>
        <div class="flex min-w-0 flex-wrap items-center gap-2">
            <div role="group" aria-label="Filter by kind" class="flex flex-wrap gap-1.5">
                                    <button data-slot="button"
     type="button"                         aria-pressed="true" data-k="all" x-show="memKind === $el.dataset.k" x-cloak="x-cloak" style="display: none" x-on:click="memKind = $el.dataset.k" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        All</button>
                    <button data-slot="button"
     type="button"                         aria-pressed="false" data-k="all" x-show="memKind !== $el.dataset.k" x-on:click="memKind = $el.dataset.k" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        All</button>
                                    <button data-slot="button"
     type="button"                         aria-pressed="true" data-k="fact" x-show="memKind === $el.dataset.k" x-cloak="x-cloak" style="display: none" x-on:click="memKind = $el.dataset.k" 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">
        Facts</button>
                    <button data-slot="button"
     type="button"                         aria-pressed="false" data-k="fact" x-show="memKind !== $el.dataset.k" x-on:click="memKind = $el.dataset.k" 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">
        Facts</button>
                                    <button data-slot="button"
     type="button"                         aria-pressed="true" data-k="decision" x-show="memKind === $el.dataset.k" x-cloak="x-cloak" style="display: none" x-on:click="memKind = $el.dataset.k" 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">
        Decisions</button>
                    <button data-slot="button"
     type="button"                         aria-pressed="false" data-k="decision" x-show="memKind !== $el.dataset.k" x-on:click="memKind = $el.dataset.k" 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">
        Decisions</button>
                            </div>
                            <div role="group" aria-label="Filter by tag" class="flex flex-wrap gap-1.5">
                                            <button data-slot="button"
     type="button"                         aria-pressed="true" data-tag="payments" x-show="memTags.includes($el.dataset.tag)" x-cloak="x-cloak" style="display: none" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#payments</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span></button>
                        <button data-slot="button"
     type="button"                         aria-pressed="false" data-tag="payments" x-show="! memTags.includes($el.dataset.tag)" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#payments</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span></button>
                                            <button data-slot="button"
     type="button"                         aria-pressed="true" data-tag="receipts" x-show="memTags.includes($el.dataset.tag)" x-cloak="x-cloak" style="display: none" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#receipts</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span></button>
                        <button data-slot="button"
     type="button"                         aria-pressed="false" data-tag="receipts" x-show="! memTags.includes($el.dataset.tag)" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#receipts</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span></button>
                                            <button data-slot="button"
     type="button"                         aria-pressed="true" data-tag="refunds" x-show="memTags.includes($el.dataset.tag)" x-cloak="x-cloak" style="display: none" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#refunds</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span></button>
                        <button data-slot="button"
     type="button"                         aria-pressed="false" data-tag="refunds" x-show="! memTags.includes($el.dataset.tag)" x-on:click="toggleMemTag($el.dataset.tag)" 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">
        <bdi>#refunds</bdi> <span class="opacity-70"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span></button>
                                    </div>
                        <button data-slot="button"
     type="button"                         x-show="memFiltered()" x-cloak="x-cloak" style="display: none" x-on:click="clearMemory()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>Clear filters</button>
        </div>
    </div>
            <div data-mem-nomatch hidden>
            <div data-slot="empty-state" 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="M10 2v8l3-3 3 3V2"/>
  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No memories match</p>
                    <p class="text-body-sm text-muted-foreground">Try another word or clear the tag filter.</p>
            </div>
    </div>
        </div>
        <ul data-mem-list x-effect="applyMemory()" class="m-0 flex list-none flex-col gap-3 p-0" aria-label="Project memory">
                                            <li data-mem-item data-kind="decision" data-tags="payments|refunds" data-hay="refunds are issued per card, never as one lump. payments refunds call with finance">
                    <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-content" class="px-4 flex min-w-0 flex-col gap-2 pt-4"><div class="flex min-w-0 items-start justify-between gap-3">
                                <div class="flex min-w-0 items-start gap-3">
                                    <span aria-hidden="true" class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-secondary 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="m14 13-8.381 8.38a1 1 0 0 1-3.001-3l8.384-8.381"/>
  <path d="m16 16 6-6"/>
  <path d="m21.5 10.5-8-8"/>
  <path d="m8 8 6-6"/>
  <path d="m8.5 7.5 8 8"/>
</svg>                                    </span>
                                    <p dir="auto" class="m-0 min-w-0 whitespace-pre-wrap break-words text-body">Refunds are issued per card, never as one lump.</p>
                                </div>
                                <div class="flex shrink-0 items-center gap-1">
                                                                            <button data-slot="button"
     type="button"                         aria-label="Edit: Refunds are issued per card, never as on" x-on:click="openMemory(0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                                                <button data-slot="button"
     type="button"                         aria-label="Forget: Refunds are issued per card, never as on" x-on:click="askForget(0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                                                    </div>
                            </div>
                            <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 ps-11 text-caption text-muted-foreground">
                                <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-info/40 bg-nq-info-soft text-nq-info-text">Decision</span>
                                                                    <button type="button" data-tag="payments" x-on:click="toggleMemTag($el.dataset.tag)" class="cursor-pointer rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"><bdi>#payments</bdi></button>
                                                                    <button type="button" data-tag="refunds" x-on:click="toggleMemTag($el.dataset.tag)" class="cursor-pointer rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"><bdi>#refunds</bdi></button>
                                                                                                    <span>From <span class="text-foreground">Call with finance</span></span>
                                                                <span>Sep 27, 2026</span>
                            </div></div></div>
                </li>
                                            <li data-mem-item data-kind="fact" data-tags="payments" data-hay="the client closes books on the 25th. payments">
                    <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-content" class="px-4 flex min-w-0 flex-col gap-2 pt-4"><div class="flex min-w-0 items-start justify-between gap-3">
                                <div class="flex min-w-0 items-start gap-3">
                                    <span aria-hidden="true" class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-secondary 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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/>
  <path d="M9 18h6"/>
  <path d="M10 22h4"/>
</svg>                                    </span>
                                    <p dir="auto" class="m-0 min-w-0 whitespace-pre-wrap break-words text-body">The client closes books on the 25th.</p>
                                </div>
                                <div class="flex shrink-0 items-center gap-1">
                                                                            <button data-slot="button"
     type="button"                         aria-label="Edit: The client closes books on the 25th." x-on:click="openMemory(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 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                                                <button data-slot="button"
     type="button"                         aria-label="Forget: The client closes books on the 25th." x-on:click="askForget(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 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="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></button>
                                                                    </div>
                            </div>
                            <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 ps-11 text-caption text-muted-foreground">
                                <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">Fact</span>
                                                                    <button type="button" data-tag="payments" x-on:click="toggleMemTag($el.dataset.tag)" class="cursor-pointer rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"><bdi>#payments</bdi></button>
                                                                                                <span>Sep 12, 2026</span>
                            </div></div></div>
                </li>
                                            <li data-mem-item data-kind="fact" data-tags="receipts" data-hay="receipts must show the vat number. receipts contract">
                    <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-content" class="px-4 flex min-w-0 flex-col gap-2 pt-4"><div class="flex min-w-0 items-start justify-between gap-3">
                                <div class="flex min-w-0 items-start gap-3">
                                    <span aria-hidden="true" class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-secondary 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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/>
  <path d="M9 18h6"/>
  <path d="M10 22h4"/>
</svg>                                    </span>
                                    <p dir="auto" class="m-0 min-w-0 whitespace-pre-wrap break-words text-body">Receipts must show the VAT number.</p>
                                </div>
                                <div class="flex shrink-0 items-center gap-1">
                                                                            <button data-slot="button"
     type="button"                         aria-label="Edit: Receipts must show the VAT number." x-on:click="openMemory(2)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                                                <button data-slot="button"
     type="button"                         aria-label="Forget: Receipts must show the VAT number." x-on:click="askForget(2)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                                                    </div>
                            </div>
                            <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 ps-11 text-caption text-muted-foreground">
                                <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">Fact</span>
                                                                    <button type="button" data-tag="receipts" x-on:click="toggleMemTag($el.dataset.tag)" class="cursor-pointer rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"><bdi>#receipts</bdi></button>
                                                                                                    <span>From <span class="text-foreground">Contract</span></span>
                                                                <span>Sep 5, 2026</span>
                            </div></div></div>
                </li>
                    </ul>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="memOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form class="flex flex-col gap-4" x-on:submit.prevent="saveMemory()">
                    <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"><span x-show="memEditing === -1">Remember something</span><span x-show="memEditing !== -1" x-cloak style="display: none">Edit memory</span></h2></div>
                    <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">What to remember</label>
                        <textarea data-slot="textarea"
                rows="4" dir="auto" x-model="memText" 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>
                    <div class="flex flex-col gap-1.5">
                        <span id="nq-pv-mem-93928b-kind" class="text-label">Kind</span>
                        <div data-slot="select" x-data="nqSelect('fact', false)" x-modelable="value" x-id="['nq-select']" x-model="memFormKind" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-mem-93928b-kind" 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('fact', 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('fact')" 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">Fact</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('decision', 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('decision')" 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">Decision</span>
</div>
    </div>
</template>
    </div>
                    </div>
                    <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">Tags</label>
                        <input data-slot="input" type="text"
                    x-model="memTagsText" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                        <p data-slot="field-description" class="text-caption text-muted-foreground">Separate with commas.</p>
</div>
                    <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">Source</label>
                        <input data-slot="input" type="text"
                    x-model="memSource" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                        <p data-slot="field-description" class="text-caption text-muted-foreground">A call, a document, a person.</p>
</div>
                    <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="memError" x-cloak style="display: none" x-text="memError"></p>
                    <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-bind:disabled="memBusy" x-on:click="memOpen = 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="submit"                         x-bind:disabled="memBusy" 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 px-[var(--nq-control-pad)]">
        Save</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="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="forgetOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Forget this memory?</h2>
                    <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">It will no longer be recalled for this project. This cannot be undone.</p></div>
                <p dir="auto" class="m-0 rounded-md border border-border bg-secondary px-3 py-2 text-body-sm" x-text="forgetText"></p>
                <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="forgetError" x-cloak style="display: none" x-text="forgetError"></p>
                <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-bind:disabled="forgetBusy" x-on:click="forgetOpen = 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"                         x-bind:disabled="forgetBusy" x-on:click="forgetMemory()" 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-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Forget</button></div>
                            <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></div>
                            <div data-slot="tabs-panel" x-bind="panel('vault')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-8 pt-4"><section data-slot="vault" aria-label="Project secrets" x-data="nqVault(JSON.parse('{\u0022ids\u0022:[\u0022s1\u0022],\u0022groups\u0022:[[\u0022s1\u0022]],\u0022search\u0022:{\u0022s1\u0022:\u0022stripe_secret_key payments \u0022},\u0022secrets\u0022:{\u0022s1\u0022:{\u0022name\u0022:\u0022STRIPE_SECRET_KEY\u0022,\u0022group\u0022:\u0022Payments\u0022,\u0022kind\u0022:\u0022api-key\u0022,\u0022description\u0022:\u0022\u0022,\u0022expires\u0022:\u0022\u0022}},\u0022hideMs\u0022:15000,\u0022labels\u0022:{\u0022revealFailed\u0022:\u0022Could not fetch the value.\u0022,\u0022copyFailed\u0022:\u0022Could not copy\u0022,\u0022copied\u0022:\u0022Copied to clipboard\u0022,\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022autoHide\u0022:\u0022Hides again in {n} seconds\u0022,\u0022addTitle\u0022:\u0022Add secret\u0022,\u0022editTitle\u0022:\u0022Edit {name}\u0022,\u0022deleteTitle\u0022:\u0022Delete {name}?\u0022,\u0022nameEmpty\u0022:\u0022Enter a name.\u0022,\u0022nameDuplicate\u0022:\u0022A secret with this name already exists in this group.\u0022,\u0022valueEmpty\u0022:\u0022Enter the value.\u0022}}'))" class="flex min-w-0 flex-col gap-4">
    <header class="flex flex-wrap items-start justify-between gap-3">
        <div class="flex min-w-0 flex-col gap-1">
            <h3 class="flex items-center gap-2 text-h3 text-foreground">
                <svg aria-hidden="true" class="size-5 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="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/>
  <circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/>
</svg>                Project secrets
            </h3>
            <p class="max-w-prose text-body-sm text-muted-foreground">Keys and passwords for this project. Values stay hidden until someone reveals them, and every reveal is logged.</p>
        </div>
                    <button data-slot="button"
     type="button"                         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">
        <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 secret</button>
            </header>
    <template x-if="notice">
        <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="notice = null" 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="notice"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
    </template>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('secrets')" 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"
    aria-label="Project secrets" 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('secrets')"
     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">Secrets
                <span class="ms-1.5 text-caption text-muted-foreground tabular-nums">1</span></button>
            <button type="button" data-slot="tabs-tab" x-bind="tab('log')"
            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">Access log</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('secrets')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-4"><p x-show="noneMatch()" style="display: none" class="rounded-card border border-dashed border-border px-4 py-8 text-center text-body-sm text-muted-foreground">No secrets match your filter.</p>
                                                    <section aria-label="Payments" x-show="groupShown(0)" class="flex flex-col gap-2">
                        <h4 class="flex items-baseline gap-2 text-label text-foreground">
                            <bdi dir="auto">Payments</bdi>                            <span class="text-caption font-normal text-muted-foreground">1 secret</span>
                        </h4>
                        <ul class="m-0 flex list-none flex-col overflow-hidden rounded-card border border-border bg-card p-0">
                                                                                            <li data-slot="vault-secret" x-data="{ sid: 's1' }" x-show="matches(sid)" x-bind:data-revealed="isShown(sid) ? '' : null"
                                    class="flex flex-col gap-2 border-b border-border px-4 py-3 last:border-b-0 sm:flex-row sm:items-center sm:gap-4">
                                    <div class="flex min-w-0 flex-col gap-1 sm:w-2/5">
                                        <div class="flex min-w-0 flex-wrap items-center gap-2">
                                            <bdi dir="ltr" class="truncate font-mono text-code font-medium text-foreground">STRIPE_SECRET_KEY</bdi>
                                            <span data-slot="badge"     class="inline-flex h-5 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground shrink-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">
  <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>API key</span>
                                                                                    </div>
                                                                                <span class="text-caption text-muted-foreground">Last used: never</span>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <div x-show="isShown(sid)" style="display: none" class="flex flex-col gap-0.5">
                                            <bdi dir="ltr" data-slot="vault-value" class="block break-all font-mono text-code text-foreground" x-text="valueFor(sid)"></bdi>
                                            <span class="text-caption text-muted-foreground" x-text="autoHide()"></span>
                                        </div>
                                        <span x-show="!isShown(sid)" data-slot="vault-value" dir="ltr" role="text" aria-label="Value hidden" class="block font-mono text-code text-muted-foreground">••••••••••••<span class="ms-1">…4242</span></span>
                                    </div>
                                    <div class="flex shrink-0 items-center gap-0.5">
                                        <button data-slot="button"
     type="button"                         data-reveal-label="Reveal STRIPE_SECRET_KEY" data-hide-label="Hide STRIPE_SECRET_KEY" x-bind:aria-label="isShown(sid) ? $el.dataset.hideLabel : $el.dataset.revealLabel" x-bind:aria-pressed="isShown(sid) ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-busy="busyOn(sid) ? &#039;true&#039; : null" x-on:click="toggle(sid)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="busyOn(sid)" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                                            <svg aria-hidden="true" x-show="eyeOn(sid)" 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.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>                                            <svg aria-hidden="true" x-show="eyeOffOn(sid)" 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="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/>
  <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/>
  <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/>
  <path d="m2 2 20 20"/>
</svg></button>
                                        <button data-slot="button"
     type="button"                         aria-label="Copy STRIPE_SECRET_KEY" x-on:click="copy(sid)" x-bind:data-copied="isCopied(sid) ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="!isCopied(sid)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>                                            <svg aria-hidden="true" x-show="isCopied(sid)" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
                                                                                    <button data-slot="button"
     type="button"                         aria-label="Edit STRIPE_SECRET_KEY" x-on:click="openEdit(sid)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                                                                                            <button data-slot="button"
     type="button"                         aria-label="Delete STRIPE_SECRET_KEY" x-on:click="askDelete(sid)" 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-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">
  <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></button>
                                                                            </div>
                                </li>
                                                    </ul>
                    </section>
                                                    <span role="status" aria-live="polite" class="sr-only" x-text="copiedId ? config.labels.copied : ''"></span></div>
        <div data-slot="tabs-panel" x-bind="panel('log')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-3"><div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022at\u0022,\u0022header\u0022:\u0022When\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022actor\u0022,\u0022header\u0022:\u0022Who\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022action\u0022,\u0022header\u0022:\u0022Action\u0022,\u0022type\u0022:\u0022status\u0022,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022reveal\u0022,\u0022label\u0022:\u0022Revealed\u0022,\u0022tone\u0022:\u0022warning\u0022},{\u0022value\u0022:\u0022copy\u0022,\u0022label\u0022:\u0022Copied\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022create\u0022,\u0022label\u0022:\u0022Created\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022update\u0022,\u0022label\u0022:\u0022Updated\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022delete\u0022,\u0022label\u0022:\u0022Deleted\u0022,\u0022tone\u0022:\u0022danger\u0022}]},{\u0022id\u0022:\u0022secret\u0022,\u0022header\u0022:\u0022Secret\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022address\u0022,\u0022header\u0022:\u0022Address\u0022,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022pageSize\u0022:10,\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"
    class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search the log" aria-label="Search the log" 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;action&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="action" 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>                        Action
                        <span data-slot="badge" x-show="facetCount('action')" x-text="facetSummary('action')" 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;action|reveal&#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>
    Revealed
</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;action|copy&#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>
    Copied
</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;action|create&#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>
    Created
</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;action|update&#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>
    Updated
</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;action|delete&#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>
    Deleted
</div></div>
                        <div x-show="facetCount('action')" 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;action&#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="Access log"                 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="Access log"  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="at" x-show="shown['at']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            When
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="actor" x-show="shown['actor']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('actor')"                             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('actor', $event.shiftKey)"
                                    x-bind:class="sortOf('actor') ? '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 >Who</span>
                                    <svg aria-hidden="true" x-show="! sortOf('actor')" 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('actor') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('actor') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="action" x-show="shown['action']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Action
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="secret" x-show="shown['secret']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('secret')"                             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('secret', $event.shiftKey)"
                                    x-bind:class="sortOf('secret') ? '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 >Secret</span>
                                    <svg aria-hidden="true" x-show="! sortOf('secret')" 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('secret') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('secret') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="address" x-show="shown['address']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Address
                                                                                </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 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">
  <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">Nothing has been accessed 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, 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="at" x-show="shown['at']"  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;at&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="actor" x-show="shown['actor']"  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;actor&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="action" x-show="shown['action']"  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="neutral" x-show="shownText(row, col(&#039;action&#039;)) !== '' && tone(row, col(&#039;action&#039;)) === 'neutral'" 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-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">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;action&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;action&#039;)) !== '' && tone(row, col(&#039;action&#039;)) === 'info'" 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" x-text="shownText(row, col(&#039;action&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;action&#039;)) !== '' && tone(row, col(&#039;action&#039;)) === 'success'" 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" x-text="shownText(row, col(&#039;action&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;action&#039;)) !== '' && tone(row, col(&#039;action&#039;)) === 'warning'" 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" x-text="shownText(row, col(&#039;action&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;action&#039;)) !== '' && tone(row, col(&#039;action&#039;)) === 'danger'" 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" x-text="shownText(row, col(&#039;action&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="secret" x-show="shown['secret']"  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;secret&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="address" x-show="shown['address']"  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;address&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div>
</div>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="formOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form novalidate data-slot="vault-secret-dialog" class="grid gap-4" x-on:submit.prevent="submit()">
                    <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"><span x-text="formTitle()"></span></h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Secrets with the same group are listed together, like a project or a service.</p></div>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="nameInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Name</label>
                        <input data-slot="input" type="text"
     dir="ltr"                 x-model="draft.name" autocomplete="off" spellcheck="false" placeholder="STRIPE_SECRET_KEY" 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 text-start font-mono text-code">
                        <p role="alert" x-show="nameInvalid" style="display: none" class="text-caption text-nq-danger-text" x-text="nameMessage"></p>
</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">Group</label>
                            <input data-slot="input" type="text"
                    x-model="draft.group" list="nq-vault-000001-groups" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                            <datalist id="nq-vault-000001-groups">
                                <option value="Payments"></option>                            </datalist>
</div>
                        <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">Type</label>
                            <div data-slot="select" x-data="nqSelect('api-key', false)" x-modelable="value" x-id="['nq-select']" x-model="draft.kind" 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('api-key', 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('api-key')" 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">API key</span>
</div>
<div data-slot="select-item" x-bind="item('password', 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('password')" 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">Password</span>
</div>
<div data-slot="select-item" x-bind="item('token', 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('token')" 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">Token</span>
</div>
<div data-slot="select-item" x-bind="item('certificate', 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('certificate')" 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">Certificate</span>
</div>
<div data-slot="select-item" x-bind="item('ssh-key', 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('ssh-key')" 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">SSH key</span>
</div>
<div data-slot="select-item" x-bind="item('other', 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('other')" 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">Secret</span>
</div>
    </div>
</template>
    </div>
</div>
                    </div>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="valueInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Value</label>
                        <textarea data-slot="textarea"
                x-model="draft.value" dir="ltr" rows="3" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-bind:class="showValue ? &#039;&#039; : &#039;[-webkit-text-security:disc]&#039;" class="w-full min-w-0 rounded-control border border-input bg-card px-3 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] py-2 min-h-20 font-mono text-code text-start"></textarea>
                        <span x-show="editId" style="display: none" class="text-caption text-muted-foreground">Leave blank to keep the current value.</span>
                        <p role="alert" x-show="valueInvalid" style="display: none" class="text-caption text-nq-danger-text">Enter the value.</p>
                        <button type="button" x-on:click="showValue = !showValue" x-bind:aria-pressed="showValue ? 'true' : 'false'"
                            class="inline-flex w-fit items-center gap-1 text-caption text-muted-foreground underline underline-offset-4 outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                            <svg aria-hidden="true" x-show="showValue" style="display: none" 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="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/>
  <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/>
  <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/>
  <path d="m2 2 20 20"/>
</svg>                            <svg aria-hidden="true" x-show="!showValue" 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
  <circle cx="12" cy="12" r="3"/>
</svg>                            Show value
                        </button>
</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">Note (optional)</label>
                            <input data-slot="input" type="text"
                    x-model="draft.note" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
                        <div 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">Expires on (optional)</label>
                            <input data-slot="input" type="date"
     dir="ltr"                 x-model="draft.expires" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                    </div>
                    <template x-if="formError"><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="formError"></span></div>
            </div>
    </div>
</template>
                    <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="formOpen = false" x-bind:disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                        <button data-slot="button"
     type="submit"                         x-bind:aria-busy="pending ? &#039;true&#039; : null" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 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="pending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                            Save</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="deleteOpen" 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="vault-delete-dialog" class="contents">
                    <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"><bdi dir="ltr" class="font-mono" x-text="deleteTitle()"></bdi></h2>
                        <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground">The value is removed from the vault for everyone. Anything still using it will stop working.</p></div>
                    <template x-if="deleteError"><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="deleteError"></span></div>
            </div>
    </div>
</template>
                    <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="deleteOpen = false" x-bind:disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                        <button data-slot="button"
     type="button"                         x-on:click="confirmDelete()" x-bind:aria-busy="pending ? &#039;true&#039; : null" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="pending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                            Delete</button></div>
                </div>
        </div>
    </div>
</template>
</div>
    </section></div>
                                        <div data-slot="tabs-panel" x-bind="panel('github')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-4 pt-4"><div data-slot="github-activity" x-data="nqGithubActivity(JSON.parse('{\u0022search\u0022:{\u0022commits\u0022:[\u0022fix(refunds): split the total per card\\nlayla-h\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\\nmain\u0022],\u0022pulls\u0022:[],\u0022runs\u0022:[],\u0022deployments\u0022:[],\u0022activity\u0022:[\u0022fix(refunds): split the total per card\\nlayla-h\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\\nmain\u0022]},\u0022runIds\u0022:[],\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022}'))"
    class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <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] sm:flex sm:items-start sm:justify-between sm:gap-4"><div class="flex min-w-0 items-start gap-3">
            <span data-slot="github-mark" class="mt-0.5 shrink-0"><svg viewBox="0 0 98 96" width="20" height="20" aria-hidden="true" focusable="false" class="size-7">
    <path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"  class="fill-black dark:fill-white"  />
</svg>
</span>
            <div class="flex min-w-0 flex-col gap-1.5">
                <h2 data-slot="card-title" class="text-label text-foreground">GitHub activity</h2>
                <div data-slot="card-description" class="text-body-sm text-muted-foreground">Commits, pull requests, workflow runs and deployments for this repository.</div>
                <span class="w-fit text-label text-foreground"><bdi dir="ltr" class="font-mono text-code">acme/storefront</bdi></span>
            </div>
        </div>
        <div class="mt-3 flex shrink-0 flex-wrap gap-2 sm:mt-0">
                                </div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><template x-if="error">
            <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="error = 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]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
        </template>
                    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('commits')" x-modelable="value" x-id="['nq-tabs']" class="flex flex-col gap-4">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <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('commits')"
     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">Commits <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 bg-secondary text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi></span></button>
</div>
                                            <div class="relative w-full sm:w-64">
                            <svg aria-hidden="true" class="pointer-events-none absolute inset-y-0 start-2.5 my-auto size-4 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" placeholder="Filter by title, author or branch" aria-label="Filter by title, author or branch" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control ps-8">
                        </div>
                                    </div>
                                    <div data-slot="tabs-panel" x-bind="panel('commits')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><div x-show="none('commits')" style="display: none"><div data-slot="empty-state" 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="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 matches</p>
                    <p class="text-body-sm text-muted-foreground">Nothing matches that filter. Clear it to see everything.</p>
            </div>
    </div>
</div>
                            <ul aria-label="Commits" x-show="any('commits')" class="overflow-hidden rounded-card border border-border">
                                                                    <li data-slot="github-commit" x-show="show('commits', 0)" x-bind:class="{ 'border-t-0': firstVisible('commits', 0) }" class="flex items-start gap-3 border-t border-border px-4 py-3 first:border-t-0">
                                        <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="layla-h" >L</span>
    </span>
                                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                                            <span class="text-label text-foreground">fix(refunds): split the total per card</span>
                                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground">
                                                <bdi>layla-h committed</bdi>
                                                <time data-slot="date-time" datetime="2026-09-28T16:05:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate]">16 hours ago</time>
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" 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 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span>
                                                                                            </div>
                                        </div>
                                        <span class=""><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">4f2a91c</code></span>
                                    </li>
                                                            </ul></div>
</div></div>
</div></div>
                            <div data-slot="tabs-panel" x-bind="panel('settings')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="project-settings" class="contents">
<div data-slot="settings-sections" x-data="nqSettingsSections(JSON.parse('{\u0022groups\u0022:[{\u0022id\u0022:\u0022project\u0022,\u0022label\u0022:\u0022Project\u0022,\u0022pages\u0022:[{\u0022id\u0022:\u0022general\u0022,\u0022label\u0022:\u0022General\u0022,\u0022description\u0022:\u0022Name, key, client, dates and status.\u0022,\u0022keywords\u0022:[\u0022Name\u0022,\u0022Client\u0022,\u0022Status\u0022,\u0022Start date\u0022,\u0022Due date\u0022]},{\u0022id\u0022:\u0022budget\u0022,\u0022label\u0022:\u0022Budget\u0022,\u0022description\u0022:\u0022The total, and what has been spent so far.\u0022,\u0022keywords\u0022:[\u0022Budget\u0022,\u0022Currency\u0022]}]},{\u0022id\u0022:\u0022team\u0022,\u0022label\u0022:\u0022Team\u0022,\u0022pages\u0022:[{\u0022id\u0022:\u0022members\u0022,\u0022label\u0022:\u0022Members and roles\u0022,\u0022description\u0022:\u0022Who can work on this project.\u0022},{\u0022id\u0022:\u0022workflow\u0022,\u0022label\u0022:\u0022Labels and statuses\u0022,\u0022description\u0022:\u0022The stages issues move through and the labels they carry.\u0022}]},{\u0022id\u0022:\u0022connections\u0022,\u0022label\u0022:\u0022Connections\u0022,\u0022pages\u0022:[{\u0022id\u0022:\u0022integrations\u0022,\u0022label\u0022:\u0022Integrations\u0022,\u0022description\u0022:\u0022Connect the tools this project uses.\u0022}]},{\u0022id\u0022:\u0022danger\u0022,\u0022label\u0022:\u0022Danger zone\u0022,\u0022pages\u0022:[{\u0022id\u0022:\u0022danger\u0022,\u0022label\u0022:\u0022Danger zone\u0022,\u0022description\u0022:\u0022Archive or delete this project.\u0022,\u0022tone\u0022:\u0022danger\u0022}]}],\u0022value\u0022:\u0022general\u0022,\u0022dirty\u0022:0,\u0022labels\u0022:{\u0022title\u0022:\u0022Settings\u0022,\u0022description\u0022:\u0022Manage your workspace, grouped by topic.\u0022,\u0022nav\u0022:\u0022Settings sections\u0022,\u0022search\u0022:\u0022Search settings\\u2026\u0022,\u0022searchLabel\u0022:\u0022Search settings\u0022,\u0022clear\u0022:\u0022Clear search\u0022,\u0022results\u0022:\u0022{n} results\u0022,\u0022resultsOne\u0022:\u00221 result\u0022,\u0022noResults\u0022:\u0022No settings match\u0022,\u0022unsaved\u0022:\u0022{n} unsaved changes\u0022,\u0022unsavedOne\u0022:\u00221 unsaved change\u0022,\u0022unsavedSome\u0022:\u0022You have unsaved changes\u0022,\u0022save\u0022:\u0022Save changes\u0022,\u0022discard\u0022:\u0022Discard\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022All changes saved\u0022,\u0022failed\u0022:\u0022Could not save your changes. Try again.\u0022,\u0022section\u0022:\u0022Section\u0022}}'))" x-modelable="value" x-id="['nq-settings']"
    class="mx-auto flex w-full max-w-6xl flex-col gap-6">
    <header class="flex flex-col gap-1">
        <h1 class="text-h1 text-foreground">Project settings</h1>
            </header>
    <div class="grid grid-cols-[minmax(0,1fr)] gap-6 md:grid-cols-[16rem_minmax(0,1fr)] md:items-start md:gap-10">
        <div data-slot="settings-sections-nav" class="flex min-w-0 flex-col gap-3 md:sticky md:top-4">
                            <div class="relative">
                    <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="clearSearch($event)" aria-label="Search settings" placeholder="Search settings…" autocomplete="off" 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 ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" x-cloak x-on:click="query = ''" aria-label="Clear search"
                        class="absolute end-1.5 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-control text-muted-foreground outline-none 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="settings-sections-results" x-show="q" x-cloak class="flex flex-col gap-1">
                <p role="status" class="px-1 text-caption text-muted-foreground" x-text="resultsText"></p>
                <ul class="flex max-h-[60vh] flex-col gap-0.5 overflow-y-auto">
                    <template x-for="hit in hits" :key="hit.key">
                        <li>
                            <button type="button" x-on:click="pick(hit)"
                                class="flex w-full flex-col items-start gap-0.5 rounded-control px-3 py-2 text-start outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                                <span class="text-body-sm font-medium text-foreground" x-text="hit.title"></span>
                                <span class="text-caption text-muted-foreground" x-text="hit.path"></span>
                            </button>
                        </li>
                    </template>
                </ul>
            </div>
            <div x-show="!q" class="flex min-w-0 flex-col gap-3">
                <div class="md:hidden">
                    <div data-slot="select" x-data="nqSelect('general', false)" x-modelable="value" x-id="['nq-select']" x-model="value" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="Section" 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-group" role="group" ><div data-slot="select-label" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Project</div>
                                                                            <div data-slot="select-item" x-bind="item('general', 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('general')" 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">General</span>
</div>
                                                                            <div data-slot="select-item" x-bind="item('budget', 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('budget')" 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">Budget</span>
</div></div>
                                                            <div data-slot="select-group" role="group" ><div data-slot="select-label" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Team</div>
                                                                            <div data-slot="select-item" x-bind="item('members', 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('members')" 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">Members and roles</span>
</div>
                                                                            <div data-slot="select-item" x-bind="item('workflow', 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('workflow')" 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">Labels and statuses</span>
</div></div>
                                                            <div data-slot="select-group" role="group" ><div data-slot="select-label" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Connections</div>
                                                                            <div data-slot="select-item" x-bind="item('integrations', 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('integrations')" 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">Integrations</span>
</div></div>
                                                            <div data-slot="select-group" role="group" ><div data-slot="select-label" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Danger zone</div>
                                                                            <div data-slot="select-item" x-bind="item('danger', 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('danger')" 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">Danger zone</span>
</div></div>
    </div>
</template>
    </div>
                </div>
                <nav aria-label="Settings sections" class="hidden flex-col gap-4 md:flex">
                                            <div role="group" aria-labelledby="nq-settings-f7b646-project" class="flex flex-col gap-0.5">
                            <div id="nq-settings-f7b646-project" class="px-3 pb-1 text-caption font-medium text-muted-foreground">Project</div>
                                                                                            <button type="button" x-bind="nav('general')" data-active="true"
                                     aria-current="page"                                      title="Name, key, client, dates and status."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium data-[active=true]:text-foreground [&amp;_svg]:size-4 [&amp;_svg]:shrink-0">
                                                                        <span class="min-w-0 flex-1 truncate">General</span>
                                </button>
                                                                                            <button type="button" x-bind="nav('budget')" data-active="false"
                                                                         title="The total, and what has been spent so far."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium data-[active=true]:text-foreground [&amp;_svg]:size-4 [&amp;_svg]:shrink-0">
                                                                        <span class="min-w-0 flex-1 truncate">Budget</span>
                                </button>
                                                    </div>
                                            <div role="group" aria-labelledby="nq-settings-f7b646-team" class="flex flex-col gap-0.5">
                            <div id="nq-settings-f7b646-team" class="px-3 pb-1 text-caption font-medium text-muted-foreground">Team</div>
                                                                                            <button type="button" x-bind="nav('members')" data-active="false"
                                                                         title="Who can work on this project."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium data-[active=true]:text-foreground [&amp;_svg]:size-4 [&amp;_svg]:shrink-0">
                                                                        <span class="min-w-0 flex-1 truncate">Members and roles</span>
                                </button>
                                                                                            <button type="button" x-bind="nav('workflow')" data-active="false"
                                                                         title="The stages issues move through and the labels they carry."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium data-[active=true]:text-foreground [&amp;_svg]:size-4 [&amp;_svg]:shrink-0">
                                                                        <span class="min-w-0 flex-1 truncate">Labels and statuses</span>
                                </button>
                                                    </div>
                                            <div role="group" aria-labelledby="nq-settings-f7b646-connections" class="flex flex-col gap-0.5">
                            <div id="nq-settings-f7b646-connections" class="px-3 pb-1 text-caption font-medium text-muted-foreground">Connections</div>
                                                                                            <button type="button" x-bind="nav('integrations')" data-active="false"
                                                                         title="Connect the tools this project uses."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium data-[active=true]:text-foreground [&amp;_svg]:size-4 [&amp;_svg]:shrink-0">
                                                                        <span class="min-w-0 flex-1 truncate">Integrations</span>
                                </button>
                                                    </div>
                                            <div role="group" aria-labelledby="nq-settings-f7b646-danger" class="flex flex-col gap-0.5">
                            <div id="nq-settings-f7b646-danger" class="px-3 pb-1 text-caption font-medium text-muted-foreground">Danger zone</div>
                                                                                            <button type="button" x-bind="nav('danger')" data-active="false"
                                                                         title="Archive or delete this project."                                     class="flex h-nav-row w-full min-h-[var(--nq-touch-min,0px)] items-center gap-2.5 rounded-control px-3 text-start text-body-sm outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-[active=true]:bg-nq-selected data-[active=true]:font-medium [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-nq-danger-text hover:text-nq-danger-text data-[active=true]:text-nq-danger-text">
                                                                        <span class="min-w-0 flex-1 truncate">Danger zone</span>
                                </button>
                                                    </div>
                                    </nav>
            </div>
        </div>
        <div data-slot="settings-sections-content" class="flex min-w-0 flex-col gap-6">
            <div data-section="general" x-bind="page('general')"
     hidden     class="flex min-w-0 flex-col gap-6"><div class="@container">
                <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-content" class="px-4 pt-4"><form class="grid gap-4 @2xl:grid-cols-2" x-on:submit.prevent="saveProject('Saved')">
                            <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">Name</label>
                                <input data-slot="input" type="text"
                    value="Checkout" x-model="draft.name" x-on:input="touchDraft()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
                            <div 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">Key</label>
                                <input data-slot="input" type="text"
     dir="ltr"                 readonly="readonly" value="NSQ" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
                                <p data-slot="field-description" class="text-caption text-muted-foreground">Prefix of issue keys. It cannot change once issues exist.</p>
</div>
                            <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">Client</label>
                                <input data-slot="input" type="text"
                    value="Acme" x-model="draft.client" x-on:input="touchDraft()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
                            <div class="flex flex-col gap-1.5">
                                <span id="nq-pv-set-d2ce39-status" class="text-label">Status</span>
                                <div data-slot="select" x-data="nqSelect('active', false)" x-modelable="value" x-id="['nq-select']" x-model="draft.status" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-set-d2ce39-status" 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('planning', 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('planning')" 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">Planning</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('active', 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('active')" 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">Active</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('on-hold', 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('on-hold')" 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">On hold</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('completed', 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('completed')" 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">Completed</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('archived', 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('archived')" 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">Archived</span>
</div>
    </div>
</template>
    </div>
                            </div>
                            <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">Start date</label>
                                <input data-slot="input" type="date"
     dir="ltr"                 value="2026-09-01" x-model="draft.startDate" x-on:input="touchDraft()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                            <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">Due date</label>
                                <input data-slot="input" type="date"
     dir="ltr"                 value="2026-11-30" x-model="draft.dueDate" x-on:input="touchDraft()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                            <div class="flex items-center gap-3 @2xl:col-span-2">
                                <button data-slot="button"
     type="submit"                         x-bind:disabled="settingsBusy" 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 px-[var(--nq-control-pad)]">
        Save</button>
                                <span role="status" class="text-body-sm text-muted-foreground" x-show="settingsSaved" x-cloak style="display: none" x-text="settingsSaved"></span>
                                <span role="alert" class="text-body-sm text-nq-danger-text" x-show="settingsError" x-cloak style="display: none" x-text="settingsError"></span>
                            </div>
                        </form></div></div>
            </div></div>
        <div data-section="budget" x-bind="page('budget')"
     hidden     class="flex min-w-0 flex-col gap-6"><div class="@container">
                <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-content" class="px-4 flex flex-col gap-4 pt-4"><form class="grid gap-4 @2xl:grid-cols-2" x-on:submit.prevent="saveProject('Budget saved')">
                            <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">Budget</label>
                                <input data-slot="input" type="text"
     dir="ltr"                 inputmode="decimal" value="12000" x-model="draft.budget" x-on:input="touchDraft()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                            <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">Currency</label>
                                <input data-slot="input" type="text"
     dir="ltr"                 readonly="readonly" value="USD" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                            <div class="flex items-center gap-3 @2xl:col-span-2">
                                <button data-slot="button"
     type="submit"                         x-bind:disabled="settingsBusy" 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 px-[var(--nq-control-pad)]">
        Save</button>
                                <span role="status" class="text-body-sm text-muted-foreground" x-show="settingsSaved" x-cloak style="display: none" x-text="settingsSaved"></span>
                                <span role="alert" class="text-body-sm text-nq-danger-text" x-show="settingsError" x-cloak style="display: none" x-text="settingsError"></span>
                            </div>
                        </form>
                                                    <div class="flex flex-col gap-2 border-t border-border pt-4">
                                <div data-slot="meter" data-tone="default" role="meter"     aria-valuemin="0" aria-valuemax="12000" aria-valuenow="4800" aria-valuetext="4,800%"
    aria-label="Spent so far" 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-2">
        <div data-slot="meter-indicator" style="inset-inline-start:0;width:40%" class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                                <p class="m-0 text-body-sm text-muted-foreground">Spent so far: <bdi class="text-foreground">$4,800.00</bdi> / <bdi>$12,000.00</bdi></p>
                            </div></div></div>
            </div></div>
            <div data-section="members" x-bind="page('members')"
     hidden     class="flex min-w-0 flex-col gap-6"><div data-slot="members-manager" x-data="nqMembersManager(JSON.parse('{\u0022locale\u0022:\u0022en\u0022,\u0022currentUserId\u0022:\u0022m1\u0022,\u0022ownerRole\u0022:\u0022owner\u0022,\u0022grantable\u0022:[\u0022member\u0022],\u0022members\u0022:{\u0022m1\u0022:{\u0022id\u0022:\u0022m1\u0022,\u0022name\u0022:\u0022Layla Hassan\u0022,\u0022email\u0022:\u0022layla@acme.test\u0022,\u0022role\u0022:\u0022owner\u0022},\u0022m2\u0022:{\u0022id\u0022:\u0022m2\u0022,\u0022name\u0022:\u0022Omar Said\u0022,\u0022email\u0022:\u0022omar@acme.test\u0022,\u0022role\u0022:\u0022member\u0022}},\u0022invites\u0022:{},\u0022roles\u0022:{\u0022owner\u0022:{\u0022label\u0022:\u0022Owner\u0022,\u0022description\u0022:\u0022\u0022},\u0022member\u0022:{\u0022label\u0022:\u0022Member\u0022,\u0022description\u0022:\u0022\u0022}},\u0022defaultRole\u0022:\u0022member\u0022,\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022,\u0022blockLastOwner\u0022:\u0022A workspace needs an owner. Transfer ownership first.\u0022,\u0022blockOwnerOnly\u0022:\u0022Only an owner can change another owner.\u0022,\u0022blockNotGrantable\u0022:\u0022You cannot change this role.\u0022,\u0022blockSelf\u0022:\u0022Use Leave workspace to remove yourself.\u0022,\u0022emailsRequired\u0022:\u0022Add at least one email address.\u0022,\u0022emailInvalid\u0022:\u0022{v} is not a valid email address.\u0022,\u0022emailDuplicate\u0022:\u0022{v} is already added.\u0022,\u0022invitedOne\u0022:\u00221 invite sent.\u0022,\u0022invitedMany\u0022:\u0022{n} invites sent.\u0022,\u0022roleOk\u0022:\u0022Role updated for {name}.\u0022,\u0022removedOk\u0022:\u0022{name} was removed.\u0022,\u0022resentOk\u0022:\u0022Invite sent again to {email}.\u0022,\u0022revokedOk\u0022:\u0022Invite to {email} was revoked.\u0022,\u0022transferredOk\u0022:\u0022{name} is now the owner.\u0022,\u0022removeTitle\u0022:\u0022Remove {name}?\u0022,\u0022removeBody\u0022:\u0022They lose access to this workspace at once. Their work stays here.\u0022,\u0022removeConfirm\u0022:\u0022Remove member\u0022,\u0022transferTitle\u0022:\u0022Make {name} the owner?\u0022,\u0022transferBody\u0022:\u0022They become the owner and you lose owner rights. Only they can give ownership back.\u0022,\u0022transferConfirm\u0022:\u0022Transfer ownership\u0022,\u0022leaveTitle\u0022:\u0022Leave this workspace?\u0022,\u0022leaveBody\u0022:\u0022You lose access until someone invites you again.\u0022,\u0022leaveConfirm\u0022:\u0022Leave workspace\u0022,\u0022roleTitle\u0022:\u0022Role of {name}\u0022}}'))" x-on:nq-data-table-action="onAction($event)" class="flex flex-col gap-5">
    <template x-if="notice !== null && notice.tone === 'success'">
        <div data-slot="alert" data-tone="success" role="status"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="notice = null" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-success/30 bg-nq-success-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="notice.text"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
    </template>
    <template x-if="notice !== null && notice.tone === 'danger'">
        <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="notice = null" 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="notice.text"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
    </template>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('members')" x-modelable="value" x-id="['nq-tabs']" class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
                            <h2 class="text-h3 text-foreground">Members <span class="text-muted-foreground">2</span></h2>
                                        <button data-slot="button"
     type="button"                         x-on:click="openInvite()" 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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <circle cx="9" cy="7" r="4"/>
  <line x1="19" x2="19" y1="8" y2="14"/>
  <line x1="22" x2="16" y1="11" y2="11"/>
</svg>Invite people</button>
                    </div>
        <div data-slot="tabs-panel" x-bind="panel('members')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus mt-4"><div class="flex flex-col gap-4">
                <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022m1\u0022,\u0022name\u0022:\u0022Layla Hassan\u0022,\u0022email\u0022:\u0022layla@acme.test\u0022,\u0022role\u0022:\u0022owner\u0022,\u0022self\u0022:true,\u0022lastActive\u0022:\u00222026-09-29\u0022,\u0022joinedAt\u0022:\u00222025-01-12\u0022},{\u0022id\u0022:\u0022m2\u0022,\u0022name\u0022:\u0022Omar Said\u0022,\u0022email\u0022:\u0022omar@acme.test\u0022,\u0022role\u0022:\u0022member\u0022,\u0022self\u0022:false,\u0022lastActive\u0022:null,\u0022joinedAt\u0022:\u00222026-03-20\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022name\u0022,\u0022header\u0022:\u0022Member\u0022,\u0022type\u0022:\u0022avatar\u0022,\u0022secondary\u0022:\u0022email\u0022,\u0022secondaryDir\u0022:\u0022ltr\u0022,\u0022badge\u0022:\u0022self\u0022,\u0022badgeLabel\u0022:\u0022You\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022email\u0022,\u0022header\u0022:\u0022Email address\u0022,\u0022searchable\u0022:true,\u0022hidden\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022role\u0022,\u0022header\u0022:\u0022Role\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022owner\u0022,\u0022label\u0022:\u0022Owner\u0022,\u0022hue\u0022:\u0022amber\u0022},{\u0022value\u0022:\u0022member\u0022,\u0022label\u0022:\u0022Member\u0022,\u0022hue\u0022:\u0022blue\u0022}]},{\u0022id\u0022:\u0022lastActive\u0022,\u0022header\u0022:\u0022Last active\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022joinedAt\u0022,\u0022header\u0022:\u0022Joined\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022name\u0022,\u0022pageSize\u0022:8,\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"
    class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search name or email…" aria-label="Search name or email…" 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;role&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="role" 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>                        Role
                        <span data-slot="badge" x-show="facetCount('role')" x-text="facetSummary('role')" 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;role|owner&#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>
    Owner
</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;role|member&#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>
    Member
</div></div>
                        <div x-show="facetCount('role')" 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;role&#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 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" 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 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="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                        View</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-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Columns</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="shown[&#039;email&#039;]" x-bind:disabled="shown[&#039;email&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 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>
    Email address
</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="shown[&#039;role&#039;]" x-bind:disabled="shown[&#039;role&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 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>
    Role
</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="shown[&#039;lastActive&#039;]" x-bind:disabled="shown[&#039;lastActive&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 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>
    Last active
</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="shown[&#039;joinedAt&#039;]" x-bind:disabled="shown[&#039;joinedAt&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 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>
    Joined
</div></div></div>
</template></div>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Workspace members"                 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="Workspace members"  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="name" x-show="shown['name']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('name')"                             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('name', $event.shiftKey)"
                                    x-bind:class="sortOf('name') ? '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 >Member</span>
                                    <svg aria-hidden="true" x-show="! sortOf('name')" 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('name') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('name') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="email" x-show="shown['email']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Email address
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="role" x-show="shown['role']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('role')"                             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('role', $event.shiftKey)"
                                    x-bind:class="sortOf('role') ? '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 >Role</span>
                                    <svg aria-hidden="true" x-show="! sortOf('role')" 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('role') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('role') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="lastActive" x-show="shown['lastActive']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('lastActive')"                             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('lastActive', $event.shiftKey)"
                                    x-bind:class="sortOf('lastActive') ? '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 >Last active</span>
                                    <svg aria-hidden="true" x-show="! sortOf('lastActive')" 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('lastActive') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('lastActive') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="joinedAt" x-show="shown['joinedAt']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('joinedAt')"                             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('joinedAt', $event.shiftKey)"
                                    x-bind:class="sortOf('joinedAt') ? '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 >Joined</span>
                                    <svg aria-hidden="true" x-show="! sortOf('joinedAt')" 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('joinedAt') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('joinedAt') === '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 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">
  <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 members yet</p>
                    <p class="text-body-sm text-muted-foreground">Invite the first person to get started.</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="name" x-show="shown['name']"  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="avatar" class="relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle text-caption font-medium text-secondary-foreground">
                                                    <span data-slot="avatar-fallback" aria-hidden="true" class="flex size-full items-center justify-center" x-text="initials(shownText(row, col(&#039;name&#039;)))"></span>
                                                    <template x-if="avatarSrc(row, col(&#039;name&#039;))"><img data-slot="avatar-image" alt="" x-bind:src="avatarSrc(row, col(&#039;name&#039;))" x-on:error="$el.remove()" class="absolute inset-0 size-full object-cover"></template>
                                                </span>
                                                <span class="flex min-w-0 flex-col">
                                                    <span class="flex items-center gap-1.5 truncate text-label text-foreground">
                                                        <span class="truncate" x-text="shownText(row, col(&#039;name&#039;))"></span>
                                                                                                                    <span data-slot="badge" x-show="row['self']" style="display: none" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium text-muted-foreground">You</span>
                                                                                                            </span>
                                                    <bdi  dir="ltr"  class="truncate text-caption text-muted-foreground" x-show="secondary(row, col(&#039;name&#039;))" x-text="secondary(row, col(&#039;name&#039;))" style="display: none"></bdi>
                                                </span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="email" x-show="shown['email']"  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;email&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="role" x-show="shown['role']"  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" x-show="shownText(row, col(&#039;role&#039;)) !== ''" x-bind:style="hueStyle(row, col(&#039;role&#039;))" style="display: none"
                                                    class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-transparent bg-[var(--tag-soft)] px-1.5 text-caption font-medium text-[var(--tag-solid)]" x-text="shownText(row, col(&#039;role&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="lastActive" x-show="shown['lastActive']"  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;lastActive&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="joinedAt" x-show="shown['joinedAt']"  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="min-w-0 flex-1  " x-text="shownText(row, col(&#039;joinedAt&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                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 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
            </div></div>
</div>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="inviteOpen" 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="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)] 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="submitInvite()" class="flex flex-col gap-5" 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">Invite people</h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">They get an email with a link to join. Invites expire after a while.</p></div>
                    <div class="flex flex-col gap-4">
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="emailsBad" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Email addresses</label>
                            <div data-slot="tag-input" x-data="nqTagInput([], Object.assign({}, { validate: (tag, tags) => (validateEmail(tag, tags)) }))" x-modelable="tags" x-bind="root"
         x-model="draft.emails" class="relative w-full">
    <div data-slot="tag-input-box" x-bind="box"
        class="flex w-full min-w-0 flex-wrap items-center gap-1.5 rounded-control border border-input bg-card px-2 py-1 text-body text-foreground min-h-[max(var(--nq-control),var(--nq-touch-min,0px))] transition-colors duration-150 ease-nq focus-within:border-nq-focus focus-within:outline-1 focus-within:outline-nq-focus has-[[data-invalid]]:border-nq-danger has-[[aria-invalid=true]]:border-nq-danger">
        <template x-for="(tag, i) in tags" :key="tag">
            <span data-slot="tag-input-tag" data-variant="neutral" class="inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-control border border-transparent bg-muted px-2 py-0.5 font-medium text-foreground h-6 gap-0.5 ps-2 pe-0.5 text-body-sm">
                <bdi x-text="tag"></bdi>
                <button type="button"  :aria-label="'Remove' + ' ' + tag" @click.stop="removeAt(i)"
                    class="inline-flex size-5 items-center justify-center rounded-[3px] text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <span aria-hidden="true" class="flex [&_svg]:size-3"><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></span>
                </button>
            </span>
        </template>
        <input data-slot="tag-input-field" x-ref="field" x-bind="field" autocomplete="off"             :placeholder="tags.length ? undefined : 'name@example.com'"
                        dir="ltr" aria-label="Email addresses" class="h-7 min-w-24 flex-1 border-0 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground pointer-coarse:text-[16px]">
    </div>
        <p x-show="error" x-cloak style="display: none" role="alert" data-slot="tag-input-error" x-text="error" class="mt-1.5 text-caption text-nq-danger-text"></p>
    <span role="status" aria-live="polite" class="sr-only" x-text="message"></span>
    </div>
                            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="emailsMsg"></span></div>
                            <p data-slot="field-description" class="text-caption text-muted-foreground">Press Enter or comma after each address.</p>
</div>
                        <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">Role</label>
                            <div data-slot="select" x-data="nqSelect('member', false)" x-modelable="value" x-id="['nq-select']" x-model="draft.role" 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('member', 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('member')" 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">Member</span>
</div>
    </div>
</template>
    </div>
                            <p x-show="roleDescription !== ''" x-text="roleDescription" style="display: none" class="text-caption text-muted-foreground"></p>
</div>
                        <template x-if="formError !== 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="formError"></span></div>
            </div>
    </div>
                        </template>
                    </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="inviteOpen = 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>                            Send invites</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></div>
            <div data-section="workflow" x-bind="page('workflow')"
     hidden     class="flex min-w-0 flex-col gap-6"><section data-slot="status-label-manager" x-data="nqStatusLabelManager(JSON.parse('{\u0022statuses\u0022:[{\u0022id\u0022:\u0022todo\u0022,\u0022name\u0022:\u0022To do\u0022,\u0022hue\u0022:\u0022gray\u0022,\u0022usage\u0022:null,\u0022delTitle\u0022:\u0022Delete status To do?\u0022,\u0022delBody\u0022:\u0022Nothing uses it, so nothing else changes.\u0022,\u0022stage\u0022:\u0022todo\u0022},{\u0022id\u0022:\u0022doing\u0022,\u0022name\u0022:\u0022In progress\u0022,\u0022hue\u0022:\u0022blue\u0022,\u0022usage\u0022:null,\u0022delTitle\u0022:\u0022Delete status In progress?\u0022,\u0022delBody\u0022:\u0022Nothing uses it, so nothing else changes.\u0022,\u0022stage\u0022:\u0022active\u0022},{\u0022id\u0022:\u0022done\u0022,\u0022name\u0022:\u0022Shipped\u0022,\u0022hue\u0022:\u0022green\u0022,\u0022usage\u0022:null,\u0022delTitle\u0022:\u0022Delete status Shipped?\u0022,\u0022delBody\u0022:\u0022Nothing uses it, so nothing else changes.\u0022,\u0022stage\u0022:\u0022done\u0022}],\u0022tags\u0022:[{\u0022id\u0022:\u0022l1\u0022,\u0022name\u0022:\u0022Design\u0022,\u0022hue\u0022:\u0022violet\u0022,\u0022usage\u0022:null,\u0022delTitle\u0022:\u0022Delete label Design?\u0022,\u0022delBody\u0022:\u0022Nothing uses it, so nothing else changes.\u0022},{\u0022id\u0022:\u0022l2\u0022,\u0022name\u0022:\u0022Backend\u0022,\u0022hue\u0022:\u0022teal\u0022,\u0022usage\u0022:null,\u0022delTitle\u0022:\u0022Delete label Backend?\u0022,\u0022delBody\u0022:\u0022Nothing uses it, so nothing else changes.\u0022}],\u0022copy\u0022:{\u0022editStatus\u0022:\u0022Edit status\u0022,\u0022editLabel\u0022:\u0022Edit label\u0022,\u0022statusesBody\u0022:\u0022The steps work moves through. Each status belongs to a stage, so reports know what is open and what is done.\u0022,\u0022labelsBody\u0022:\u0022Free-form tags you can put on any item.\u0022,\u0022save\u0022:\u0022Save\u0022,\u0022create\u0022:\u0022Create\u0022,\u0022failed\u0022:\u0022Could not save. Try again.\u0022,\u0022empty\u0022:\u0022Give it a name.\u0022,\u0022tooLong\u0022:\u0022Use {n} characters or fewer.\u0022,\u0022duplicate\u0022:\u0022That name is already used.\u0022}}'))" class="flex flex-col gap-4">
    <template x-if="error !== ''">
        <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
    </div>
    </template>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('statuses')" 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('statuses')"
     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">Statuses</button>
            <button type="button" data-slot="tabs-tab" x-bind="tab('labels')"
            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">Labels</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('statuses')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus mt-4 flex flex-col gap-4"><div class="flex flex-wrap items-center justify-between gap-3">
                <p class="max-w-prose text-body-sm text-muted-foreground">The steps work moves through. Each status belongs to a stage, so reports know what is open and what is done.</p>
                <button data-slot="button"
     type="button"                         x-on:click="openCreate(&#039;status&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <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>New status</button>
            </div>
                        <div class="flex flex-col gap-3">
                                    <div data-slot="card" data-stage="backlog" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">Backlog</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">0</bdi>
                        </div>
                                                    <p class="px-4 py-3 text-body-sm text-muted-foreground">No statuses in this stage</p></div>
                                    <div data-slot="card" data-stage="todo" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">To do</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">1</bdi>
                        </div>
                                                    <div role="list" class="flex flex-col">
                                                                                                        <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex flex-wrap items-center gap-3 px-4 py-2.5" role="listitem"><span data-slot="badge"  style="--tag-solid: var(--nq-tag-gray); --tag-soft: var(--nq-tag-gray-soft)"     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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]">To do</span>
                                            <span class="min-w-0 flex-1 text-caption text-muted-foreground"></span>
                                            <div class="flex items-center">
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move To do up" x-on:click="move(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 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move To do down" x-on:click="move(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 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Edit To do" x-on:click="openEdit(&#039;status&#039;, 0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Delete To do" x-on:click="askDelete(&#039;status&#039;, 0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                            </div></div>
                                        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openEdit(&#039;status&#039;, 0)" 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>Edit status</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(0, -1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>Move To do up</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(0, 1)" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>Move To do down</div>
                                            <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;status&#039;, 0)" 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>Delete To do</div></div>
</template></div>
                                                            </div></div>
                                    <div data-slot="card" data-stage="active" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">In progress</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">1</bdi>
                        </div>
                                                    <div role="list" class="flex flex-col">
                                                                                                        <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex flex-wrap items-center gap-3 px-4 py-2.5" role="listitem"><span data-slot="badge"  style="--tag-solid: var(--nq-tag-blue); --tag-soft: var(--nq-tag-blue-soft)"     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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]">In progress</span>
                                            <span class="min-w-0 flex-1 text-caption text-muted-foreground"></span>
                                            <div class="flex items-center">
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move In progress up" x-on:click="move(1, -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 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move In progress down" x-on:click="move(1, 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 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Edit In progress" x-on:click="openEdit(&#039;status&#039;, 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 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Delete In progress" x-on:click="askDelete(&#039;status&#039;, 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 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="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></button>
                                            </div></div>
                                        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openEdit(&#039;status&#039;, 1)" 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>Edit status</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(1, -1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>Move In progress up</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(1, 1)" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>Move In progress down</div>
                                            <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;status&#039;, 1)" 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>Delete In progress</div></div>
</template></div>
                                                            </div></div>
                                    <div data-slot="card" data-stage="review" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">In review</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">0</bdi>
                        </div>
                                                    <p class="px-4 py-3 text-body-sm text-muted-foreground">No statuses in this stage</p></div>
                                    <div data-slot="card" data-stage="done" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">Done</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">1</bdi>
                        </div>
                                                    <div role="list" class="flex flex-col">
                                                                                                        <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex flex-wrap items-center gap-3 px-4 py-2.5" role="listitem"><span data-slot="badge"  style="--tag-solid: var(--nq-tag-green); --tag-soft: var(--nq-tag-green-soft)"     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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]">Shipped</span>
                                            <span class="min-w-0 flex-1 text-caption text-muted-foreground"></span>
                                            <div class="flex items-center">
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move Shipped up" x-on:click="move(2, -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 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                  disabled      data-disabled     aria-label="Move Shipped down" x-on:click="move(2, 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 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Edit Shipped" x-on:click="openEdit(&#039;status&#039;, 2)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                                <button data-slot="button"
     type="button"                         aria-label="Delete Shipped" x-on:click="askDelete(&#039;status&#039;, 2)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                            </div></div>
                                        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openEdit(&#039;status&#039;, 2)" 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>Edit status</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(2, -1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>Move Shipped up</div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
     data-disabled aria-disabled="true"     x-on:click="move(2, 1)" 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="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>Move Shipped down</div>
                                            <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;status&#039;, 2)" 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>Delete Shipped</div></div>
</template></div>
                                                            </div></div>
                                    <div data-slot="card" data-stage="canceled" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div class="flex items-center justify-between border-b border-border px-4 py-2">
                            <h3 class="text-label text-foreground">Canceled</h3>
                            <bdi data-slot="num" data-numeric="" class="tabular-nums text-caption text-muted-foreground">0</bdi>
                        </div>
                                                    <p class="px-4 py-3 text-body-sm text-muted-foreground">No statuses in this stage</p></div>
                            </div></div>
        <div data-slot="tabs-panel" x-bind="panel('labels')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus mt-4 flex flex-col gap-4"><div class="flex flex-wrap items-center justify-between gap-3">
                <p class="max-w-prose text-body-sm text-muted-foreground">Free-form tags you can put on any item.</p>
                <button data-slot="button"
     type="button"                         x-on:click="openCreate(&#039;label&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <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>New label</button>
            </div>
                            <div data-slot="card" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-0 py-0"><div role="list" class="flex flex-col">
                                                                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex flex-wrap items-center gap-3 px-4 py-2.5" role="listitem"><span data-slot="badge"  style="--tag-solid: var(--nq-tag-violet); --tag-soft: var(--nq-tag-violet-soft)"     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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]">Design</span>
                                    <span class="min-w-0 flex-1 text-caption text-muted-foreground"></span>
                                    <div class="flex items-center">
                                        <button data-slot="button"
     type="button"                         aria-label="Edit Design" x-on:click="openEdit(&#039;label&#039;, 0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                        <button data-slot="button"
     type="button"                         aria-label="Delete Design" x-on:click="askDelete(&#039;label&#039;, 0)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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></button>
                                    </div></div>
                                <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openEdit(&#039;label&#039;, 0)" 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>Edit label</div>
                                    <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;label&#039;, 0)" 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>Delete Design</div></div>
</template></div>
                                                                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex flex-wrap items-center gap-3 px-4 py-2.5 border-t border-border" role="listitem"><span data-slot="badge"  style="--tag-solid: var(--nq-tag-teal); --tag-soft: var(--nq-tag-teal-soft)"     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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]">Backend</span>
                                    <span class="min-w-0 flex-1 text-caption text-muted-foreground"></span>
                                    <div class="flex items-center">
                                        <button data-slot="button"
     type="button"                         aria-label="Edit Backend" x-on:click="openEdit(&#039;label&#039;, 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 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg></button>
                                        <button data-slot="button"
     type="button"                         aria-label="Delete Backend" x-on:click="askDelete(&#039;label&#039;, 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 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="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></button>
                                    </div></div>
                                <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 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"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openEdit(&#039;label&#039;, 1)" 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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg>Edit label</div>
                                    <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;label&#039;, 1)" 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>Delete Backend</div></div>
</template></div>
                                            </div></div></div>
</div>
    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="delOpen" 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="delTitle"></span></h2>
                <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="delBody"></span></p></div>
            <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" x-bind:disabled="delBusy ? &#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="button"                         x-on:click="confirmDelete()" x-bind:aria-busy="delBusy ? &#039;true&#039; : null" x-bind:data-disabled="delBusy ? &#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-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="delBusy" 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>                    Delete</button></div>
        </div>
    </div>
</template>
</div>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="editOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form data-slot="status-label-edit" x-on:submit.prevent="submit()" 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"><span x-text="editTitle"></span></h2>
                    <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="editBody"></span></p></div>
                <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="nameBad" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Name</label>
                    <input data-slot="input" type="text"
                    x-model="draft.name" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                    <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="nameMsg"></span></div>
                    <p data-slot="field-description" x-show="! nameBad" class="text-caption text-muted-foreground">Up to 32 characters.</p>
</div>
                <div class="flex flex-col gap-1.5" x-on:color-change="onColor($event)" x-effect="syncPicker($el)">
                    <span class="text-label text-foreground">Colour</span>
                    <div data-slot="color-picker" x-data="nqColorPicker(JSON.parse('{\u0022value\u0022:\u0022--nq-tag-blue\u0022,\u0022swatches\u0022:[{\u0022value\u0022:\u0022--nq-tag-gray\u0022,\u0022label\u0022:\u0022Gray\u0022},{\u0022value\u0022:\u0022--nq-tag-red\u0022,\u0022label\u0022:\u0022Red\u0022},{\u0022value\u0022:\u0022--nq-tag-orange\u0022,\u0022label\u0022:\u0022Orange\u0022},{\u0022value\u0022:\u0022--nq-tag-amber\u0022,\u0022label\u0022:\u0022Amber\u0022},{\u0022value\u0022:\u0022--nq-tag-green\u0022,\u0022label\u0022:\u0022Green\u0022},{\u0022value\u0022:\u0022--nq-tag-teal\u0022,\u0022label\u0022:\u0022Teal\u0022},{\u0022value\u0022:\u0022--nq-tag-blue\u0022,\u0022label\u0022:\u0022Blue\u0022},{\u0022value\u0022:\u0022--nq-tag-violet\u0022,\u0022label\u0022:\u0022Violet\u0022},{\u0022value\u0022:\u0022--nq-tag-pink\u0022,\u0022label\u0022:\u0022Pink\u0022}],\u0022placeholder\u0022:\u0022No colour\u0022,\u0022none\u0022:\u0022No colour\u0022,\u0022choose\u0022:\u0022Colour\u0022,\u0022rtl\u0022:false}'))" x-modelable="color" class="contents">
    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button type="button" x-ref="trigger" data-slot="color-picker-trigger" aria-haspopup="dialog" x-on:click="toggle()"
            :aria-expanded="open" x-bind:data-popup-open="open ? '' : undefined" x-bind:aria-label="triggerLabel"
                                    class="flex h-control w-full min-w-0 items-center 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 aria-invalid:border-nq-danger data-disabled:cursor-not-allowed data-disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
            <span aria-hidden="true" data-slot="color-picker-chip" x-bind:style="color ? { backgroundColor: css(color) } : null"
                x-bind:class="color ? '' : 'border-dashed bg-transparent'" class="inline-block size-5 shrink-0 rounded-[6px] border border-nq-line-strong"></span>
            <span class="min-w-0 flex-1 truncate text-start" x-bind:class="label ? '' : 'text-muted-foreground'" dir="auto" x-text="label ?? placeholder">No colour</span>
            <svg aria-hidden="true" class="size-4 shrink-0 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="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>        </button>
                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        dir="ltr" lang="en" aria-label="Choose colour" x-effect="open &amp;&amp; $nextTick(() =&gt; syncDraft())" class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-64 p-3"><div class="flex flex-col gap-3">
                                    <div role="radiogroup" aria-label="Colours" dir="ltr" data-slot="color-picker-swatches" class="grid gap-2"
                        style="grid-template-columns: repeat(5, minmax(0, 1fr))" x-on:keydown="swatchKey($event)">
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-gray" aria-label="Gray" title="Gray"
                                style="background-color: var(--nq-tag-gray)"
                                x-bind:aria-checked="isOn('--nq-tag-gray')" x-bind:tabindex="tab('--nq-tag-gray')"
                                x-bind:data-checked="isOn('--nq-tag-gray') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-gray') ? null : ''"
                                x-on:click="pick('--nq-tag-gray')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-red" aria-label="Red" title="Red"
                                style="background-color: var(--nq-tag-red)"
                                x-bind:aria-checked="isOn('--nq-tag-red')" x-bind:tabindex="tab('--nq-tag-red')"
                                x-bind:data-checked="isOn('--nq-tag-red') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-red') ? null : ''"
                                x-on:click="pick('--nq-tag-red')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-orange" aria-label="Orange" title="Orange"
                                style="background-color: var(--nq-tag-orange)"
                                x-bind:aria-checked="isOn('--nq-tag-orange')" x-bind:tabindex="tab('--nq-tag-orange')"
                                x-bind:data-checked="isOn('--nq-tag-orange') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-orange') ? null : ''"
                                x-on:click="pick('--nq-tag-orange')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-amber" aria-label="Amber" title="Amber"
                                style="background-color: var(--nq-tag-amber)"
                                x-bind:aria-checked="isOn('--nq-tag-amber')" x-bind:tabindex="tab('--nq-tag-amber')"
                                x-bind:data-checked="isOn('--nq-tag-amber') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-amber') ? null : ''"
                                x-on:click="pick('--nq-tag-amber')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-green" aria-label="Green" title="Green"
                                style="background-color: var(--nq-tag-green)"
                                x-bind:aria-checked="isOn('--nq-tag-green')" x-bind:tabindex="tab('--nq-tag-green')"
                                x-bind:data-checked="isOn('--nq-tag-green') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-green') ? null : ''"
                                x-on:click="pick('--nq-tag-green')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-teal" aria-label="Teal" title="Teal"
                                style="background-color: var(--nq-tag-teal)"
                                x-bind:aria-checked="isOn('--nq-tag-teal')" x-bind:tabindex="tab('--nq-tag-teal')"
                                x-bind:data-checked="isOn('--nq-tag-teal') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-teal') ? null : ''"
                                x-on:click="pick('--nq-tag-teal')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-blue" aria-label="Blue" title="Blue"
                                style="background-color: var(--nq-tag-blue)"
                                x-bind:aria-checked="isOn('--nq-tag-blue')" x-bind:tabindex="tab('--nq-tag-blue')"
                                x-bind:data-checked="isOn('--nq-tag-blue') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-blue') ? null : ''"
                                x-on:click="pick('--nq-tag-blue')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-violet" aria-label="Violet" title="Violet"
                                style="background-color: var(--nq-tag-violet)"
                                x-bind:aria-checked="isOn('--nq-tag-violet')" x-bind:tabindex="tab('--nq-tag-violet')"
                                x-bind:data-checked="isOn('--nq-tag-violet') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-violet') ? null : ''"
                                x-on:click="pick('--nq-tag-violet')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                                    <button type="button" role="radio" data-slot="color-picker-swatch" data-value="--nq-tag-pink" aria-label="Pink" title="Pink"
                                style="background-color: var(--nq-tag-pink)"
                                x-bind:aria-checked="isOn('--nq-tag-pink')" x-bind:tabindex="tab('--nq-tag-pink')"
                                x-bind:data-checked="isOn('--nq-tag-pink') ? '' : null" x-bind:data-unchecked="isOn('--nq-tag-pink') ? null : ''"
                                x-on:click="pick('--nq-tag-pink')" class="relative aspect-square w-full cursor-default rounded-control border border-nq-line-strong outline-none transition-shadow duration-150 ease-nq hover:shadow-[0_0_0_2px_var(--nq-line-strong)] data-checked:shadow-[0_0_0_2px_var(--popover),0_0_0_4px_var(--foreground)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"></button>
                                            </div>
                                                            </div></div>
</template>
</div>
</div>
                </div>
                <div x-show="isStatus" class="contents">
                    <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">Stage</label>
                        <div data-slot="select" x-data="nqSelect('todo', false)" x-modelable="value" x-id="['nq-select']" x-model="draft.stage" 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('backlog', 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('backlog')" 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">Backlog</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('todo', 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('todo')" 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">To do</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('active', 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('active')" 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">In progress</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('review', 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('review')" 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">In review</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('done', 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('done')" 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">Done</span>
</div>
                                                                    <div data-slot="select-item" x-bind="item('canceled', 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('canceled')" 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">Canceled</span>
</div>
    </div>
</template>
    </div>
</div>
                </div>
                <div class="flex items-center gap-2 text-caption text-muted-foreground">
                    Preview
                    <span data-slot="badge"  style="--tag-solid: var(--nq-tag-blue); --tag-soft: var(--nq-tag-blue-soft)"     x-bind:style="tagStyle(draft.hue)" 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-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)]"><span x-text="previewName"></span></span>
                </div>
                <template x-if="formError !== ''">
                    <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="formError"></span></div>
            </div>
    </div>
                </template>
                <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="editOpen = 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="submitLabel"></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>
</section></div>
            <div data-section="integrations" x-bind="page('integrations')"
     hidden     class="flex min-w-0 flex-col gap-6"><div data-slot="project-integrations" class="flex min-w-0 flex-col gap-3">
                <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="integError" x-cloak style="display: none" x-text="integError"></p>
                <ul class="m-0 flex list-none flex-col gap-2 p-0">
                                            <li>
                            <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-content" class="px-4 flex min-w-0 items-center justify-between gap-3 pt-4"><div class="flex min-w-0 items-center gap-3">
                                                                                    <span aria-hidden="true" class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-secondary text-muted-foreground [&_svg]:size-5"><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="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
  <path d="M9 18c-4.51 2-5-2-7-2"/>
</svg></span>
                                                                                <div class="flex min-w-0 flex-col gap-0.5">
                                            <span class="flex flex-wrap items-center gap-2 text-label">
                                                GitHub
                                                <span data-slot="status" data-tone="success" x-show="integ[0]" x-cloak="x-cloak" 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="Connected" >Connected</span>
</span>
                                                <span data-slot="status" data-tone="neutral" x-show="! integ[0]" 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-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">
  <circle cx="12" cy="12" r="10"/>
</svg>        <span class="truncate"  title="Not connected" >Not connected</span>
</span>
                                            </span>
                                                                                            <span class="text-body-sm text-muted-foreground">Link pull requests to issues.</span>
                                                                                    </div>
                                    </div>
                                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(true)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="integ[0]" x-bind:aria-label="integLabel(0)" x-bind:disabled="integBusy === 0" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked: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">
    <span data-slot="switch-thumb"  data-checked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button></div></div>
                        </li>
                                            <li>
                            <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-content" class="px-4 flex min-w-0 items-center justify-between gap-3 pt-4"><div class="flex min-w-0 items-center gap-3">
                                                                                    <span aria-hidden="true" class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-secondary text-muted-foreground [&_svg]:size-5"><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="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/>
</svg></span>
                                                                                <div class="flex min-w-0 flex-col gap-0.5">
                                            <span class="flex flex-wrap items-center gap-2 text-label">
                                                Slack
                                                <span data-slot="status" data-tone="success" x-show="integ[1]" x-cloak="x-cloak" 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="Connected" >Connected</span>
</span>
                                                <span data-slot="status" data-tone="neutral" x-show="! integ[1]" 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-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">
  <circle cx="12" cy="12" r="10"/>
</svg>        <span class="truncate"  title="Not connected" >Not connected</span>
</span>
                                            </span>
                                                                                            <span class="text-body-sm text-muted-foreground">Post updates to a channel.</span>
                                                                                    </div>
                                    </div>
                                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="integ[1]" x-bind:aria-label="integLabel(1)" x-bind:disabled="integBusy === 1" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked: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">
    <span data-slot="switch-thumb"  data-unchecked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button></div></div>
                        </li>
                                    </ul>
            </div></div>
            <div data-section="danger" x-bind="page('danger')"
     hidden     class="flex min-w-0 flex-col gap-6"><div data-slot="project-danger" class="flex min-w-0 flex-col gap-3">
                                    <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-content" class="px-4 flex min-w-0 flex-wrap items-center justify-between gap-3 pt-4"><div class="flex min-w-0 flex-col gap-0.5">
                                <span class="text-label">Archive this project</span>
                                <span class="text-body-sm text-muted-foreground">Hides it from active lists and makes it read-only. You can restore it later.</span>
                            </div>
                            <button data-slot="button"
     type="button"                         x-on:click="askDanger(&#039;archive&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="5" x="2" y="3" rx="1"/>
  <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/>
  <path d="M10 12h4"/>
</svg>Archive project</button></div></div>
                                                    <div data-slot="card" class="flex flex-col gap-4 rounded-card border bg-card py-4 text-card-foreground border-nq-danger/40"><div data-slot="card-content" class="px-4 flex min-w-0 flex-wrap items-center justify-between gap-3 pt-4"><div class="flex min-w-0 flex-col gap-0.5">
                                <span class="text-label">Delete this project</span>
                                <span class="text-body-sm text-muted-foreground">Permanently removes the project with its issues, files and history.</span>
                            </div>
                            <button data-slot="button"
     type="button"                         x-on:click="askDanger(&#039;delete&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <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>Delete project</button></div></div>
                <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="dangerOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form class="flex flex-col gap-4" x-on:submit.prevent="runDanger()">
                            <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"><span x-show="isDelete()" x-cloak style="display: none">Delete this project?</span>
                                    <span x-show="! isDelete()">Archive this project?</span></h2>
                                <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-show="isDelete()" x-cloak style="display: none">This cannot be undone. Type the project key to confirm.</span>
                                    <span x-show="! isDelete()">Nobody will be able to change issues until it is restored.</span></p></div>
                            <div x-show="isDelete()" x-cloak style="display: none">
                                <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">Project key</label>
                                    <input data-slot="input" type="text"
     dir="ltr"                 autocomplete="off" placeholder="NSQ" x-model="typed" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                            </div>
                            <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="dangerError" x-cloak style="display: none" x-text="dangerError"></p>
                            <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-bind:disabled="dangerBusy" x-on:click="dangerOpen = 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="submit"                         x-show="isDelete()" x-cloak="x-cloak" style="display: none" x-bind:disabled="dangerBusy || ! dangerReady()" 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-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Delete project</button>
                                <button data-slot="button"
     type="submit"                         x-show="! isDelete()" x-bind:disabled="dangerBusy" 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)]">
        Archive project</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></div>
            <div data-slot="settings-save-bar" :data-state="status" :hidden="!barShown"  x-cloak                 class="sticky bottom-4 z-10 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-floating border bg-card px-4 py-3 shadow-floating"
                :class="status === 'error' ? 'border-nq-danger/50' : 'border-border'">
                <div role="status" aria-live="polite" class="flex min-w-0 flex-1 items-center gap-2 text-body-sm">
                    <svg x-show="status === 'saved'" x-cloak="1" aria-hidden="true" class="size-4 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">
  <path d="M20 6 9 17l-5-5"/>
</svg>                    <svg x-show="status === 'error'" x-cloak="1" aria-hidden="true" class="size-4 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"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                    <span x-show="status === 'idle'" aria-hidden="true" class="size-2 shrink-0 rounded-full bg-nq-accent"></span>
                    <span x-text="message"
                        :class="status === 'error' ? 'text-nq-danger-text' : status === 'saving' ? 'text-muted-foreground' : 'text-foreground'">0 unsaved changes</span>
                </div>
                <div x-show="status !== 'saved'" class="flex items-center gap-2">
                    <button data-slot="button"
     type="button"                         x-on:click="discard()" x-bind:disabled="status === &#039;saving&#039;" x-bind:data-disabled="status === &#039;saving&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Discard</button>
                    <button data-slot="button"
     type="button"                         x-on:click="save()" x-bind:disabled="status === &#039;saving&#039;" x-bind:data-disabled="status === &#039;saving&#039; ? &#039;&#039; : null" x-bind:aria-busy="status === &#039;saving&#039; ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <template x-if="status === 'saving'"><svg data-slot="spinner" aria-hidden="true" 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></template>
                        Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div></div>
</div>
            <div data-slot="project-new-issue" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="newOpen" 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="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-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form class="grid gap-4" x-on:submit.prevent="submitNew()">
            <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">New issue</h2>
                <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Give it a title. You can fill in the rest on the issue.</p></div>
            <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">Title</label>
                <input data-slot="input" type="text"
                    x-model="newTitle" autofocus="autofocus" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
            <div class="grid grid-cols-2 gap-3">
                <div class="flex flex-col gap-1.5">
                    <span id="nq-pv-new-type" class="text-label">Type</span>
                    <div data-slot="select" x-data="nqSelect('task', false)" x-modelable="value" x-id="['nq-select']" x-model="newType" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-new-type" 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('bug', 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('bug')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" class="size-4 shrink-0 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="M12 20v-9"/>
  <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/>
  <path d="M14.12 3.88 16 2"/>
  <path d="M21 21a4 4 0 0 0-3.81-4"/>
  <path d="M21 5a4 4 0 0 1-3.55 3.97"/>
  <path d="M22 13h-4"/>
  <path d="M3 21a4 4 0 0 1 3.81-4"/>
  <path d="M3 5a4 4 0 0 0 3.55 3.97"/>
  <path d="M6 13H2"/>
  <path d="m8 2 1.88 1.88"/>
  <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>
</svg>Bug</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('feature', 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('feature')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" class="size-4 shrink-0 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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg>Feature</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('improvement', 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('improvement')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" class="size-4 shrink-0 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="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>Improvement</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('task', 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('task')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" class="size-4 shrink-0 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="m9 12 2 2 4-4"/>
</svg>Task</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('chore', 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('chore')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" class="size-4 shrink-0 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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>
</svg>Chore</span></span>
</div>
    </div>
</template>
    </div>
                </div>
                <div class="flex flex-col gap-1.5">
                    <span id="nq-pv-new-priority" class="text-label">Priority</span>
                    <div data-slot="select" x-data="nqSelect('medium', false)" x-modelable="value" x-id="['nq-select']" x-model="newPriority" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-pv-new-priority" 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('urgent', 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('urgent')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" style="color: var(--nq-danger)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg>Urgent</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('high', 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('high')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" style="color: var(--nq-tag-orange)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg>High</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('medium', 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('medium')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" style="color: var(--nq-tag-amber)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg>Medium</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('low', 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('low')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" style="color: var(--nq-tag-blue)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg>Low</span></span>
</div>
                                                            <div data-slot="select-item" x-bind="item('none', 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('none')" 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"><span class="flex items-center gap-2"><svg aria-hidden="true" style="color: var(--nq-fg-muted)" class="size-4 shrink-0" 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="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/>
</svg>No priority</span></span>
</div>
    </div>
</template>
    </div>
                </div>
            </div>
            <p role="alert" class="m-0 text-body-sm text-nq-danger-text" x-show="newError" x-cloak style="display: none" x-text="newError"></p>
            <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-bind:disabled="newBusy" x-on:click="newOpen = 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="submit"                         x-bind:disabled="newBusy" 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 px-[var(--nq-control-pad)]">
        Create</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>
    </section>
</div>
```