# SocialComposer

> One post for several social networks. Each target gets its own limit, counter, preview, media check and optional own version, and a metrics table reports how the posts did.

Source: https://docs.nasaqui.com/components/social-composer

## Install

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

Write once, post to many. Pick the accounts, write the text, and every chosen platform shows its own counter against its
own limit, a preview of what it will send, and what is still missing (Instagram needs an image, TikTok a video). Any
platform can take a version of its own. **Nothing is cut for you**: the composer says what is wrong and the author fixes it.

`SocialMetricsTable` is the other half: totals plus a sortable per-post table of impressions, engagements and rate.

The limits come from the write plugins of fadymondy.com-v2: X 280 (a link weighs 23), Bluesky 300, Threads 500,
LinkedIn 3,000, Facebook 63,206, Instagram 2,200 (image required, 30 hashtags at most), TikTok 2,200 (video required).

## When to use

- A publishing screen for a brand or studio that posts to several networks.
- Showing how posts performed next to the composer.

## When not to use

- A single long-form editor: use the rich text editor.
- Actually sending posts: this component collects and checks the post; your backend talks to each network.

## Import

```tsx
import { SocialComposer, SocialMetricsTable, checkSocialPost } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

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

export function Publish() {
  return (
    <SocialComposer
      accounts={[
        { id: "x1", platform: "x", name: "@nasaq" },
        { id: "li1", platform: "linkedin", name: "Nasaq Studio" },
      ]}
      onSubmit={(post, checks) => console.log(post, checks)}
    />
  );
}
```

## Anatomy

```
SocialComposer            data-slot="social-composer"
├─ accounts               toggle buttons (aria-pressed), one per connected account
├─ text                   Field + Textarea
├─ media + Improve        attach buttons, chips, AiSplitButton
├─ schedule               DatePicker + TimePicker
├─ actions                Publish now / Schedule post, Save draft
└─ targets                one Card per chosen platform  data-slot="social-target" data-level="ok|near|over"
   ├─ counter             Progress + "n of limit"
   ├─ preview or own text
   └─ problems            empty, over, media, hashtags
```

## API

### `SocialComposer`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `accounts` | `SocialAccount[]` | required | `{ id, platform, name }`. Platform is `x`, `bluesky`, `threads`, `linkedin`, `facebook`, `instagram` or `tiktok`. |
| `value?` / `defaultValue?` | `SocialPost` | empty post | `{ body, variants, accountIds, media, scheduledAt }`. |
| `onValueChange?` | `(post) => void` | none | Every edit. |
| `onAttach?` | `(kind: "image" \| "video") => SocialMedia \| null \| void \| Promise<...>` | none | Open your picker and return the file. Without it the attach buttons are hidden. |
| `assistActions?` | `{ id, label }[]` | none | Choices in the Improve menu; the first runs from the main button. |
| `onAssist?` | `(actionId, post) => void` | none | You run the AI action and write the result back with `onValueChange`. |
| `assisting?` | `boolean` | `false` | Spinner on Improve. |
| `onSubmit?` | `(post, checks) => void` | none | Only enabled when every target passes. |
| `onSaveDraft?` | `(post) => void` | none | Always enabled. |
| `submitting?` / `disabled?` | `boolean` | `false` | |
| `locale?` | `string` | provider locale | |
| `labels?` | `SocialComposerLabels` | Arabic and English | Every visible string. |

### `SocialMetricsTable`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `SocialMetricsRow[]` | required | `{ id, platform, account?, text, status, publishedAt?, impressions?, likes?, replies?, reposts?, clicks? }`. |
| `rowActions?` | `(row) => DataTableRowAction[]` | none | Opens with the row menu and on context-click. |
| `onRowClick?` | `(row) => void` | none | |
| `summary?` | `boolean` | `true` | Totals above the table (published rows only). |
| `loading?` / `empty?` / `locale?` / `labels?` | | | |

### Logic (exported)

| Export | Description |
| --- | --- |
| `SOCIAL_PLATFORMS`, `socialRule(platform)` | The limits and requirements. |
| `socialLength(platform, text)` | Length the platform's way: code points, X links as 23. |
| `hashtagCount(text)` | Counts `#tags` including Arabic ones. |
| `checkSocialPost({ body, variants, platforms, media })` | One check per platform: length, remaining, level, problems. |
| `socialReady(checks)` | True when there is a target and nothing is wrong. |
| `socialEngagements`, `socialEngagementRate`, `summarizeSocialMetrics` | Metrics maths. |

