# Issue View

> One issue as a page or a quick-view drawer with an inline title, a rich description, a properties sidebar, checklist, sub-issues, linked pull requests, comments, activity, time and AI cost.

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

## Install

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

Everything about one issue in one place. It is presentational: you own the data and every change awaits your callback.

## When to use

- The page for an issue, or the drawer opened from a board card or table row.

## When not to use

- A list of issues: use `ProjectView` or `DataTable`.

## Import

```tsx
import { IssueView, IssueQuickView } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<IssueView
  issue={issue}
  statuses={statuses}
  labels={labels}
  people={people}
  projects={projects}
  onUpdate={async (patch) => save(issue.id, patch)}
  thread={{ comments, onSubmit }}
/>
```

## Anatomy

```
IssueView              data-slot="issue-view", a container query
├─ header              key with copy, inline title, back button
├─ description         RichTextEditor, saved on blur
├─ checklist, sub-issues, linked pull requests and commits
├─ tabs                Comments, Activity, Time, AI cost (only the ones with data)
└─ properties          status, priority, type, assignee, labels, estimate, due, project, parent
IssueQuickView         a Sheet around IssueView variant="drawer"
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `issue` | `Issue` | required | The issue. |
| `statuses` / `labels` / `people` / `projects` | arrays | required | The choices for the properties. |
| `parentOptions` | `IssueRef[]` | none | The issue and its descendants are left out. |
| `onUpdate` | `(patch) => Promise<...>` | none | Save a property, the title or the description. Omit for read-only. |
| `checklist` | `{ items, onToggle, onAdd, onRemove }` | none | Shows the checklist. |
| `subIssues` / `onAddSubIssue` / `onOpenIssue` | | none | Sub-issues and opening one. |
| `development` | `{ repo, pulls, commits, runs }` | none | Linked pull requests. |
| `thread` | `CommentThreadProps` | none | Shows Comments. |
| `activity` | `{ items, onSubmit, onToggleTask, onDelete }` | none | Shows Activity. |
| `time` | `{ entries, running, onStart, onStop, ... }` | none | Shows Time. |
| `ai` | `{ days, byModel, byProduct, byRun, run? }` | none | Shows AI cost. |
| `variant` | `"page" \| "drawer"` | `page` | Sidebar beside the content, or stacked. |
| `onBack` | `() => void` | none | Back button. |
| `labelsText` | `IssueViewLabels` | en / ar | Every string. |
| `open` / `onOpenChange` / `onOpenFull` | | none | `IssueQuickView` only. |

`IssueCard` (also exported here) shows one issue as a board card: type, key, priority, title, labels, due date,
votes (a toggle with `onVote`), comments, attachments and the assignee. Props: `issue`, `labels`, `people`,
`votes`, `voted`, `onVote(voted)`, `comments`, `attachments`, `open`, `now`, `text`. `IssueBoard` and
`ProjectView`'s board use it.

## Examples

- **Drawer**: `IssueQuickView` opened from a board card.

## Accessibility

The title is a heading that becomes an input on click; Enter saves and Escape cancels. Property pickers are labelled selects; errors use `role="alert"`. The drawer traps focus and returns it on close.

## RTL & i18n

English and Arabic built in. Keys, dates and numbers stay left-to-right; the layout mirrors with logical classes.

## Styling & tokens

Semantic tokens only. Overdue dates use the danger tokens.

## Do / Don't

- Do return `{ error }` so a failed change shows next to the field.
- Do not pass tabs you cannot fill: leave the prop out and the tab is hidden.

## Related

- [ProjectView](https://docs.nasaqui.com/components/project-view)
- [CommentThread](https://docs.nasaqui.com/components/comment-thread)

## Lab

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

## Code

### React

```tsx
<IssueView
  issue={issue}
  statuses={statuses}
  labels={labels}
  people={people}
  projects={projects}
  onUpdate={async (patch) => save(issue.id, patch)}
  thread={{ comments, onSubmit }}
/>
```

### shadcn

```tsx
<IssueView
  issue={issue}
  statuses={statuses}
  labels={labels}
  people={people}
  projects={projects}
  onUpdate={async (patch) => save(issue.id, patch)}
  thread={{ comments, onSubmit }}
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqIssueView, 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 },
  { id: "l2", name: "Backend", hue: "teal" as const },
];
const people = [{ id: "u1", name: "Layla Hassan" }, { id: "u2", name: "Omar Said" }];
const projects = [{ id: "p1", name: "Checkout" }];

const issue = ref<Issue>({
  id: "i1",
  key: "NSQ-42",
  title: "Refunds fail for split payments",
  description: "<p>A refund on a split payment returns a 500.</p>",
  statusId: "doing",
  priority: "high",
  type: "bug",
  assigneeId: "u1",
  labelIds: ["l2"],
  estimateHours: 4,
  dueDate: "2026-10-02",
  projectId: "p1",
  createdAt: "2026-09-20T09:00:00Z",
});

// Your save: apply the patch, then pass the updated issue back. Resolve { error } to show why it failed.
const save = async (patch: IssuePatch) => {
  issue.value = { ...issue.value, ...patch };
};
</script>

<template>
  <NqIssueView :issue="issue" :statuses="statuses" :labels="labels" :people="people" :projects="projects" :on-update="save" :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']];
    $projects = [['id' => 'p1', 'name' => 'Checkout']];
    $issue = [
        'id' => 'i1', 'key' => 'NSQ-42', 'title' => 'Refunds fail for split payments',
        'description' => '<p>A refund on a split payment returns a 500.</p><p>Steps: pay with two cards, then refund the order.</p>',
        'statusId' => 'doing', 'priority' => 'high', 'type' => 'bug', 'assigneeId' => 'u1', 'labelIds' => ['l2'],
        'estimateHours' => 4, 'dueDate' => '2026-10-02', 'projectId' => 'p1', 'parentId' => 'i0',
        'createdAt' => '2026-09-20T09:00:00Z', 'updatedAt' => '2026-09-28T14:30:00Z',
    ];
    $parentOptions = [
        ['id' => 'i0', 'key' => 'NSQ-40', 'title' => 'Payments hardening', 'statusId' => 'doing'],
        ['id' => 'i7', 'key' => 'NSQ-47', 'title' => 'Receipts redesign', 'statusId' => 'todo'],
    ];
    $subIssues = [
        ['id' => 's1', 'key' => 'NSQ-43', 'title' => 'Reproduce with a test', 'statusId' => 'done', 'assigneeId' => 'u2'],
        ['id' => 's2', 'key' => 'NSQ-44', 'title' => 'Fix the refund total', 'statusId' => 'doing', 'assigneeId' => 'u1'],
    ];
    $me = ['id' => 'u1', 'name' => 'Layla Hassan'];
    $comments = [
        ['id' => 'c1', 'author' => $me, 'body' => 'Reproduced on staging, the second card is refunded twice.', 'createdAt' => '2026-09-28T09:01:00Z'],
        ['id' => 'c2', 'author' => ['id' => 'u2', 'name' => 'Omar Said'], 'body' => 'On it.', 'createdAt' => '2026-09-28T09:05:00Z', 'parentId' => 'c1'],
    ];
    $activity = [
        ['id' => 'a1', 'kind' => 'event', 'body' => 'Status moved to In progress', 'at' => '2026-09-28T08:00:00', 'actor' => ['name' => 'Omar Said']],
        ['id' => 'a2', 'kind' => 'task', 'body' => 'Ask finance for the sample order', 'at' => '2026-10-01T09:00:00'],
    ];
    $entries = [
        ['id' => 'e1', 'date' => '2026-09-28', 'seconds' => 5400, 'projectId' => 'p1', 'taskId' => 'i1', 'note' => 'Reproduction'],
        ['id' => 'e2', 'date' => '2026-09-29', 'seconds' => 3600, 'projectId' => 'p1', 'taskId' => 'i1'],
    ];
@endphp
<div class="w-full max-w-5xl">
    <x-nq::issue-view :issue="$issue" :statuses="$statuses" :labels="$labels" :people="$people" :projects="$projects" :parent-options="$parentOptions" :sub-issues="$subIssues"
        update add-sub-issue open-issue back now="2026-09-29 09:00"
        :development="['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']]]"
        :checklist="['items' => [['id' => 'k1', 'text' => 'Write a failing test', 'done' => true], ['id' => 'k2', 'text' => 'Fix the total', 'done' => false]], 'add' => true, 'remove' => true]"
        :thread="['comments' => $comments, 'currentUser' => $me, 'post' => true, 'edit' => true, 'delete' => true]"
        :activity="['items' => $activity, '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]], 'byModel' => [['id' => 'sonnet', 'label' => 'Sonnet 5.5', 'tokensIn' => 420000, 'tokensOut' => 38000, 'cost' => 3.7]], 'run' => ['tokensIn' => 182000, 'tokensOut' => 24000, 'cached' => 120000, 'cost' => 1.42, 'budget' => 5]]" />
</div>
<div class="mt-6 grid w-full max-w-5xl gap-3 sm:grid-cols-2">
    <x-nq::issue-view.card :issue="$issue" :labels="$labels" :people="$people" :votes="4" :voted="true" voteable :comments="3" :attachments="1" now="2026-10-01" class="cursor-pointer" />
    <x-nq::issue-view.card :issue="['key' => 'NSQ-50', 'title' => 'Tidy the footer', 'type' => 'chore', 'priority' => 'low', 'labelIds' => [], 'dueDate' => '2026-09-20']" :open="false" now="2026-10-01" />
</div>
```

### HTML + Alpine

```html
<div class="w-full max-w-5xl">
    <article data-slot="issue-view" data-variant="page" x-data="nqIssueView(JSON.parse('{\u0022title\u0022:\u0022Refunds fail for split payments\u0022,\u0022description\u0022:\u0022\\u003Cp\\u003EA refund on a split payment returns a 500.\\u003C\\\/p\\u003E\\u003Cp\\u003ESteps: pay with two cards, then refund the order.\\u003C\\\/p\\u003E\u0022,\u0022plain\u0022:\u0022A refund on a split payment returns a 500.\\nSteps: pay with two cards, then refund the order.\u0022,\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022,\u0022titleEmpty\u0022:\u0022A title is required\u0022}}'))"
    class="@container flex min-w-0 flex-col gap-4">
    <header class="flex min-w-0 flex-col gap-2">
        <div class="flex min-w-0 flex-wrap items-center gap-2">
                            <button data-slot="button"
     type="button"                         x-on:click="back()" 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" 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="m12 19-7-7 7-7"/>
  <path d="M19 12H5"/>
</svg>Back</button>
                                        <button type="button"  x-on:click="openIssue('i0')"  class="inline-flex items-center gap-1 text-body-sm text-muted-foreground hover:text-foreground hover:underline">
                    <bdi dir="ltr" class="font-mono">NSQ-40</bdi>
                    <svg aria-hidden="true" class="size-3.5 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 9 9 4 4 9"/>
  <path d="M20 20h-7a4 4 0 0 1-4-4V4"/>
</svg>                </button>
                        <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>            <bdi dir="ltr" class="font-mono text-body-sm text-muted-foreground">NSQ-42</bdi>
            <span class="contents" x-data="nqCopyButton('NSQ-42', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy issue key" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                            <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 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">High</span>
                                </div>
        <h1 class="m-0 min-w-0 text-title-sm font-semibold text-foreground"  x-show="!editingTitle" >
                            <button type="button" title="Edit title" x-on:click="startTitle()" class="group -mx-2 inline-flex max-w-full items-start gap-2 rounded-control px-2 py-0.5 text-start outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <span class="break-words" x-text="title">Refunds fail for split payments</span>
                    <svg aria-hidden="true" class="mt-1.5 size-3.5 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-visible:opacity-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="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>
                    </h1>
                    <div x-show="editingTitle" x-cloak style="display: none" class="flex min-w-0 flex-col gap-1">
                <input data-slot="input" type="text"
                    x-ref="titleInput" aria-label="Edit title" value="Refunds fail for split payments" x-model="titleDraft" x-bind:disabled="titleBusy" x-bind:aria-invalid="titleError ? true : null" x-on:blur="commitTitle()" x-on:keydown.enter.prevent="commitTitle()" x-on:keydown.escape.prevent="cancelTitle()" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body 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-lg text-title-sm font-semibold">
                <p role="alert" x-show="titleError" x-text="titleError" x-cloak style="display: none" class="text-body-sm text-nq-danger-text"></p>
            </div>
            </header>
    <div class="grid min-w-0 gap-6 @3xl:grid-cols-[minmax(0,1fr)_19rem]">
                <div class="flex min-w-0 flex-col gap-6">
            <section data-slot="issue-description" aria-labelledby="nq-iv-i1-desc-h" class="flex min-w-0 flex-col gap-2">
                <div class="flex items-center justify-between gap-2">
                    <h2 id="nq-iv-i1-desc-h" class="m-0 text-body font-semibold">Description</h2>
                                            <button data-slot="button"
     type="button"                         x-show="!editingDesc" x-on:click="startDesc(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-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="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</button>
                                    </div>
                                    <div x-show="editingDesc" x-cloak style="display: none" class="flex flex-col gap-2">
                                                    <textarea data-slot="textarea"
                aria-labelledby="nq-iv-i1-desc-h" rows="6" x-model="descDraft" x-bind:disabled="descBusy" 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>
                                                <p role="alert" x-show="descError" x-text="descError" x-cloak style="display: none" class="text-body-sm text-nq-danger-text"></p>
                        <div class="flex justify-end gap-2">
                            <button data-slot="button"
     type="button"                         x-bind:disabled="descBusy" x-on:click="cancelDesc()" 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">
        Cancel</button>
                            <button data-slot="button"
     type="button"                         x-bind:disabled="descBusy" x-on:click="saveDesc(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 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Save</button>
                        </div>
                    </div>
                                <div  x-show="!editingDesc" >
                                            <p x-text="plain" x-show="plain" class="m-0 whitespace-pre-line text-body text-nq-fg-body" >A refund on a split payment returns a 500.