## Examples

### Improve with AI

```tsx
import { SocialComposer, type SocialPost } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Assisted({ accounts, shorten }: { accounts: React.ComponentProps<typeof SocialComposer>["accounts"]; shorten: (t: string) => Promise<string> }) {
  const [post, setPost] = useState<SocialPost>({ body: "", variants: {}, accountIds: [], media: [], scheduledAt: null });
  return (
    <SocialComposer
      accounts={accounts}
      value={post}
      onValueChange={setPost}
      assistActions={[{ id: "shorten", label: "Shorten" }, { id: "hashtags", label: "Add hashtags" }]}
      onAssist={async (id, p) => id === "shorten" && setPost({ ...p, body: await shorten(p.body) })}
    />
  );
}
```

### Metrics with a row menu

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

export const Results = ({ rows }: { rows: React.ComponentProps<typeof SocialMetricsTable>["rows"] }) => (
  <SocialMetricsTable rows={rows} rowActions={(r) => [{ id: "open", label: "Open post", onSelect: () => window.open(`/posts/${r.id}`) }]} />
);
```

## Accessibility

- Accounts are buttons with `aria-pressed`, in a `fieldset` with a `legend`.
- Each counter is a `Progress` named "X character count"; the numbers are also written out beside it, and colour is never the only signal (the text says how many are over).
- Problems are plain text under the target.
- The table is the DataTable: arrow keys move between rows, Shift+F10 opens the row menu.

## RTL & i18n

- Arabic and English strings ship in; pass `labels` to override.
- Platform names stay in Latin script, as brands write them, and are shown as text, not logos. Handles sit in a `bdi`.
- Counts use Western digits unless your provider says otherwise. Arabic hashtags count.

## Styling & tokens

Cards, progress tones (`default`, `warning`, `danger`) and stat cards use the standard tokens. The layout is one column on narrow screens and two from `lg`.

## Do / Don't

- **Do** save `variants` as the text to send per platform; `checks[i].text` is exactly what goes out.
- **Do** run the same `checkSocialPost` on the server before publishing.
- **Don't** trim text to fit a limit silently.
- **Don't** show a platform's logo unless you have its official artwork.

## Related

- [AI states](https://docs.nasaqui.com/components/ai-states) · [DatePicker](https://docs.nasaqui.com/components/date-picker) · [DataTable](https://docs.nasaqui.com/components/data-table) · [Progress](https://docs.nasaqui.com/components/progress)

## Lab

https://docs.nasaqui.com/?path=/docs/components-marketing-social-composer--docs

## Code

### React

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

export function Publish() {
  return (
    <SocialComposer
      accounts={[
        { id: "x1", platform: "x", name: "@nasaq" },
        { id: "li1", platform: "linkedin", name: "Nasaq Studio" },
      ]}
      onSubmit={(post, checks) => console.log(post, checks)}
    />
  );
}
```

### shadcn

```tsx
import { SocialComposer } from "@/components/ui/social-composer";

export function Publish() {
  return (
    <SocialComposer
      accounts={[
        { id: "x1", platform: "x", name: "@nasaq" },
        { id: "li1", platform: "linkedin", name: "Nasaq Studio" },
      ]}
      onSubmit={(post, checks) => console.log(post, checks)}
    />
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { ref } from "vue";
import { NqSocialComposer, NqSocialMetricsTable } from "@fadymondy/nasaq/vue";

const accounts = [
  { id: "x1", platform: "x", name: "@nasaq" },
  { id: "li1", platform: "linkedin", name: "Nasaq Studio" },
] as const;
const post = ref({ body: "Nasaq 1.0 is out.", variants: {}, accountIds: ["x1"], media: [], scheduledAt: null });
const rows = [
  { id: "p1", platform: "x", account: "@nasaq", text: "Nasaq 1.0 is out.", status: "published", publishedAt: "2026-09-20", impressions: 12400, likes: 310, replies: 24, reposts: 51 },
  { id: "p2", platform: "linkedin", account: "Nasaq Studio", text: "Launch week recap.", status: "queued" },
] as const;
</script>

<template>
  <div class="flex flex-col gap-6">
    <NqSocialComposer v-model="post" :accounts="accounts" />
    <NqSocialMetricsTable :rows="rows" />
  </div>
</template>
```