Steps: pay with two cards, then refund the order.</p>
                        <p x-show="!plain" x-cloak class="m-0 text-body-sm text-muted-foreground"  style="display: none" >No description yet.</p>
                                    </div>
            </section>
                            <section data-slot="checklist" aria-label="Checklist" x-data="nqChecklist(JSON.parse('[{\u0022id\u0022:\u0022k1\u0022,\u0022text\u0022:\u0022Write a failing test\u0022,\u0022done\u0022:true},{\u0022id\u0022:\u0022k2\u0022,\u0022text\u0022:\u0022Fix the total\u0022,\u0022done\u0022:false}]'), JSON.parse('{\u0022canAdd\u0022:true,\u0022canRemove\u0022:true}'))" x-modelable="items"
    class="flex flex-col gap-3">
            <div data-slot="progress" role="progressbar" x-show="progress().total > 0" x-cloak style="display: none" aria-valuemin="0" aria-valuemax="100" x-bind:aria-valuenow="progress().percent" x-bind:data-tone="progress().percent === 100 ? 'success' : 'default'" 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 class="text-label text-foreground" x-text="progressLabel()"></span>
                <span aria-hidden="true" class="text-muted-foreground tabular-nums" x-text="progress().percent + '%'"></span>
            </div>
            <div data-slot="progress-track" class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-2">
                <div data-slot="progress-indicator" x-bind:style="'inset-inline-start:0;width:' + progress().percent + '%'" x-bind:class="progress().percent === 100 ? 'bg-nq-success' : 'bg-primary'" class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none"></div>
            </div>
        </div>
    <div data-slot="empty-state" x-show="items.length === 0" x-cloak="x-cloak" style="display: none" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M13 5h8"/>
  <path d="M13 12h8"/>
  <path d="M13 19h8"/>
  <path d="m3 17 2 2 4-4"/>
  <path d="m3 7 2 2 4-4"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No items yet</p>
                    <p class="text-body-sm text-muted-foreground">Add the first thing that needs doing.</p>
            </div>
    </div>
    <ul x-show="items.length > 0" aria-label="Items" class="flex flex-col gap-1">
        <template x-for="item in items" :key="item.id">
            <li data-slot="checklist-item" x-bind:data-done="done(item) ? '' : null" class="flex flex-col gap-1.5">
                <div class="group flex items-start gap-2.5 rounded-control px-1 py-1 hover:bg-nq-hover">
                    <label class="flex min-w-0 flex-1 cursor-pointer items-start gap-2.5">
                        <button type="button" role="checkbox" data-slot="checkbox" x-on:click.prevent="toggle(item)" x-bind:disabled="readOnly" x-bind:aria-label="item.text"
                            x-bind:aria-checked="state(item) === 'some' ? 'mixed' : String(done(item))"
                            x-bind:data-checked="done(item) && state(item) !== 'some' ? '' : null" x-bind:data-unchecked="!done(item) && state(item) !== 'some' ? '' : null" x-bind:data-indeterminate="state(item) === 'some' ? '' : null"
                            class="mt-0.5 relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
                            <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="done(item) || state(item) === 'some'" x-cloak style="display: none">
                                <svg aria-hidden="true" x-show="state(item) === 'some'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>                                <svg aria-hidden="true" x-show="state(item) !== 'some'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                            </span>
                        </button>
                        <span class="flex min-w-0 flex-col">
                            <span class="text-body-sm text-foreground" x-bind:class="done(item) && 'text-muted-foreground line-through'" x-text="item.text"></span>
                            <span x-show="item.meta" class="text-caption text-muted-foreground" x-text="item.meta"></span>
                        </span>
                    </label>
                    <span x-show="(item.subtasks ?? []).length > 0" x-cloak style="display: none" dir="ltr" class="mt-0.5 shrink-0 text-caption tabular-nums text-muted-foreground" x-text="doneSubs(item) + '/' + (item.subtasks ?? []).length"></span>
                    <div class="flex shrink-0 items-center">
                                                    <button data-slot="button"
     type="button"                         x-show="!readOnly" x-bind:aria-label="$nq.t(&#039;Add a subtask to &#039;, &#039;إضافة مهمة فرعية إلى &#039;) + item.text" x-on:click="startAdd(item.id)" 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 12h14"/>
  <path d="M12 5v14"/>
</svg></button>
                                                                                                    <button data-slot="button"
     type="button"                         x-show="!readOnly" x-bind:aria-label="$nq.t(&#039;Delete &#039;, &#039;حذف &#039;) + item.text" x-on:click="remove(item.id)" 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>
                                                <button data-slot="button"
     type="button"                         x-show="(item.subtasks ?? []).length &gt; 0" x-cloak="x-cloak" style="display: none" x-bind:aria-expanded="isOpen(item.id)" x-bind:aria-label="(isOpen(item.id) ? $nq.t(&#039;Hide subtasks of &#039;, &#039;إخفاء المهام الفرعية لـ &#039;) : $nq.t(&#039;Show subtasks of &#039;, &#039;إظهار المهام الفرعية لـ &#039;)) + item.text" x-on:click="toggleOpen(item.id)" 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" x-bind:class="!isOpen(item.id) && '-rotate-90 rtl:rotate-90'" class="transition-transform duration-150" xmlns="http://www.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></button>
                    </div>
                </div>
                <ul x-show="(item.attachments ?? []).length > 0" x-cloak style="display: none" class="flex flex-wrap gap-1.5 ps-8" aria-label="Attach a file">
                    <template x-for="a in item.attachments ?? []" :key="a.id">
                        <li class="inline-flex max-w-full items-center gap-1 rounded-control border border-border bg-secondary px-2 py-0.5 text-caption text-foreground">
                            <svg aria-hidden="true" class="size-3 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 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/>
</svg>                            <a x-show="a.url" x-bind:href="a.url" dir="auto" class="truncate underline-offset-2 hover:underline" x-text="a.name"></a>
                            <span x-show="!a.url" dir="auto" class="truncate" x-text="a.name"></span>
                            <bdi x-show="a.size !== undefined" class="text-muted-foreground" x-text="a.size !== undefined ? size(a.size) : ''"></bdi>
                            <button type="button" x-show="!readOnly" x-bind:aria-label="$nq.t('Remove ', 'إزالة ') + a.name" x-on:click="removeAttachment(item.id, a.id)"
                                class="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus"><svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                        </li>
                    </template>
                </ul>
                <ul x-show="(item.subtasks ?? []).length > 0 && isOpen(item.id)" x-cloak style="display: none" class="ms-3 flex flex-col gap-1 border-s border-border ps-4">
                    <template x-for="sub in item.subtasks ?? []" :key="sub.id">
                        <li data-slot="checklist-item" x-bind:data-done="sub.done ? '' : null" class="flex flex-col gap-1.5">
                            <div class="group flex items-start gap-2.5 rounded-control px-1 py-1 hover:bg-nq-hover">
                                <label class="flex min-w-0 flex-1 cursor-pointer items-start gap-2.5">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-on:click.prevent="toggle(sub)" x-bind:disabled="readOnly" x-bind:aria-label="sub.text" x-bind:aria-checked="String(sub.done)"
                                        x-bind:data-checked="sub.done ? '' : null" x-bind:data-unchecked="sub.done ? null : ''" class="mt-0.5 relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="sub.done" x-cloak style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                    <span class="flex min-w-0 flex-col">
                                        <span class="text-body-sm text-foreground" x-bind:class="sub.done && 'text-muted-foreground line-through'" x-text="sub.text"></span>
                                        <span x-show="sub.meta" class="text-caption text-muted-foreground" x-text="sub.meta"></span>
                                    </span>
                                </label>
                                                                    <button data-slot="button"
     type="button"                         x-show="!readOnly" x-bind:aria-label="$nq.t(&#039;Delete &#039;, &#039;حذف &#039;) + sub.text" x-on:click="remove(sub.id)" 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>
                        </li>
                    </template>
                </ul>
                                    <div x-show="adding === item.id" x-cloak style="display: none" class="ms-3 ps-4">
                        <form class="flex items-center gap-2" x-on:submit.prevent="add(item.id)" x-on:keydown.escape="adding = null">
                            <input data-slot="input" type="text"
                    x-model="subText" x-effect="adding === item.id &amp;&amp; $nextTick(() =&gt; $el.focus())" aria-label="Add subtask" placeholder="Add a subtask" 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">
                            <button data-slot="button"
     type="submit"                         x-bind:disabled="subText.trim() === &#039;&#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">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>Add</button>
                        </form>
                    </div>
                            </li>
        </template>
    </ul>
            <form class="flex items-center gap-2" x-on:submit.prevent="add()">
            <input data-slot="input" type="text"
                    x-model="text" aria-label="New item" placeholder="Add an item" 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">
            <button data-slot="button"
     type="submit"                         x-bind:disabled="text.trim() === &#039;&#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">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>Add</button>
        </form>
    </section>
                            <section data-slot="issue-sub-issues" aria-labelledby="nq-iv-i1-sub-h" class="flex min-w-0 flex-col gap-2">
                    <div class="flex items-center justify-between gap-3">
                        <h2 id="nq-iv-i1-sub-h" class="m-0 text-body font-semibold">Sub-issues</h2>
                                                    <span class="text-body-sm text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
 / <bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                                            </div>
                                            <div data-slot="progress" data-tone="default" role="progressbar"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="50"     aria-valuetext="50%" data-progressing
    aria-label="Sub-issues" class="flex w-full flex-col gap-1.5">
        <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:50%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                        <div role="list" class="m-0 flex flex-col divide-y divide-border rounded-control border border-border 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="flex min-w-0 items-center gap-2 px-3 py-2" role="listitem"><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-43</bdi>
                                        <button type="button"  x-on:click="openIssue('s1')"  title="Shipped"
                                            class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline text-muted-foreground line-through">Reproduce with a test</button>
                                                                                    <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>
                                                                                <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-43" 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="default" x-bind="item"
        x-on:click="openIssue(&#039;s1&#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"><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="copy(&#039;NSQ-43&#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"><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>
                                    <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="default" x-bind="item"
        x-on:click="openIssue(&#039;s1&#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"><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="copy(&#039;NSQ-43&#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"><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="flex min-w-0 items-center gap-2 px-3 py-2" role="listitem"><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-44</bdi>
                                        <button type="button"  x-on:click="openIssue('s2')"  title="In progress"
                                            class="min-w-0 flex-1 truncate text-start text-body-sm outline-none hover:underline focus-visible:underline ">Fix the refund total</button>
                                                                                    <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>
                                                                                <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-44" 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="default" x-bind="item"
        x-on:click="openIssue(&#039;s2&#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"><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="copy(&#039;NSQ-44&#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"><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>
                                    <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="default" x-bind="item"
        x-on:click="openIssue(&#039;s2&#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"><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="copy(&#039;NSQ-44&#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"><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>
                                                                <form class="flex items-center gap-2" x-on:submit.prevent="addSub()">
                            <input data-slot="input" type="text"
                    aria-label="Add a sub-issue" placeholder="Add a sub-issue" x-model="subTitle" x-bind:disabled="subBusy" 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">
                            <button data-slot="button"
     type="submit"                         x-bind:disabled="subBusy || !subTitle.trim()" 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>Add</button>
                        </form>
                                        <p role="alert" x-show="subError" x-text="subError" x-cloak style="display: none" class="text-body-sm text-nq-danger-text"></p>
                </section>
                            <section aria-labelledby="nq-iv-i1-dev-h" class="flex min-w-0 flex-col gap-2">
                    <h2 id="nq-iv-i1-dev-h" class="m-0 text-body font-semibold">Development</h2>
                    <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>
                                    <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>
                </section>
                            <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('comments')" 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="Activity" 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('comments')"
     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">Comments<span class="ms-1.5 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span></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<span class="ms-1.5 text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span></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>
                                                <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('comments')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><section data-slot="comment-thread" aria-label="Comment thread" x-data="nqCommentThread(JSON.parse('{\u0022bodies\u0022:{\u0022c1\u0022:\u0022Reproduced on staging, the second card is refunded twice.\u0022,\u0022c2\u0022:\u0022On it.\u0022},\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022}}'))" class="flex min-w-0 flex-col gap-4">
                <ol class="m-0 flex list-none flex-col gap-5 p-0">
                                            <li class="flex min-w-0 flex-col gap-3">
                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="comment" x-bind="trigger" x-ref="trigger" class="-m-2 flex min-w-0 gap-3 rounded-card p-2" role="article" aria-label="Layla Hassan"><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 mt-0.5">
                    <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>
        <div class="flex min-w-0 flex-1 flex-col gap-1">
            <header class="flex flex-wrap items-center gap-x-2 gap-y-1">
                <span class="text-label text-foreground">Layla Hassan</span>
                                                <time data-slot="date-time" datetime="2026-09-28T09:01:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] text-caption text-muted-foreground">23 hours ago</time>
                                                    <span class="ms-auto">
                        <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 for the comment by Layla Hassan" 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="default" x-bind="item"
        data-action="edit" x-on:click="startEdit(&#039;c1&#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"><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</div>
                                                                <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="danger" x-bind="item"
        data-action="delete" x-on:click="askDelete(&#039;c1&#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 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>
                    </span>
                            </header>
                            <div x-show="editId === 'c1'" x-cloak>
                    <form data-slot="comment-composer" data-composer="edit"  data-for="c1"  novalidate
    x-on:submit.prevent="submit('edit', 'c1')"
    x-on:keydown="key($event, 'edit', 'c1')"
    x-on:nq-mentions-change="mentions.edit = $event.detail.mentions"
    class="flex min-w-0 gap-3">
        <div class="flex min-w-0 flex-1 flex-col gap-2">
        <div data-slot="mention-textarea" x-data="nqMentionTextarea('', JSON.parse('{\u0022suggestions\u0022:[],\u0022strings\u0022:{\u0022list\u0022:\u0022Mentions\u0022,\u0022empty\u0022:\u0022No matches\u0022,\u0022count\u0022:\u0022{n} suggestions\u0022,\u0022person\u0022:\u0022People\u0022,\u0022team\u0022:\u0022Teams\u0022,\u0022group\u0022:\u0022Groups\u0022,\u0022teamOne\u0022:\u0022Team\u0022,\u0022groupOne\u0022:\u0022Group\u0022}}'))" x-modelable="text" x-id="['nq-mention']"
    x-model="drafts.edit" class="relative w-full">
    <textarea data-slot="textarea"
                x-bind="area" x-ref="area" rows="2" placeholder="Write a comment…" aria-label="Write a comment…" x-bind:disabled="busy !== &#039;&#039;" 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>
    <ul x-show="open()" x-cloak :id="listId()" role="listbox" aria-label="Mentions" data-slot="mention-list" :style="listStyle()" @mousedown.prevent
        class="absolute z-50 max-h-56 w-64 max-w-full overflow-y-auto rounded-floating border border-border bg-popover p-1 text-body-sm text-popover-foreground shadow-floating">
        <template x-for="r in rows()" :key="r.key">
            <li x-bind="row(r)">
                <span x-show="r.type === 'heading'" x-text="r.type === 'heading' ? heading(r.kind) : ''"></span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') === 'person'" class="relative inline-flex shrink-0">
                    <span data-slot="avatar" aria-hidden="true" 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">
                        <img x-show="r.type === 'option' && r.option.avatar" data-slot="avatar-image" :src="r.type === 'option' ? r.option.avatar : null" alt="" class="size-full object-cover" style="display: none">
                        <span x-show="r.type === 'option' && ! r.option.avatar" data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-text="r.type === 'option' ? initials(r.option.name) : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.presence" style="display: none" data-slot="presence-dot" aria-hidden="true"
                        :data-presence="r.type === 'option' ? r.option.presence : null"
                        :class="r.type === 'option' && r.option.presence ? presenceClass(r.option.presence) : ''"
                        class="absolute -end-0.5 -bottom-0.5 inline-block size-2.5 shrink-0 rounded-full border-2 border-popover"></span>
                </span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" aria-hidden="true" class="inline-flex size-6 shrink-0 items-center justify-center rounded-control bg-secondary text-secondary-foreground">
                    <span class="flex [&_svg]:size-3.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="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></span>
                </span>
                <span x-show="r.type === 'option'" class="flex min-w-0 flex-col">
                    <span class="truncate text-label text-foreground">
                        <span x-text="r.type === 'option' ? r.option.name : ''"></span>
                        <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" class="sr-only" x-text="r.type === 'option' ? ' (' + kindLabel(r.option.kind) + ')' : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.description" style="display: none" class="truncate text-caption text-muted-foreground" x-text="r.type === 'option' ? r.option.description : ''"></span>
                </span>
            </li>
        </template>
    </ul>
    <div x-show="emptyShown()" x-cloak data-slot="mention-empty" :style="listStyle()"
        class="absolute z-50 w-64 max-w-full rounded-floating border border-border bg-popover px-3 py-2 text-body-sm text-muted-foreground shadow-floating">No matches</div>
    <span role="status" class="sr-only" x-text="status()"></span>
    </div>
        <p x-show="err.edit" x-cloak x-text="err.edit" role="alert" class="text-body-sm text-nq-danger-text"></p>
        <div class="flex items-center justify-end gap-2">
                            <button data-slot="button"
     type="button"                         x-on:click="cancelEdit()" x-bind:disabled="busy !== &#039;&#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 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Cancel</button>
                        <button data-slot="button"
     type="submit"                         x-bind:disabled="empty(&#039;edit&#039;) || busy !== &#039;&#039;" x-bind:aria-busy="busy === &#039;edit&#039;" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" x-show="busy === &#039;edit&#039;" x-cloak="1" class="animate-spin motion-reduce:animate-none 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 12a9 9 0 1 1-6.219-8.56"/>
</svg>                Save</button>
        </div>
    </div>