### Blade

```blade
<div class="flex flex-col gap-6">
    <x-nq::social-composer
        :accounts="[['id' => 'x1', 'platform' => 'x', 'name' => '@nasaq'], ['id' => 'ig1', 'platform' => 'instagram', 'name' => 'nasaq']]"
        :default-value="['body' => 'Nasaq 1.0 is out.', 'accountIds' => ['x1', 'ig1']]"
        :assist-actions="[['id' => 'shorten', 'label' => 'Shorten'], ['id' => 'tone', 'label' => 'Change tone']]"
        attach save-draft />
    <x-nq::social-composer.metrics-table
        :rows="[
            ['id' => 'p1', 'platform' => 'x', 'account' => '@nasaq', 'text' => 'Nasaq 1.0 is out.', 'status' => 'published', 'publishedAt' => '2026-09-20', 'impressions' => 12400, 'likes' => 310, 'replies' => 24, 'reposts' => 51],
            ['id' => 'p2', 'platform' => 'linkedin', 'account' => 'Nasaq Studio', 'text' => 'Launch week recap.', 'status' => 'queued'],
        ]"
        :row-actions="[['id' => 'open', 'label' => 'Open']]" />
</div>
```

### HTML + Alpine

```html
<div class="flex flex-col gap-6">
    <div data-slot="social-composer" x-data="nqSocialComposer(JSON.parse('{\u0022accounts\u0022:[{\u0022id\u0022:\u0022x1\u0022,\u0022platform\u0022:\u0022x\u0022,\u0022name\u0022:\u0022@nasaq\u0022},{\u0022id\u0022:\u0022ig1\u0022,\u0022platform\u0022:\u0022instagram\u0022,\u0022name\u0022:\u0022nasaq\u0022}],\u0022defaultValue\u0022:{\u0022body\u0022:\u0022Nasaq 1.0 is out.\u0022,\u0022accountIds\u0022:[\u0022x1\u0022,\u0022ig1\u0022]},\u0022assistFirst\u0022:\u0022shorten\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022labels\u0022:{\u0022accounts\u0022:\u0022Post to\u0022,\u0022noAccounts\u0022:\u0022Connect an account to start posting.\u0022,\u0022text\u0022:\u0022Post text\u0022,\u0022textHint\u0022:\u0022One text for every target. Each platform counts it its own way, and nothing is cut for you.\u0022,\u0022placeholder\u0022:\u0022What do you want to share?\u0022,\u0022addImage\u0022:\u0022Add image\u0022,\u0022addVideo\u0022:\u0022Add video\u0022,\u0022removeMedia\u0022:\u0022Remove {name}\u0022,\u0022media\u0022:\u0022Media\u0022,\u0022assist\u0022:\u0022Improve\u0022,\u0022schedule\u0022:\u0022Schedule\u0022,\u0022scheduleHint\u0022:\u0022Leave empty to publish right away.\u0022,\u0022date\u0022:\u0022Date\u0022,\u0022time\u0022:\u0022Time\u0022,\u0022clearSchedule\u0022:\u0022Clear schedule\u0022,\u0022publish\u0022:\u0022Publish now\u0022,\u0022scheduleAction\u0022:\u0022Schedule post\u0022,\u0022saveDraft\u0022:\u0022Save draft\u0022,\u0022targets\u0022:\u0022Targets\u0022,\u0022pickTargets\u0022:\u0022Pick at least one account to see how the post fits.\u0022,\u0022customVersion\u0022:\u0022Write a version for this platform\u0022,\u0022useShared\u0022:\u0022Use the shared text\u0022,\u0022custom\u0022:\u0022Custom\u0022,\u0022chars\u0022:\u0022{used} of {limit}\u0022,\u0022over\u0022:\u0022{n} over the limit\u0022,\u0022left\u0022:\u0022{n} left\u0022,\u0022counter\u0022:\u0022{name} character count\u0022,\u0022problemEmpty\u0022:\u0022Write some text.\u0022,\u0022problemOver\u0022:\u0022Too long for this platform.\u0022,\u0022problemMediaImage\u0022:\u0022Needs an image.\u0022,\u0022problemMediaVideo\u0022:\u0022Needs a video.\u0022,\u0022problemHashtags\u0022:\u0022No more than {max} hashtags.\u0022,\u0022preview\u0022:\u0022Preview\u0022,\u0022ready\u0022:\u0022Ready to go\u0022}}'))"
    class="grid w-full gap-4 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
    <div class="flex min-w-0 flex-col gap-4">
        <fieldset class="flex min-w-0 flex-col gap-2" >
            <legend class="mb-1 text-label font-medium">Post to</legend>
                            <div class="flex flex-wrap gap-2">
                    <template x-for="a in accountList" :key="a.id">
                        <button data-slot="button"
     type="button"                         x-on:click="toggleAccount(a.id)" x-bind:aria-pressed="String(selected(a.id))" x-bind:data-selected="selectedAttr(a.id)" 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 data-selected:border-primary data-selected:bg-nq-selected">
        <span class="font-medium" x-text="a.label"></span>
                            <bdi class="text-muted-foreground" x-text="a.name"></bdi></button>
                    </template>
                </div>
                    </fieldset>
        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Post text</label>
            <textarea data-slot="textarea"
                x-model="body" rows="6" placeholder="What do you want to share?" 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 data-slot="field-description" class="text-caption text-muted-foreground">One text for every target. Each platform counts it its own way, and nothing is cut for you.</p>
</div>
        <div class="flex flex-wrap items-center gap-2">
                            <button data-slot="button"
     type="button"                         x-on:click="attachImage()" 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="M16 5h6"/>
  <path d="M19 2v6"/>
  <path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
  <circle cx="9" cy="9" r="2"/>
</svg>                    Add image</button>
                <button data-slot="button"
     type="button"                         x-on:click="attachVideo()" 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="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/>
  <rect x="2" y="6" width="14" height="12" rx="2"/>
</svg>                    Add video</button>
                                        <div data-slot="ai-split-button" role="group" x-data="nqAiSplit" x-on:nq-ai-run="assist(null)" x-on:nq-ai-action="assist($event.detail.id)" class="inline-flex items-stretch ms-auto">
    <button data-slot="ai-sparkle-button"
     type="button"                         x-on:click="run()" 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)] rounded-e-none border-e-0">
        <svg aria-hidden="true" class="text-nq-accent-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>    Improve</button>
    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="More AI actions" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover size-control p-0 rounded-s-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="m6 9 6 6 6-6"/>
</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-56"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-id="shorten" x-on:click="pick($el.dataset.id)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>                    Shorten</div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-id="tone" x-on:click="pick($el.dataset.id)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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>                    Change tone</div></div>
</template></div>
</div>
                    </div>
        <ul x-show="media.length" style="display: none" aria-label="Media" class="flex flex-wrap gap-2">
            <template x-for="m in media" :key="m.id">
                <li class="inline-flex items-center gap-1.5 rounded-control border border-border bg-nq-surface-soft py-1 ps-2 pe-1 text-body-sm">
                    <span x-show="m.kind === 'image'" class="contents"><svg aria-hidden="true" class="size-3.5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 5h6"/>
  <path d="M19 2v6"/>
  <path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
  <circle cx="9" cy="9" r="2"/>
</svg></span>
                    <span x-show="m.kind !== 'image'" class="contents"><svg aria-hidden="true" class="size-3.5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/>
  <rect x="2" y="6" width="14" height="12" rx="2"/>
</svg></span>
                    <bdi x-text="m.name"></bdi>
                    <button type="button" x-bind:aria-label="fmt('removeMedia', { name: m.name })" x-on:click="removeMedia(m.id)"
                        class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </li>
            </template>
        </ul>
        <fieldset class="flex min-w-0 flex-col gap-2" >
            <legend class="mb-1 inline-flex items-center gap-1.5 text-label font-medium">
                <svg aria-hidden="true" class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 14v2.2l1.6 1"/>
  <path d="M16 2v3"/>
  <path d="M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338"/>
  <path d="M3 9h5.859"/>
  <path d="M8 2v3"/>
  <circle cx="16" cy="16" r="6"/>
</svg>                Schedule
            </legend>
            <div class="flex flex-wrap items-center gap-2">
                <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="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 role="group" dir="ltr" lang="en" data-slot="time-picker" x-data="nqTimePicker(JSON.parse('{\u0022value\u0022:null,\u0022locale\u0022:\u0022en\u0022,\u0022hourCycle\u0022:12}'))" x-modelable="time"
    x-model="time" aria-label="Time" class="inline-flex items-center gap-1.5">
    <select x-model="hourModel" aria-label="Hour" data-slot="time-picker-hour"          class="h-control min-h-[var(--nq-touch-min,0px)] appearance-none rounded-control border border-input bg-card px-2.5 text-center text-body tabular-nums text-foreground outline-none transition-colors duration-150 ease-nq 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]">
        <option value="" disabled hidden>--</option>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                    <option value="6" >6</option>
                    <option value="7" >7</option>
                    <option value="8" >8</option>
                    <option value="9" >9</option>
                    <option value="10" >10</option>
                    <option value="11" >11</option>
                    <option value="12" >12</option>
            </select>
    <span aria-hidden="true" class="text-muted-foreground">:</span>
    <select x-model="minuteModel" aria-label="Minute" data-slot="time-picker-minute"  class="h-control min-h-[var(--nq-touch-min,0px)] appearance-none rounded-control border border-input bg-card px-2.5 text-center text-body tabular-nums text-foreground outline-none transition-colors duration-150 ease-nq 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]">
        <option value="" disabled hidden>--</option>
                    <option value="0" >00</option>
                    <option value="1" >01</option>
                    <option value="2" >02</option>
                    <option value="3" >03</option>
                    <option value="4" >04</option>
                    <option value="5" >05</option>
                    <option value="6" >06</option>
                    <option value="7" >07</option>
                    <option value="8" >08</option>
                    <option value="9" >09</option>
                    <option value="10" >10</option>
                    <option value="11" >11</option>
                    <option value="12" >12</option>
                    <option value="13" >13</option>
                    <option value="14" >14</option>
                    <option value="15" >15</option>
                    <option value="16" >16</option>
                    <option value="17" >17</option>
                    <option value="18" >18</option>
                    <option value="19" >19</option>
                    <option value="20" >20</option>
                    <option value="21" >21</option>
                    <option value="22" >22</option>
                    <option value="23" >23</option>
                    <option value="24" >24</option>
                    <option value="25" >25</option>
                    <option value="26" >26</option>
                    <option value="27" >27</option>
                    <option value="28" >28</option>
                    <option value="29" >29</option>
                    <option value="30" >30</option>
                    <option value="31" >31</option>
                    <option value="32" >32</option>
                    <option value="33" >33</option>
                    <option value="34" >34</option>
                    <option value="35" >35</option>
                    <option value="36" >36</option>
                    <option value="37" >37</option>
                    <option value="38" >38</option>
                    <option value="39" >39</option>
                    <option value="40" >40</option>
                    <option value="41" >41</option>
                    <option value="42" >42</option>
                    <option value="43" >43</option>
                    <option value="44" >44</option>
                    <option value="45" >45</option>
                    <option value="46" >46</option>
                    <option value="47" >47</option>
                    <option value="48" >48</option>
                    <option value="49" >49</option>
                    <option value="50" >50</option>
                    <option value="51" >51</option>
                    <option value="52" >52</option>
                    <option value="53" >53</option>
                    <option value="54" >54</option>
                    <option value="55" >55</option>
                    <option value="56" >56</option>
                    <option value="57" >57</option>
                    <option value="58" >58</option>
                    <option value="59" >59</option>
            </select>
            <select x-model="periodModel" aria-label="AM/PM" data-slot="time-picker-period"  class="h-control min-h-[var(--nq-touch-min,0px)] appearance-none rounded-control border border-input bg-card px-2.5 text-center text-body tabular-nums text-foreground outline-none transition-colors duration-150 ease-nq 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]">
            <option value="am" selected>AM</option>
            <option value="pm" >PM</option>
        </select>
            <svg aria-hidden="true" class="ms-1 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">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg></div>
                <button type="button" x-show="scheduled" style="display: none" x-on:click="clearSchedule()"
                    class="inline-flex h-control-sm shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control px-3 text-label text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Clear schedule</button>
            </div>
            <p class="text-caption text-muted-foreground">Leave empty to publish right away.</p>
        </fieldset>
        <div class="flex flex-wrap items-center gap-2 border-t border-border pt-4">
            <button data-slot="button"
     type="button"                         x-bind:disabled="! ready" x-bind:aria-busy="submitting ? &#039;true&#039; : null" x-on:click="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)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg>                <span x-show="! scheduled">Publish now</span>
                <span x-show="scheduled" style="display: none">Schedule post</span></button>
                            <button data-slot="button"
     type="button"                         x-on:click="saveDraft()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Save draft</button>
                        <span data-slot="status" data-tone="success" x-show="ready" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground ms-auto">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate"  title="Ready to go" >Ready to go</span>
</span>
        </div>
    </div>
    <section aria-label="Targets" class="flex min-w-0 flex-col gap-3">
        <h3 class="text-label font-medium">Targets</h3>
        <p x-show="! hasTargets" class="text-body-sm text-muted-foreground">Pick at least one account to see how the post fits.</p>
        <template x-for="t in targets" :key="t.platform">
            <div data-slot="social-target" x-bind:data-platform="t.platform" x-bind:data-level="t.level" 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-2"><h4 data-slot="card-title" class="text-foreground flex items-center gap-2 text-body font-medium"><span x-text="t.label"></span>
                        <span x-show="t.usesVariant" style="display: none" class="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-caption text-foreground" data-slot="badge" data-variant="outline">Custom</span></h4>
                    <span x-text="t.lengthText" x-bind:class="t.over ? 'text-nq-danger-text' : 'text-muted-foreground'" class="text-body-sm tabular-nums"></span></div>
                <div data-slot="card-content" class="px-4 flex flex-col gap-2"><div data-slot="progress" role="progressbar" x-bind:data-tone="t.tone" x-bind:aria-label="t.counterLabel" aria-valuemin="0" aria-valuemax="100" x-bind:aria-valuenow="Math.round(t.percent)" class="flex w-full flex-col gap-1.5">
                        <div data-slot="progress-track" class="relative block h-1 w-full overflow-hidden rounded-full bg-nq-surface-soft">
                            <div data-slot="progress-indicator" x-bind:style="'inset-inline-start:0;width:' + t.percent + '%'"
                                x-bind:class="{ 'bg-primary': t.tone === 'default', 'bg-nq-warning': t.tone === 'warning', 'bg-nq-danger': t.tone === 'danger' }"
                                class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none"></div>
                        </div>
                    </div>
                    <p x-text="t.remainingText" x-bind:class="t.over ? 'text-nq-danger-text' : 'text-muted-foreground'" class="text-caption"></p>
                    <template x-if="t.custom">
                        <textarea data-slot="textarea"
                rows="4" x-bind:aria-label="t.customLabel" x-bind:value="t.variant" x-on:input="setVariant(t.platform, $event.target.value)" 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>
                    </template>
                    <template x-if="! t.custom">
                        <p class="line-clamp-4 whitespace-pre-wrap rounded-control bg-nq-surface-soft p-2 text-body-sm" aria-label="Preview" x-text="t.text || labels.placeholder"></p>
                    </template>
                    <ul x-show="t.problems.length" style="display: none" class="flex flex-col gap-0.5 text-caption text-nq-danger-text">
                        <template x-for="p in t.problems" :key="p"><li x-text="p"></li></template>
                    </ul>
                    <button data-slot="button"
     type="button"                         x-on:click="toggleCustom(t.platform)" 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 underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto self-start px-0">
        <span x-text="t.linkLabel"></span></button></div></div>
        </template>
    </section>
</div>
    <div data-slot="social-metrics" class="flex w-full min-w-0 flex-col gap-3">
            <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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Published posts</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
            <div data-slot="stat-card"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Impressions</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">12K</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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Engagements</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">385</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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Engagement rate</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">
                                            3.1%
                                    </div>
                            </div>
                    </div>
    </div></div>
        <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022p1\u0022,\u0022platformLabel\u0022:\u0022X\u0022,\u0022account\u0022:\u0022@nasaq\u0022,\u0022text\u0022:\u0022Nasaq 1.0 is out.\u0022,\u0022platformSearch\u0022:\u0022X @nasaq Nasaq 1.0 is out.\u0022,\u0022status\u0022:\u0022published\u0022,\u0022publishedAt\u0022:\u00222026-09-20\u0022,\u0022impressions\u0022:12400,\u0022impressionsText\u0022:\u002212,400\u0022,\u0022engagements\u0022:385,\u0022engagementsText\u0022:\u0022385\u0022,\u0022rate\u0022:0.031048387096774193,\u0022rateText\u0022:\u00223.1%\u0022,\u0022label\u0022:\u0022X Nasaq 1.0 is out.\u0022},{\u0022id\u0022:\u0022p2\u0022,\u0022platformLabel\u0022:\u0022LinkedIn\u0022,\u0022account\u0022:\u0022Nasaq Studio\u0022,\u0022text\u0022:\u0022Launch week recap.\u0022,\u0022platformSearch\u0022:\u0022LinkedIn Nasaq Studio Launch week recap.\u0022,\u0022status\u0022:\u0022queued\u0022,\u0022publishedAt\u0022:null,\u0022impressions\u0022:null,\u0022impressionsText\u0022:\u0022\\u2014\u0022,\u0022engagements\u0022:null,\u0022engagementsText\u0022:\u0022\\u2014\u0022,\u0022rate\u0022:null,\u0022rateText\u0022:\u0022\\u2014\u0022,\u0022label\u0022:\u0022LinkedIn Launch week recap.\u0022}]'), JSON.parse('[{\u0022id\u0022:\u0022platform\u0022,\u0022header\u0022:\u0022Platform\u0022,\u0022key\u0022:\u0022platformLabel\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022post\u0022,\u0022header\u0022:\u0022Post\u0022,\u0022key\u0022:\u0022text\u0022,\u0022searchable\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022sortable\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022draft\u0022,\u0022label\u0022:\u0022Draft\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022queued\u0022,\u0022label\u0022:\u0022Queued\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022published\u0022,\u0022label\u0022:\u0022Published\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022failed\u0022,\u0022label\u0022:\u0022Failed\u0022,\u0022tone\u0022:\u0022danger\u0022}]},{\u0022id\u0022:\u0022published\u0022,\u0022header\u0022:\u0022Published\u0022,\u0022key\u0022:\u0022publishedAt\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022impressions\u0022,\u0022header\u0022:\u0022Impressions\u0022,\u0022key\u0022:\u0022impressionsText\u0022,\u0022sortKey\u0022:\u0022impressions\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022engagements\u0022,\u0022header\u0022:\u0022Engagements\u0022,\u0022key\u0022:\u0022engagementsText\u0022,\u0022sortKey\u0022:\u0022engagements\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022rate\u0022,\u0022header\u0022:\u0022Engagement rate\u0022,\u0022key\u0022:\u0022rateText\u0022,\u0022sortKey\u0022:\u0022rate\u0022,\u0022sortable\u0022:true,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022open\u0022}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    class="flex min-w-0 flex-col gap-3">
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Post metrics"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Post metrics"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 1) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="platform" x-show="shown['platform']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('platform')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('platform', $event.shiftKey)"
                                    x-bind:class="sortOf('platform') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Platform</span>
                                    <svg aria-hidden="true" x-show="! sortOf('platform')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('platform') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('platform') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="post" x-show="shown['post']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Post
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('status')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('status', $event.shiftKey)"
                                    x-bind:class="sortOf('status') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Status</span>
                                    <svg aria-hidden="true" x-show="! sortOf('status')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="published" x-show="shown['published']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('published')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('published', $event.shiftKey)"
                                    x-bind:class="sortOf('published') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Published</span>
                                    <svg aria-hidden="true" x-show="! sortOf('published')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('published') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('published') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="impressions" x-show="shown['impressions']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('impressions')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('impressions', $event.shiftKey)"
                                    x-bind:class="sortOf('impressions') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Impressions</span>
                                    <svg aria-hidden="true" x-show="! sortOf('impressions')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('impressions') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('impressions') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="engagements" x-show="shown['engagements']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('engagements')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('engagements', $event.shiftKey)"
                                    x-bind:class="sortOf('engagements') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Engagements</span>
                                    <svg aria-hidden="true" x-show="! sortOf('engagements')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('engagements') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('engagements') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="rate" x-show="shown['rate']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('rate')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('rate', $event.shiftKey)"
                                    x-bind:class="sortOf('rate') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus flex-row-reverse">
                                    <span >Engagement rate</span>
                                    <svg aria-hidden="true" x-show="! sortOf('rate')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('rate') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('rate') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                No posts yet.                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="platform" x-show="shown['platform']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <div class="flex min-w-0 flex-col">
                <span class="font-medium" x-text="row.platformLabel"></span>
                <bdi class="truncate text-caption text-muted-foreground" x-show="row.account" x-text="row.account"></bdi>
            </div>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="post" x-show="shown['post']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;post&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="published" x-show="shown['published']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;published&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="impressions" x-show="shown['impressions']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;impressions&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="engagements" x-show="shown['engagements']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;engagements&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="rate" x-show="shown['rate']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;rate&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
</div>
</div>
```