</form>
                </div>
                        <div data-slot="comment-body"  x-show="editId !== 'c1'"  x-on:click="mentionClick($event)" class="[&amp;_a[href^=&#039;#mention-&#039;]]:cursor-default [&amp;_a[href^=&#039;#mention-&#039;]]:rounded-[4px] [&amp;_a[href^=&#039;#mention-&#039;]]:bg-nq-info-soft [&amp;_a[href^=&#039;#mention-&#039;]]:px-1 [&amp;_a[href^=&#039;#mention-&#039;]]:font-medium [&amp;_a[href^=&#039;#mention-&#039;]]:text-nq-info-text [&amp;_a[href^=&#039;#mention-&#039;]]:no-underline"><div data-slot="markdown" class="flex min-w-0 flex-col text-nq-fg-body gap-2 text-body-sm"><p data-slot="text" dir="auto" class="text-body text-nq-fg-body text-start">Reproduced on staging, the second card is refunded twice.</p>
</div>
</div>
                                        <p x-show="err['c:' + 'c1']" x-cloak x-text="err['c:' + 'c1']" role="alert" class="text-body-sm text-nq-danger-text"></p>
                                        <div x-show="confirmId === 'c1'" x-cloak role="alertdialog" aria-label="Delete this comment?" class="flex flex-wrap items-center gap-2 text-body-sm">
                    <span class="text-foreground">Delete this comment?</span>
                    <button data-slot="button"
     type="button"                         data-action="confirm-delete" x-on:click="remove(&#039;c1&#039;)" x-bind:disabled="busy !== &#039;&#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-sm px-2.5">
        Delete</button>
                    <button data-slot="button"
     type="button"                         x-on:click="cancelDelete()" 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">
        Cancel</button>
                </div>
                                        <div  x-show="editId !== 'c1'" >
                    <button data-slot="button"
     type="button"                         data-action="reply" x-on:click="startReply(&#039;c1&#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 hover:bg-nq-hover h-control-sm px-2.5 -ms-2 text-muted-foreground">
        <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 10 5 5-5 5"/>
  <path d="M4 4v7a4 4 0 0 0 4 4h12"/>
</svg>                        Reply</button>
                </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="default" x-bind="item"
        data-action="reply" x-on:click="startReply(&#039;c1&#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"><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 10 5 5-5 5"/>
  <path d="M4 4v7a4 4 0 0 0 4 4h12"/>
</svg>Reply</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="default" x-bind="item"
        data-action="edit" x-on:click="startEdit(&#039;c1&#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"><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</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"
        data-action="delete" x-on:click="askDelete(&#039;c1&#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 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>
                    <ol  aria-label="1 replies"                         class="m-0 ms-4 flex list-none flex-col gap-3 border-s border-border p-0 ps-4">
                                                    <li>
                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="comment" x-bind="trigger" x-ref="trigger" class="-m-2 flex min-w-0 gap-3 rounded-card p-2" role="article" aria-label="Omar Said"><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 mt-0.5">
                    <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>
        <div class="flex min-w-0 flex-1 flex-col gap-1">
            <header class="flex flex-wrap items-center gap-x-2 gap-y-1">
                <span class="text-label text-foreground">Omar Said</span>
                                                <time data-slot="date-time" datetime="2026-09-28T09:05:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] text-caption text-muted-foreground">23 hours ago</time>
                                            </header>
                        <div data-slot="comment-body"  x-on:click="mentionClick($event)" class="[&amp;_a[href^=&#039;#mention-&#039;]]:cursor-default [&amp;_a[href^=&#039;#mention-&#039;]]:rounded-[4px] [&amp;_a[href^=&#039;#mention-&#039;]]:bg-nq-info-soft [&amp;_a[href^=&#039;#mention-&#039;]]:px-1 [&amp;_a[href^=&#039;#mention-&#039;]]:font-medium [&amp;_a[href^=&#039;#mention-&#039;]]:text-nq-info-text [&amp;_a[href^=&#039;#mention-&#039;]]:no-underline"><div data-slot="markdown" class="flex min-w-0 flex-col text-nq-fg-body gap-2 text-body-sm"><p data-slot="text" dir="auto" class="text-body text-nq-fg-body text-start">On it.</p>
</div>
</div>
                                                        </div></div></div>
                            </li>
                                                                            <li x-show="replyTo === 'c1'" x-cloak>
                                <form data-slot="comment-composer" data-composer="reply"  data-for="c1"  novalidate
    x-on:submit.prevent="submit('reply', 'c1')"
    x-on:keydown="key($event, 'reply', 'c1')"
    x-on:nq-mentions-change="mentions.reply = $event.detail.mentions"
    class="flex min-w-0 gap-3">
            <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 mt-0.5">
                    <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>
        <div class="flex min-w-0 flex-1 flex-col gap-2">
        <div data-slot="mention-textarea" x-data="nqMentionTextarea('', JSON.parse('{\u0022suggestions\u0022:[],\u0022strings\u0022:{\u0022list\u0022:\u0022Mentions\u0022,\u0022empty\u0022:\u0022No matches\u0022,\u0022count\u0022:\u0022{n} suggestions\u0022,\u0022person\u0022:\u0022People\u0022,\u0022team\u0022:\u0022Teams\u0022,\u0022group\u0022:\u0022Groups\u0022,\u0022teamOne\u0022:\u0022Team\u0022,\u0022groupOne\u0022:\u0022Group\u0022}}'))" x-modelable="text" x-id="['nq-mention']"
    x-model="drafts.reply" class="relative w-full">
    <textarea data-slot="textarea"
                x-bind="area" x-ref="area" rows="2" placeholder="Write a reply…" aria-label="Write a reply…" x-bind:disabled="busy !== &#039;&#039;" 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>
    <ul x-show="open()" x-cloak :id="listId()" role="listbox" aria-label="Mentions" data-slot="mention-list" :style="listStyle()" @mousedown.prevent
        class="absolute z-50 max-h-56 w-64 max-w-full overflow-y-auto rounded-floating border border-border bg-popover p-1 text-body-sm text-popover-foreground shadow-floating">
        <template x-for="r in rows()" :key="r.key">
            <li x-bind="row(r)">
                <span x-show="r.type === 'heading'" x-text="r.type === 'heading' ? heading(r.kind) : ''"></span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') === 'person'" class="relative inline-flex shrink-0">
                    <span data-slot="avatar" aria-hidden="true" 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">
                        <img x-show="r.type === 'option' && r.option.avatar" data-slot="avatar-image" :src="r.type === 'option' ? r.option.avatar : null" alt="" class="size-full object-cover" style="display: none">
                        <span x-show="r.type === 'option' && ! r.option.avatar" data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-text="r.type === 'option' ? initials(r.option.name) : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.presence" style="display: none" data-slot="presence-dot" aria-hidden="true"
                        :data-presence="r.type === 'option' ? r.option.presence : null"
                        :class="r.type === 'option' && r.option.presence ? presenceClass(r.option.presence) : ''"
                        class="absolute -end-0.5 -bottom-0.5 inline-block size-2.5 shrink-0 rounded-full border-2 border-popover"></span>
                </span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" aria-hidden="true" class="inline-flex size-6 shrink-0 items-center justify-center rounded-control bg-secondary text-secondary-foreground">
                    <span class="flex [&_svg]:size-3.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="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></span>
                </span>
                <span x-show="r.type === 'option'" class="flex min-w-0 flex-col">
                    <span class="truncate text-label text-foreground">
                        <span x-text="r.type === 'option' ? r.option.name : ''"></span>
                        <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" class="sr-only" x-text="r.type === 'option' ? ' (' + kindLabel(r.option.kind) + ')' : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.description" style="display: none" class="truncate text-caption text-muted-foreground" x-text="r.type === 'option' ? r.option.description : ''"></span>
                </span>
            </li>
        </template>
    </ul>
    <div x-show="emptyShown()" x-cloak data-slot="mention-empty" :style="listStyle()"
        class="absolute z-50 w-64 max-w-full rounded-floating border border-border bg-popover px-3 py-2 text-body-sm text-muted-foreground shadow-floating">No matches</div>
    <span role="status" class="sr-only" x-text="status()"></span>
    </div>
        <p x-show="err.reply" x-cloak x-text="err.reply" role="alert" class="text-body-sm text-nq-danger-text"></p>
        <div class="flex items-center justify-end gap-2">
                            <button data-slot="button"
     type="button"                         x-on:click="cancelReply()" x-bind:disabled="busy !== &#039;&#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 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Cancel</button>
                        <button data-slot="button"
     type="submit"                         x-bind:disabled="empty(&#039;reply&#039;) || busy !== &#039;&#039;" x-bind:aria-busy="busy === &#039;reply&#039;" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" x-show="busy === &#039;reply&#039;" x-cloak="1" class="animate-spin motion-reduce:animate-none 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 12a9 9 0 1 1-6.219-8.56"/>
</svg>                Reply</button>
        </div>
    </div>
</form>
                            </li>
                                            </ol>
                </li>
                    </ol>
                            <form data-slot="comment-composer" data-composer="main"  novalidate
    x-on:submit.prevent="submit('main')"
    x-on:keydown="key($event, 'main')"
    x-on:nq-mentions-change="mentions.main = $event.detail.mentions"
    class="flex min-w-0 gap-3">
            <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 mt-0.5">
                    <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>
        <div class="flex min-w-0 flex-1 flex-col gap-2">
        <div data-slot="mention-textarea" x-data="nqMentionTextarea('', JSON.parse('{\u0022suggestions\u0022:[],\u0022strings\u0022:{\u0022list\u0022:\u0022Mentions\u0022,\u0022empty\u0022:\u0022No matches\u0022,\u0022count\u0022:\u0022{n} suggestions\u0022,\u0022person\u0022:\u0022People\u0022,\u0022team\u0022:\u0022Teams\u0022,\u0022group\u0022:\u0022Groups\u0022,\u0022teamOne\u0022:\u0022Team\u0022,\u0022groupOne\u0022:\u0022Group\u0022}}'))" x-modelable="text" x-id="['nq-mention']"
    x-model="drafts.main" class="relative w-full">
    <textarea data-slot="textarea"
                x-bind="area" x-ref="area" rows="2" placeholder="Write a comment…" aria-label="Write a comment…" x-bind:disabled="busy !== &#039;&#039;" 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>
    <ul x-show="open()" x-cloak :id="listId()" role="listbox" aria-label="Mentions" data-slot="mention-list" :style="listStyle()" @mousedown.prevent
        class="absolute z-50 max-h-56 w-64 max-w-full overflow-y-auto rounded-floating border border-border bg-popover p-1 text-body-sm text-popover-foreground shadow-floating">
        <template x-for="r in rows()" :key="r.key">
            <li x-bind="row(r)">
                <span x-show="r.type === 'heading'" x-text="r.type === 'heading' ? heading(r.kind) : ''"></span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') === 'person'" class="relative inline-flex shrink-0">
                    <span data-slot="avatar" aria-hidden="true" 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">
                        <img x-show="r.type === 'option' && r.option.avatar" data-slot="avatar-image" :src="r.type === 'option' ? r.option.avatar : null" alt="" class="size-full object-cover" style="display: none">
                        <span x-show="r.type === 'option' && ! r.option.avatar" data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-text="r.type === 'option' ? initials(r.option.name) : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.presence" style="display: none" data-slot="presence-dot" aria-hidden="true"
                        :data-presence="r.type === 'option' ? r.option.presence : null"
                        :class="r.type === 'option' && r.option.presence ? presenceClass(r.option.presence) : ''"
                        class="absolute -end-0.5 -bottom-0.5 inline-block size-2.5 shrink-0 rounded-full border-2 border-popover"></span>
                </span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" aria-hidden="true" class="inline-flex size-6 shrink-0 items-center justify-center rounded-control bg-secondary text-secondary-foreground">
                    <span class="flex [&_svg]:size-3.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="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></span>
                </span>
                <span x-show="r.type === 'option'" class="flex min-w-0 flex-col">
                    <span class="truncate text-label text-foreground">
                        <span x-text="r.type === 'option' ? r.option.name : ''"></span>
                        <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" class="sr-only" x-text="r.type === 'option' ? ' (' + kindLabel(r.option.kind) + ')' : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.description" style="display: none" class="truncate text-caption text-muted-foreground" x-text="r.type === 'option' ? r.option.description : ''"></span>
                </span>
            </li>
        </template>
    </ul>
    <div x-show="emptyShown()" x-cloak data-slot="mention-empty" :style="listStyle()"
        class="absolute z-50 w-64 max-w-full rounded-floating border border-border bg-popover px-3 py-2 text-body-sm text-muted-foreground shadow-floating">No matches</div>
    <span role="status" class="sr-only" x-text="status()"></span>
    </div>
        <p x-show="err.main" x-cloak x-text="err.main" role="alert" class="text-body-sm text-nq-danger-text"></p>
        <div class="flex items-center justify-end gap-2">
                        <button data-slot="button"
     type="submit"                         x-bind:disabled="empty(&#039;main&#039;) || busy !== &#039;&#039;" x-bind:aria-busy="busy === &#039;main&#039;" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" x-show="busy === &#039;main&#039;" x-cloak="1" class="animate-spin motion-reduce:animate-none 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 12a9 9 0 1 1-6.219-8.56"/>
</svg>                Comment</button>
        </div>
    </div>
</form>
            </section></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 flex flex-col gap-4 pt-4"><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:[\u0022a1\u0022,\u0022a2\u0022],\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022}}'))" class="flex min-w-0 flex-col gap-5">
                                    <section aria-label="Planned tasks" class="flex flex-col gap-2">
                    <h3 class="flex items-center gap-2 text-label text-foreground">
                        Planned
                        <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 data-slot="num" data-numeric="" class="tabular-nums">1</bdi></span>
                    </h3>
                    <ol data-slot="timeline" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" data-activity-id="a2" data-kind="task"  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 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></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">
                            Task
                                                                                                            </span>
                                    </p>
                <time data-slot="date-time" datetime="2026-10-01T09:00:00+00:00" dir="auto"  title="Oct 1, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">2 days from now</time>
            </div>
                            <p class="text-body-sm text-muted-foreground">
                                            <span dir="auto" class="block whitespace-pre-wrap text-foreground">Ask finance for the sample order</span>
                                    </p>
                                        <div class="flex flex-wrap items-center gap-2">
                                                                <label class="flex items-center gap-2 text-body-sm text-foreground">
                            <span class="contents" x-on:click="toggleTask(1, true, $el)"><button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 aria-label="Mark done: Ask finance for the sample order" data-action="toggle" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
</span>
                            Due
                        </label>
                                                                <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="default" x-bind="item"
        data-action="toggle" x-on:click="toggleTask(1, true)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>Mark done: Ask finance for the sample order</div>
                                                                <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="danger" x-bind="item"
        data-action="delete" x-on:click="removeActivity(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</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="default" x-bind="item"
        data-action="toggle" x-on:click="toggleTask(1, true)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>Mark done: Ask finance for the sample order</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"
        data-action="delete" x-on:click="removeActivity(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</div></div>
</template>
    </li></ol>
                </section>
                                        <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="a1" data-kind="event"  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="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"/>
</svg></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="font-normal text-muted-foreground">Status moved to In progress</span>
                                    </p>
                <time data-slot="date-time" datetime="2026-09-28T08:00:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">1 day ago</time>
            </div>
                            <p class="text-body-sm text-muted-foreground">
                                            <span>by Omar Said</span>
                                    </p>
                                        <div class="flex flex-wrap items-center gap-2">
                                                                                    <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></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 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-42 Refunds fail for split payments\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},{\u0022id\u0022:\u0022e2\u0022,\u0022date\u0022:\u00222026-09-29\u0022,\u0022seconds\u0022:3600,\u0022projectId\u0022:\u0022p1\u0022,\u0022taskId\u0022:\u0022i1\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 flex flex-col gap-4 pt-4"><div data-slot="token-cost-meter" class="flex min-w-0 flex-col gap-3">
    <div class="flex items-baseline justify-between gap-3 text-body-sm">
        <span class="text-label text-foreground">Token split</span>
        <bdi class="text-muted-foreground tabular-nums">206K tokens</bdi>
    </div>
    <div role="img" aria-label="Input 62K, Cached 120K, Output 24K" class="flex h-2 overflow-hidden rounded-full bg-nq-surface-soft" dir="ltr">
                    <span class="h-full" style="width: 30.0971%; background: var(--primary)"></span>                    <span class="h-full" style="width: 58.2524%; background: var(--nq-info)"></span>                    <span class="h-full" style="width: 11.6505%; background: var(--nq-warning)"></span>            </div>
    <ul class="flex flex-wrap gap-x-4 gap-y-1 text-caption text-muted-foreground">
                    <li class="flex items-center gap-1.5">
                <span aria-hidden="true" class="size-2 rounded-full" style="background: var(--primary)"></span>
                Input
                <bdi class="text-foreground tabular-nums">62K</bdi>
            </li>
                    <li class="flex items-center gap-1.5">
                <span aria-hidden="true" class="size-2 rounded-full" style="background: var(--nq-info)"></span>
                Cached
                <bdi class="text-foreground tabular-nums">120K</bdi>
            </li>
                    <li class="flex items-center gap-1.5">
                <span aria-hidden="true" class="size-2 rounded-full" style="background: var(--nq-warning)"></span>
                Output
                <bdi class="text-foreground tabular-nums">24K</bdi>
            </li>
            </ul>
            <div data-slot="usage-meter" data-tone="ok"  class="flex min-w-0 flex-col gap-1.5">
    <div class="flex items-baseline justify-between gap-3 text-body-sm">
        <span data-slot="usage-meter-label" class="min-w-0 truncate text-label text-foreground">Run budget</span>
        <span data-slot="usage-meter-value" class="shrink-0 text-muted-foreground tabular-nums"><bdi class="text-foreground">$1.42</bdi> of <bdi>$5</bdi></span>
    </div>
            <div class="relative">
            <div data-slot="meter" data-tone="default" role="meter"     aria-valuemin="0" aria-valuemax="5" aria-valuenow="1.42" aria-valuetext="1%"
    aria-label="Run budget" class="flex w-full flex-col gap-1.5">
        <div data-slot="meter-track" class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
        <div data-slot="meter-indicator" style="inset-inline-start:0;width:28.4%" class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                    </div>
                    <div class="flex flex-wrap items-center justify-between gap-x-3 text-caption text-muted-foreground">
                                    <span></span>
                                                    <span>$3.58 left</span>
                            </div>
            </div>
    </div>
                                                        <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">458K</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 data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('model')" x-modelable="value" x-id="['nq-tabs']" class="flex flex-col gap-4">
    <div data-slot="tabs-list" data-variant="segmented" aria-orientation="horizontal" x-bind="list"
    aria-label="Cost breakdown" 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('model')"
     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">By model</button>
</div>
                                            <div data-slot="tabs-panel" x-bind="panel('model')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-3"><div data-slot="breakdown-table"      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-0"><div data-slot="table-container" role="region" tabindex="0"  aria-label="Cost breakdown: By model"     class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
    <table data-slot="table" data-density="default"
                  class="w-full caption-bottom border-collapse text-body-sm">
        <thead data-slot="table-header" class="[&_tr]:border-b [&_tr]:hover:bg-transparent [&_tr]:even:bg-transparent"><tr data-slot="table-row"     class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><th data-slot="table-head" scope="col" class="h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3">Model</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Cost</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 hidden text-end sm:table-cell">Share</th>
                                                                            <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">In</th>
                                                    <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Out</th></tr></thead>
                <tbody data-slot="table-body" class="[&_tr:last-child]:border-0"><tr data-slot="table-row"     data-row="sonnet" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><bdi dir="ltr" class="block truncate">Sonnet 5.5</bdi>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 100%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$3.70</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">100%</bdi></td>
                                                                                                                    <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums">420K</td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums">38K</td></tr></tbody>
    </table>
</div></div>
</div></div>
</div>
    </div></div>
</div>
                    </div>
                    <aside class="min-w-0 @3xl:sticky @3xl:top-4 @3xl:self-start"><section aria-label="Details" class="flex min-w-0 flex-col gap-3">
    <dl data-slot="issue-properties" x-data="nqIssueProperties(JSON.parse('{\u0022values\u0022:{\u0022status\u0022:\u0022doing\u0022,\u0022priority\u0022:\u0022high\u0022,\u0022type\u0022:\u0022bug\u0022,\u0022assignee\u0022:\u0022u1\u0022,\u0022project\u0022:\u0022p1\u0022,\u0022parent\u0022:\u0022i0\u0022},\u0022labelIds\u0022:[\u0022l2\u0022],\u0022estimate\u0022:\u00224h\u0022,\u0022due\u0022:\u00222026-10-02\u0022,\u0022readOnly\u0022:false,\u0022labels\u0022:{\u0022failed\u0022:\u0022That did not work. Try again.\u0022,\u0022estimateHint\u0022:\u0022Hours, for example 2 or 1h 30m\u0022}}'))" x-bind:aria-busy="busy ? 'true' : 'false'"
    class="m-0 flex min-w-0 flex-col gap-1.5">
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-status" class="text-body-sm text-muted-foreground">Status</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('doing', false)" x-modelable="value" x-id="['nq-select']" x-model="v.status" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-status" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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('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"><span class="flex min-w-0 items-center gap-2"><span data-select-icon class="contents"><span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-gray)" class="size-2.5 shrink-0 rounded-full"></span>
</span>To do</span></span>
</div>
                                            <div data-slot="select-item" x-bind="item('doing', 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('doing')" 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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-blue)" class="size-2.5 shrink-0 rounded-full"></span>
</span>In progress</span></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"><span class="flex min-w-0 items-center gap-2"><span data-select-icon class="contents"><span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-green)" class="size-2.5 shrink-0 rounded-full"></span>
</span>Shipped</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-priority" class="text-body-sm text-muted-foreground">Priority</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('high', false)" x-modelable="value" x-id="['nq-select']" x-model="v.priority" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-priority" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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 min-w-0 items-center gap-2"><span data-select-icon 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>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 min-w-0 items-center gap-2"><span data-select-icon 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>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 min-w-0 items-center gap-2"><span data-select-icon 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>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 min-w-0 items-center gap-2"><span data-select-icon 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>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 min-w-0 items-center gap-2"><span data-select-icon 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>No priority</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-type" class="text-body-sm text-muted-foreground">Type</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('bug', false)" x-modelable="value" x-id="['nq-select']" x-model="v.type" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-type" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>Chore</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-assignee" class="text-body-sm text-muted-foreground">Assignee</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('u1', false)" x-modelable="value" x-id="['nq-select']" x-model="v.assignee" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-assignee" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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('__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 min-w-0 items-center gap-2">Unassigned</span></span>
</div>
                                            <div data-slot="select-item" x-bind="item('u1', 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('u1')" 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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>Layla Hassan</span></span>
</div>
                                            <div data-slot="select-item" x-bind="item('u2', 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('u2')" 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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><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>Omar Said</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-labels" class="text-body-sm text-muted-foreground">Labels</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button type="button" x-ref="trigger" x-on:click="toggle()" x-bind:disabled="locked" aria-haspopup="dialog" aria-labelledby="nq-iv-i1-labels" x-bind:aria-expanded="open ? 'true' : 'false'"
                    class="flex min-h-control-sm w-full min-w-0 flex-wrap items-center gap-1 rounded-control px-2 py-1 text-start text-body outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus disabled:opacity-50">
                    <span class="text-muted-foreground" x-show="labelIds.length === 0" x-cloak  style="display: none" >No labels</span>
                                            <span class="contents" x-show="has('l1')" x-cloak  style="display: none" >
                            <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>
                                            <span class="contents" x-show="has('l2')" x-cloak >
                            <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>
                                    </button>
                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-56 p-1"><ul aria-label="Choose labels" class="m-0 flex max-h-64 list-none flex-col overflow-y-auto p-0">
                                                    <li>
                                <button type="button" role="checkbox" x-bind:aria-checked="has('l1') ? 'true' : 'false'" x-on:click="toggleLabel('l1')"
                                    class="flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:bg-nq-hover">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-violet)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <span class="min-w-0 flex-1 truncate">Design</span>
                                    <span x-show="has('l1')" x-cloak class="contents"  style="display: none" ><svg aria-hidden="true" class="size-4 text-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="M20 6 9 17l-5-5"/>
</svg></span>
                                </button>
                            </li>
                                                    <li>
                                <button type="button" role="checkbox" x-bind:aria-checked="has('l2') ? 'true' : 'false'" x-on:click="toggleLabel('l2')"
                                    class="flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-start text-body-sm outline-none hover:bg-nq-hover focus-visible:bg-nq-hover">
                                    <span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-teal)" class="size-2.5 shrink-0 rounded-full"></span>
                                    <span class="min-w-0 flex-1 truncate">Backend</span>
                                    <span x-show="has('l2')" x-cloak class="contents" ><svg aria-hidden="true" class="size-4 text-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="M20 6 9 17l-5-5"/>
</svg></span>
                                </button>
                            </li>
                                            </ul></div>
</template>
</div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-estimate" class="text-body-sm text-muted-foreground">Estimate</dt>
        <dd class="m-0 min-w-0">
            <div class="flex min-w-0 flex-col gap-0.5">
                <input data-slot="input" type="text"
     dir="ltr"                 aria-labelledby="nq-iv-i1-estimate" placeholder="No estimate" title="Hours, for example 2 or 1h 30m" value="4h" x-model="estimate" x-bind:disabled="locked" x-on:blur="commitEstimate()" x-on:keydown.enter.prevent="commitEstimate()" x-on:keydown.escape="revertEstimate()" class="w-full min-w-0 rounded-control border 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] text-start h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover focus:bg-card">
                                    <span class="px-2 text-caption text-muted-foreground">
                        <bdi>2h 30m logged</bdi>                         · <bdi data-slot="num" data-numeric="" class="tabular-nums">62%</bdi>
                    </span>
                            </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-due" class="text-body-sm text-muted-foreground">Due date</dt>
        <dd class="m-0 min-w-0">
            <div class="flex min-w-0 flex-col gap-0.5">
                <input data-slot="input" type="date"
     dir="ltr"                 aria-labelledby="nq-iv-i1-due" value="2026-10-02" x-model="due" x-bind:disabled="locked" x-on:blur="commitDue()" x-on:change="commitDue()" x-on:keydown.enter.prevent="commitDue()" x-on:keydown.escape="revertDue()" class="w-full min-w-0 rounded-control border 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] text-start h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover focus:bg-card">
                                    <span class="px-2 text-caption text-muted-foreground">Due soon</span>
                            </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-project" class="text-body-sm text-muted-foreground">Project</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('p1', false)" x-modelable="value" x-id="['nq-select']" x-model="v.project" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-project" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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('p1', 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('p1')" 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 min-w-0 items-center gap-2">Checkout</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <div data-slot="issue-property" class="grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-2">
        <dt id="nq-iv-i1-parent" class="text-body-sm text-muted-foreground">Parent</dt>
        <dd class="m-0 min-w-0">
            <div data-slot="select" x-data="nqSelect('i0', false)" x-modelable="value" x-id="['nq-select']" x-model="v.parent" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-labelledby="nq-iv-i1-parent" x-bind:disabled="locked" class="flex w-full min-w-0 items-center justify-between gap-2 rounded-control border 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] h-control-sm border-transparent bg-transparent px-2 hover:bg-nq-hover">
    <span data-slot="select-value" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground">
    <span class="flex min-w-0 items-center gap-2"><span class="contents" x-html="icon()"></span><span class="truncate" x-text="label() ?? ''"></span></span>
</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('__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 min-w-0 items-center gap-2">No parent</span></span>
</div>
                                            <div data-slot="select-item" x-bind="item('i0', 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('i0')" 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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-blue)" class="size-2.5 shrink-0 rounded-full"></span>
</span>NSQ-40 Payments hardening</span></span>
</div>
                                            <div data-slot="select-item" x-bind="item('i7', 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('i7')" 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 min-w-0 items-center gap-2"><span data-select-icon class="contents"><span aria-hidden="true" data-slot="status-dot" style="background: var(--nq-tag-gray)" class="size-2.5 shrink-0 rounded-full"></span>
</span>NSQ-47 Receipts redesign</span></span>
</div>
    </div>
</template>
    </div>
        </dd>
    </div>
    <p role="alert" x-show="error" x-text="error" x-cloak style="display: none" class="text-body-sm text-nq-danger-text"></p>
</dl>
    <p class="m-0 flex flex-wrap gap-x-3 text-caption text-muted-foreground">
        <span>Created <bdi>Sep 20, 2026</bdi></span>
                    <span>Updated <bdi>Sep 28, 2026</bdi></span>
            </p>
</section>
</aside>
            </div>
</article>
</div>
<div class="mt-6 grid w-full max-w-5xl gap-3 sm:grid-cols-2">
    <div data-slot="issue-card" class="flex w-full flex-col gap-2 rounded-card border border-border bg-card p-3 text-start text-card-foreground cursor-pointer">
    <div class="flex items-center gap-2 text-caption text-muted-foreground">
        <span role="img" aria-label="Bug" 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>
        <bdi dir="ltr" class="font-mono">NSQ-42</bdi>
        <span class="ms-auto inline-flex items-center gap-1" title="High">
            <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 class="sr-only">High</span>
        </span>
    </div>
    <div class="text-label text-foreground">Refunds fail for split payments</div>
            <div class="flex flex-wrap gap-1">
                            <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>
                    </div>
                <div class="flex items-center gap-3 text-caption text-muted-foreground">
                            <button type="button" data-slot="issue-card-vote" x-data="{ on: true }" x-bind:aria-pressed="on ? 'true' : 'false'"
                    x-bind:aria-label="on ? 'Remove your vote, 4 votes' : 'Upvote, 4 votes'"
                    x-bind:class="on ? 'border-nq-accent/40 bg-nq-selected text-foreground' : 'border-border hover:bg-nq-hover'"
                    x-on:click.stop="on = ! on; $dispatch('nq-issue-vote', { key: 'NSQ-42', voted: on })" x-on:keydown.stop x-on:pointerdown.stop
                    aria-pressed="true" aria-label="Remove your vote, 4 votes"
                    class="-ms-1 inline-flex h-6 items-center gap-0.5 rounded-control border px-1.5 tabular-nums outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus border-nq-accent/40 bg-nq-selected text-foreground">
                    <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 15-6-6-6 6"/>
</svg>                    4
                </button>
                                        <span class="inline-flex items-center gap-1 tabular-nums">
                    <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="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 aria-hidden="true">3</span>
                    <span class="sr-only">3 comments</span>
                </span>
                                        <span class="inline-flex items-center gap-1 tabular-nums">
                    <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="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/>
</svg>                    <span aria-hidden="true">1</span>
                    <span class="sr-only">1 attachments</span>
                </span>
                                        <span data-due="soon" class="inline-flex items-center gap-1 text-nq-warning-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="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">Due</span>
                    <time datetime="2026-10-02">2 Oct</time>
                                    </span>
                                        <span data-slot="avatar" x-data="nqAvatar(0)"
    aria-label="Assigned to Layla Hassan" 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 ms-auto">
                    <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>
                    </div>
    </div>
    <div data-slot="issue-card" class="flex w-full 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 role="img" aria-label="Chore" 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">NSQ-50</bdi>
        <span class="ms-auto inline-flex items-center gap-1" title="Low">
            <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 class="sr-only">Low</span>
        </span>
    </div>
    <div class="text-label text-foreground">Tidy the footer</div>
                <div class="flex items-center gap-3 text-caption text-muted-foreground">
                                                                <span data-due="later" class="inline-flex items-center gap-1 text-muted-foreground">
                    <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">Due</span>
                    <time datetime="2026-09-20">20 Sep</time>
                                    </span>
                                </div>
    </div>
</div>
```