# NotificationPreferences

> The notification settings screen. A matrix of kinds by channel (email, push, WhatsApp, desktop), quiet hours, a daily cap with batching, a digest schedule and extra email or webhook destinations with a test send. Every change saves at once and rolls back if it fails.

Source: https://docs.nasaqui.com/components/notification-preferences

## Install

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

Where a person decides what reaches them and how. Each row is a kind of notification, each column a channel;
below are quiet hours, a daily limit, a digest and extra destinations. There is no Save button: each change is
applied on screen at once and sent to you, and if your save fails the screen goes back to the last saved state.

## When to use

- The "Notifications" page of account settings (it fills the section body of `AccountSettings`).

## When not to use

- Showing the notifications themselves: use `NotificationCenter`.

## Import

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

## Quick start

```tsx
<NotificationPreferences
  kinds={[
    { id: "mention", label: "Mentions", group: "Activity" },
    { id: "security", label: "Security alerts", group: "Account", locked: ["email"] },
  ]}
  value={prefs}
  onChange={(next) => api.savePrefs(next)}
  pushPermission={permission}
  onRequestPush={requestPermission}
  unavailable={{ whatsapp: "Add a WhatsApp number first" }}
  destinations={destinations}
  onAddDestination={({ kind, target }) => api.addDestination(kind, target)}
  onTestDestination={(d) => api.testDestination(d.id)}
/>
```

## Anatomy

```
NotificationPreferences        data-slot="notification-preferences"
├─ status                         "Saving" / "Saved", polite live region
├─ Alert                          rollback, push blocked
├─ matrix                         data-slot="notification-matrix": a table, header checkbox per channel
├─ quiet hours                    switch, from and until (TimePicker), summary
├─ volume                         daily cap switch and number, delivery (instant, hourly, daily)
├─ digest                         switch, frequency, day, time, next send
└─ destinations                   data-slot="notification-destinations": list, test, remove, add form
```

## API

| Prop | Type | Description |
| --- | --- | --- |
| `kinds` | `NotificationKind[]` | `{ id, label, description?, group?, locked? }`. `locked` channels are fixed on. |
| `channels` | `NotificationChannel[]` | Columns to show. Default all four. |
| `unavailable` | `{ [channel]: reason }` | Locks a column and shows why. |
| `value` | `NotificationPrefs` | `{ matrix, quietHours, dailyCap, batching, digest }`. |
| `onChange` | `(next) => Promise<void \| { error? }>` | Saves. Saves run one after another; a failure rolls the screen back. |
| `pushPermission`, `onRequestPush` | | Turning push on asks the browser first; a refusal changes nothing. |
| `destinations`, `onAddDestination`, `onRemoveDestination`, `onTestDestination` | | Extra email or webhook destinations. |
| `sections` | array | Show only some sections. |
| `labels` | `NotificationPreferencesLabels` | English and Arabic built in. |

Pure helpers: `setCell`, `setChannel`, `channelState`, `isQuietNow` (windows can cross midnight), `nextDigest`.

## Accessibility

The matrix is a real table with row and column headers; every checkbox is named "kind: channel". Saving state is
a polite status. Locked cells say why in a tooltip and are disabled.

## RTL & i18n

Built-in English and Arabic. Webhook URLs and emails are left-to-right; the digest date follows the locale.

## Styling & tokens

Built on `SettingsSection`, `Checkbox`, `Switch`, `Select` and `TimePicker`.

## Do / Don't

- Do apply the same rules on the server (locked channels, quiet hours).
- Do not offer a channel you cannot deliver on; pass it in `unavailable` with the reason.

## Related

- [NotificationCenter](https://docs.nasaqui.com/components/notification-center)
- [DesktopNotification](https://docs.nasaqui.com/components/desktop-notification)
- [AccountSettings](https://docs.nasaqui.com/components/account-settings)

## Lab

https://docs.nasaqui.com/?path=/docs/components-account-notification-preferences--docs

## Code

### React

```tsx
<NotificationPreferences
  kinds={[
    { id: "mention", label: "Mentions", group: "Activity" },
    { id: "security", label: "Security alerts", group: "Account", locked: ["email"] },
  ]}
  value={prefs}
  onChange={(next) => api.savePrefs(next)}
  pushPermission={permission}
  onRequestPush={requestPermission}
  unavailable={{ whatsapp: "Add a WhatsApp number first" }}
  destinations={destinations}
  onAddDestination={({ kind, target }) => api.addDestination(kind, target)}
  onTestDestination={(d) => api.testDestination(d.id)}
/>
```

### shadcn

```tsx
<NotificationPreferences
  kinds={[
    { id: "mention", label: "Mentions", group: "Activity" },
    { id: "security", label: "Security alerts", group: "Account", locked: ["email"] },
  ]}
  value={prefs}
  onChange={(next) => api.savePrefs(next)}
  pushPermission={permission}
  onRequestPush={requestPermission}
  unavailable={{ whatsapp: "Add a WhatsApp number first" }}
  destinations={destinations}
  onAddDestination={({ kind, target }) => api.addDestination(kind, target)}
  onTestDestination={(d) => api.testDestination(d.id)}
/>
```

### Vue

```vue
<script setup lang="ts">
import { DEFAULT_PREFS, NqNotificationPreferences, type NotificationDestination, type NotificationKind, type NotificationPrefs } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const kinds: NotificationKind[] = [
  { id: "mention", label: "Mentions", description: "Someone mentions you.", group: "Activity" },
  { id: "comment", label: "Comments", description: "Replies to your comments.", group: "Activity" },
  { id: "security", label: "Security alerts", description: "Sign-ins and password changes.", group: "Account", locked: ["email"] },
  { id: "billing", label: "Billing", group: "Account" },
];

const prefs = ref<NotificationPrefs>({
  ...DEFAULT_PREFS,
  matrix: { mention: { email: true, push: true }, comment: { email: true }, billing: { email: true } },
  quietHours: { enabled: true, from: "22:00", to: "07:00" },
  dailyCap: 20,
  digest: { enabled: true, frequency: "weekly", time: "08:00", day: 1 },
});
const destinations = ref<NotificationDestination[]>([
  { id: "d1", kind: "email", target: "team@example.com", verified: true },
  { id: "d2", kind: "webhook", target: "https://hooks.example.com/nasaq" },
]);
// A fixed clock keeps the "Next digest" line stable.
const now = new Date(2026, 8, 29, 9, 0, 0);

async function save(next: NotificationPrefs) {
  prefs.value = next;
}
async function add({ kind, target }: { kind: "email" | "webhook"; target: string }) {
  destinations.value = [...destinations.value, { id: `d${destinations.value.length + 1}`, kind, target }];
}
async function remove(d: NotificationDestination) {
  destinations.value = destinations.value.filter((x) => x.id !== d.id);
}
async function test() {
  return { ok: true };
}
async function requestPush() {
  return "granted" as const;
}
</script>

<template>
  <NqNotificationPreferences
    :kinds="kinds"
    :value="prefs"
    :on-change="save"
    :now="now"
    push-permission="default"
    :on-request-push="requestPush"
    :unavailable="{ whatsapp: 'Add a WhatsApp number first' }"
    :destinations="destinations"
    :on-add-destination="add"
    :on-remove-destination="remove"
    :on-test-destination="test"
  />
</template>
```

### Blade

```blade
@php
    $kinds = [
        ['id' => 'mention', 'label' => 'Mentions', 'description' => 'Someone mentions you.', 'group' => 'Activity'],
        ['id' => 'comment', 'label' => 'Comments', 'description' => 'Replies to your comments.', 'group' => 'Activity'],
        ['id' => 'security', 'label' => 'Security alerts', 'description' => 'Sign-ins and password changes.', 'group' => 'Account', 'locked' => ['email']],
        ['id' => 'billing', 'label' => 'Billing', 'group' => 'Account'],
    ];
    $value = [
        'matrix' => ['mention' => ['email' => true, 'push' => true], 'comment' => ['email' => true], 'billing' => ['email' => true]],
        'quietHours' => ['enabled' => true, 'from' => '22:00', 'to' => '07:00'],
        'dailyCap' => 20,
        'digest' => ['enabled' => true, 'frequency' => 'weekly', 'time' => '08:00', 'day' => 1],
    ];
    $destinations = [
        ['id' => 'd1', 'kind' => 'email', 'target' => 'team@example.com', 'verified' => true],
        ['id' => 'd2', 'kind' => 'webhook', 'target' => 'https://hooks.example.com/nasaq'],
    ];
@endphp
<x-nq::notification-preferences :kinds="$kinds" :value="$value" now="2026-09-29T09:00:00" push-permission="default" request-push
    :unavailable="['whatsapp' => 'Add a WhatsApp number first']" :destinations="$destinations" can-add can-remove can-test />
```

### HTML + Alpine

```html
<div data-slot="notification-preferences" x-data="nqNotificationPreferences(JSON.parse('{\u0022locale\u0022:\u0022en\u0022,\u0022now\u0022:\u00222026-09-29T09:00:00\u0022,\u0022kinds\u0022:[{\u0022id\u0022:\u0022mention\u0022,\u0022locked\u0022:[]},{\u0022id\u0022:\u0022comment\u0022,\u0022locked\u0022:[]},{\u0022id\u0022:\u0022security\u0022,\u0022locked\u0022:[\u0022email\u0022]},{\u0022id\u0022:\u0022billing\u0022,\u0022locked\u0022:[]}],\u0022channels\u0022:[\u0022email\u0022,\u0022push\u0022,\u0022whatsapp\u0022,\u0022desktop\u0022],\u0022value\u0022:{\u0022matrix\u0022:{\u0022mention\u0022:{\u0022email\u0022:true,\u0022push\u0022:true},\u0022comment\u0022:{\u0022email\u0022:true},\u0022billing\u0022:{\u0022email\u0022:true}},\u0022quietHours\u0022:{\u0022enabled\u0022:true,\u0022from\u0022:\u002222:00\u0022,\u0022to\u0022:\u002207:00\u0022},\u0022dailyCap\u0022:20,\u0022batching\u0022:\u0022instant\u0022,\u0022digest\u0022:{\u0022enabled\u0022:true,\u0022frequency\u0022:\u0022weekly\u0022,\u0022time\u0022:\u002208:00\u0022,\u0022day\u0022:1}},\u0022needsAsk\u0022:true,\u0022labels\u0022:{\u0022matrixTitle\u0022:\u0022What to notify me about\u0022,\u0022matrixBody\u0022:\u0022Choose where each kind of notification reaches you.\u0022,\u0022matrixLabel\u0022:\u0022Notifications by kind and channel\u0022,\u0022kind\u0022:\u0022Notification\u0022,\u0022channels\u0022:{\u0022email\u0022:\u0022Email\u0022,\u0022push\u0022:\u0022Push\u0022,\u0022whatsapp\u0022:\u0022WhatsApp\u0022,\u0022desktop\u0022:\u0022Desktop\u0022},\u0022cell\u0022:\u0022{x}: {y}\u0022,\u0022all\u0022:\u0022Turn {x} on or off for every kind\u0022,\u0022locked\u0022:\u0022Always on, it cannot be turned off\u0022,\u0022unavailable\u0022:\u0022Not available\u0022,\u0022pushAsking\u0022:\u0022Waiting for your browser to answer\u0022,\u0022pushBlocked\u0022:\u0022Browser notifications are blocked. Allow them in your browser\\u0027s site settings, then try again.\u0022,\u0022pushDenied\u0022:\u0022Push was not turned on because the browser permission was not granted.\u0022,\u0022pushUnsupported\u0022:\u0022This browser does not support push notifications.\u0022,\u0022pushNeeded\u0022:\u0022The browser will ask for permission the first time you turn push on.\u0022,\u0022saving\u0022:\u0022Saving\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022failed\u0022:\u0022That did not save, so it was put back. Try again.\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022quietTitle\u0022:\u0022Quiet hours\u0022,\u0022quietBody\u0022:\u0022Hold notifications while you are away. They arrive when the quiet hours end.\u0022,\u0022quietSwitch\u0022:\u0022Turn on quiet hours\u0022,\u0022from\u0022:\u0022From\u0022,\u0022to\u0022:\u0022Until\u0022,\u0022quietLength\u0022:\u0022{x} quiet each day\u0022,\u0022quietOvernight\u0022:\u0022Ends the next day\u0022,\u0022quietNone\u0022:\u0022Start and end are the same, so nothing is held.\u0022,\u0022quietUrgent\u0022:\u0022Security notices always come through.\u0022,\u0022limitsTitle\u0022:\u0022Volume\u0022,\u0022limitsBody\u0022:\u0022Keep the number of notifications under control.\u0022,\u0022capSwitch\u0022:\u0022Limit notifications per day\u0022,\u0022capLabel\u0022:\u0022Most per day\u0022,\u0022capHelp\u0022:\u0022Beyond this, the rest wait for your digest.\u0022,\u0022capError\u0022:\u0022Enter a whole number from 1 to 1,000.\u0022,\u0022batching\u0022:\u0022Delivery\u0022,\u0022batchingOptions\u0022:{\u0022instant\u0022:\u0022Send each one at once\u0022,\u0022hourly\u0022:\u0022Group them every hour\u0022,\u0022daily\u0022:\u0022Group them once a day\u0022},\u0022digestTitle\u0022:\u0022Digest\u0022,\u0022digestBody\u0022:\u0022One summary of what you missed.\u0022,\u0022digestSwitch\u0022:\u0022Send me a digest\u0022,\u0022frequency\u0022:\u0022How often\u0022,\u0022daily\u0022:\u0022Every day\u0022,\u0022weekly\u0022:\u0022Every week\u0022,\u0022day\u0022:\u0022Day\u0022,\u0022at\u0022:\u0022Time\u0022,\u0022weekdays\u0022:[\u0022Sunday\u0022,\u0022Monday\u0022,\u0022Tuesday\u0022,\u0022Wednesday\u0022,\u0022Thursday\u0022,\u0022Friday\u0022,\u0022Saturday\u0022],\u0022nextDigest\u0022:\u0022Next digest\u0022,\u0022destTitle\u0022:\u0022Delivery destinations\u0022,\u0022destBody\u0022:\u0022Send notifications to an extra email address or a webhook.\u0022,\u0022destEmpty\u0022:\u0022No extra destinations yet.\u0022,\u0022destKind\u0022:\u0022Type\u0022,\u0022destTarget\u0022:\u0022Address\u0022,\u0022destEmail\u0022:\u0022Email\u0022,\u0022destWebhook\u0022:\u0022Webhook\u0022,\u0022destEmailPlaceholder\u0022:\u0022team@example.com\u0022,\u0022destWebhookPlaceholder\u0022:\u0022https:\\\/\\\/hooks.example.com\\\/nasaq\u0022,\u0022add\u0022:\u0022Add destination\u0022,\u0022remove\u0022:\u0022Remove\u0022,\u0022removeTitle\u0022:\u0022Remove {x}?\u0022,\u0022removeBody\u0022:\u0022Notifications stop going there right away.\u0022,\u0022verified\u0022:\u0022Verified\u0022,\u0022pending\u0022:\u0022Waiting for confirmation\u0022,\u0022test\u0022:\u0022Send a test\u0022,\u0022testing\u0022:\u0022Sending\u0022,\u0022testOk\u0022:\u0022The test was delivered.\u0022,\u0022testFailed\u0022:\u0022The test failed.\u0022,\u0022problem\u0022:{\u0022empty\u0022:\u0022Enter an address.\u0022,\u0022email\u0022:\u0022Enter a valid email address.\u0022,\u0022url\u0022:\u0022Enter a valid URL.\u0022,\u0022https\u0022:\u0022Webhooks must use https.\u0022},\u0022destFailed\u0022:\u0022That destination could not be changed. Try again.\u0022},\u0022destinations\u0022:[{\u0022id\u0022:\u0022d1\u0022,\u0022kind\u0022:\u0022email\u0022,\u0022target\u0022:\u0022team@example.com\u0022},{\u0022id\u0022:\u0022d2\u0022,\u0022kind\u0022:\u0022webhook\u0022,\u0022target\u0022:\u0022https:\\\/\\\/hooks.example.com\\\/nasaq\u0022}]}'))"
    class="flex flex-col gap-6">
    <div role="status" aria-live="polite" class="-mb-3 h-4 text-end text-caption text-muted-foreground" x-text="status"></div>
    <template x-if="notice !== null">
        <div data-slot="alert" data-tone="info" role="status"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-bind:tone="notice.tone" x-on:nq:dismiss="notice = null" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-info/30 bg-nq-info-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 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>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="notice.text"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
    </template>
            <div role="region" aria-labelledby="nq-settings-section-bca43999-title" data-slot="settings-section" data-tone="default"
    class="flex flex-col rounded-card border border-border bg-card py-4 text-card-foreground gap-5">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" id="nq-settings-section-bca43999-title" class="text-foreground text-h3">What to notify me about</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Choose where each kind of notification reaches you.</div></div>
    <div data-slot="card-content" class="px-4"><div class="overflow-x-auto">
                <table data-slot="notification-matrix" aria-label="Notifications by kind and channel" class="w-full min-w-[30rem] border-collapse text-body-sm">
                    <thead>
                        <tr class="border-b border-border">
                            <th scope="col" class="py-2 pe-3 text-start text-caption font-medium text-muted-foreground">Notification</th>
                                                                                                                            <th scope="col" class="w-24 px-2 py-2 text-center align-bottom font-medium">
                                    <span class="flex flex-col items-center gap-1.5">
                                        <span class="text-label text-foreground">Email</span>
                                                                                    <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="colOn.email" x-effect="indeterminate = colSome.email" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Turn Email on or off for every kind" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                            </span>
                                </th>
                                                                                                                            <th scope="col" class="w-24 px-2 py-2 text-center align-bottom font-medium">
                                    <span class="flex flex-col items-center gap-1.5">
                                        <span class="text-label text-foreground">Push</span>
                                                                                    <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, true)" x-modelable="checked" x-bind="root"
    aria-checked="mixed"
     data-indeterminate                 x-model="colOn.push" x-effect="indeterminate = colSome.push" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Turn Push on or off for every kind" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                            </span>
                                </th>
                                                                                                                            <th scope="col" class="w-24 px-2 py-2 text-center align-bottom font-medium">
                                    <span class="flex flex-col items-center gap-1.5">
                                        <span class="text-label text-foreground">WhatsApp</span>
                                                                                    <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked              disabled data-disabled     x-model="colOn.whatsapp" x-effect="indeterminate = colSome.whatsapp" aria-label="Turn WhatsApp on or off for every kind" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                            <span class="text-caption font-normal text-muted-foreground">Add a WhatsApp number first</span>
                                                                            </span>
                                </th>
                                                                                                                            <th scope="col" class="w-24 px-2 py-2 text-center align-bottom font-medium">
                                    <span class="flex flex-col items-center gap-1.5">
                                        <span class="text-label text-foreground">Desktop</span>
                                                                                    <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="colOn.desktop" x-effect="indeterminate = colSome.desktop" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Turn Desktop on or off for every kind" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                            </span>
                                </th>
                                                    </tr>
                    </thead>
                    <tbody>
                                                                                    <tr>
                                    <th scope="colgroup" colspan="5" class="pb-1 pt-4 text-start text-caption font-medium uppercase tracking-wide text-muted-foreground">Activity</th>
                                </tr>
                                                        <tr class="border-b border-border last:border-b-0">
                                <th scope="row" class="py-3 pe-3 text-start font-normal">
                                    <span class="block text-label text-foreground">Mentions</span>
                                    <span class="block text-caption text-muted-foreground">Someone mentions you.</span>                                </th>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="cells[&#039;0|email&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Mentions: Email" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="cells[&#039;0|push&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Mentions: Push" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center"  title="Add a WhatsApp number first" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked              disabled data-disabled     x-model="cells[&#039;0|whatsapp&#039;]" aria-label="Mentions: WhatsApp" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;0|desktop&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Mentions: Desktop" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                            </tr>
                                                                                <tr class="border-b border-border last:border-b-0">
                                <th scope="row" class="py-3 pe-3 text-start font-normal">
                                    <span class="block text-label text-foreground">Comments</span>
                                    <span class="block text-caption text-muted-foreground">Replies to your comments.</span>                                </th>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="cells[&#039;1|email&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Comments: Email" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;1|push&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Comments: Push" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center"  title="Add a WhatsApp number first" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked              disabled data-disabled     x-model="cells[&#039;1|whatsapp&#039;]" aria-label="Comments: WhatsApp" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;1|desktop&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Comments: Desktop" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                            </tr>
                                                                                    <tr>
                                    <th scope="colgroup" colspan="5" class="pb-1 pt-4 text-start text-caption font-medium uppercase tracking-wide text-muted-foreground">Account</th>
                                </tr>
                                                        <tr class="border-b border-border last:border-b-0">
                                <th scope="row" class="py-3 pe-3 text-start font-normal">
                                    <span class="block text-label text-foreground">Security alerts</span>
                                    <span class="block text-caption text-muted-foreground">Sign-ins and password changes.</span>                                </th>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center"  title="Always on, it cannot be turned off" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked              disabled data-disabled     x-model="cells[&#039;2|email&#039;]" aria-label="Security alerts: Email" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                        <svg aria-hidden="true" class="ms-1 size-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>                                        </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;2|push&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Security alerts: Push" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center"  title="Add a WhatsApp number first" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked              disabled data-disabled     x-model="cells[&#039;2|whatsapp&#039;]" aria-label="Security alerts: WhatsApp" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;2|desktop&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Security alerts: Desktop" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                            </tr>
                                                                                <tr class="border-b border-border last:border-b-0">
                                <th scope="row" class="py-3 pe-3 text-start font-normal">
                                    <span class="block text-label text-foreground">Billing</span>
                                                                    </th>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="cells[&#039;3|email&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Billing: Email" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;3|push&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Billing: Push" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center"  title="Add a WhatsApp number first" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked              disabled data-disabled     x-model="cells[&#039;3|whatsapp&#039;]" aria-label="Billing: WhatsApp" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                                                                                                            <td class="px-2 py-3 text-center">
                                        <span class="inline-flex items-center justify-center" >
                                                                                            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="cells[&#039;3|desktop&#039;]" x-bind:disabled="asking" x-bind:data-disabled="asking ? &#039;&#039; : undefined" aria-label="Billing: Desktop" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
                                                                                                                                </span>
                                    </td>
                                                            </tr>
                                            </tbody>
                </table>
            </div>
                            <p class="mt-3 text-caption text-muted-foreground">The browser will ask for permission the first time you turn push on.</p></div>
    </div>
            <div role="region" aria-labelledby="nq-settings-section-1058bb4c-title" data-slot="settings-section" data-tone="default"
    class="flex flex-col rounded-card border border-border bg-card py-4 text-card-foreground gap-5">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" id="nq-settings-section-1058bb4c-title" class="text-foreground text-h3">Quiet hours</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Hold notifications while you are away. They arrive when the quiet hours end.</div></div>
    <div data-slot="card-content" class="px-4"><div class="flex flex-col gap-4">
                <label class="flex items-center justify-between gap-4">
                    <span class="flex items-center gap-2 text-label text-foreground">
                        <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="M18 5h4"/>
  <path d="M20 3v4"/>
  <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
</svg>                        Turn on quiet hours
                    </span>
                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(true)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="quietOn" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50">
    <span data-slot="switch-thumb"  data-checked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
                </label>
                <div class="flex flex-col gap-4" x-show="quietOn" >
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">From</label>
                            <div role="group" dir="ltr" lang="en" data-slot="time-picker" x-data="nqTimePicker(JSON.parse('{\u0022value\u0022:\u002222:00\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022hourCycle\u0022:12}'))" x-modelable="time"
    x-model="quietFrom" aria-label="From" 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" selected>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" selected>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" >AM</option>
            <option value="pm" selected>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>
</div>
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Until</label>
                            <div role="group" dir="ltr" lang="en" data-slot="time-picker" x-data="nqTimePicker(JSON.parse('{\u0022value\u0022:\u002207:00\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022hourCycle\u0022:12}'))" x-modelable="time"
    x-model="quietTo" aria-label="Until" 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" selected>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" selected>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>
</div>
                    </div>
                    <p class="text-body-sm text-muted-foreground" data-slot="quiet-summary" x-text="quietSummary">9 quiet each day. Ends the next day. Security notices always come through.</p>
                </div>
            </div></div>
    </div>
            <div role="region" aria-labelledby="nq-settings-section-7f8933e6-title" data-slot="settings-section" data-tone="default"
    class="flex flex-col rounded-card border border-border bg-card py-4 text-card-foreground gap-5">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" id="nq-settings-section-7f8933e6-title" class="text-foreground text-h3">Volume</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Keep the number of notifications under control.</div></div>
    <div data-slot="card-content" class="px-4"><div class="flex flex-col gap-4">
                <label class="flex items-center justify-between gap-4">
                    <span class="text-label text-foreground">Limit notifications per day</span>
                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(true)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="capOn" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50">
    <span data-slot="switch-thumb"  data-checked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
                </label>
                <div x-show="capOn" >
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="capInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Most per day</label>
                        <input data-slot="input" type="text"
     dir="ltr"                 inputmode="numeric" value="20" x-model="capText" x-on:blur="saveCap()" x-on:keydown.enter.prevent="saveCap()" class="min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start w-32">
                        <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span>Enter a whole number from 1 to 1,000.</span></div>
                        <p data-slot="field-description" x-show="! capInvalid" class="text-caption text-muted-foreground">Beyond this, the rest wait for your digest.</p>
</div>
                </div>
                <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Delivery</label>
                    <div data-slot="select" x-data="nqSelect('instant', false)" x-modelable="value" x-id="['nq-select']" x-model="batching" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="Delivery" class="flex h-control min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] w-full sm:w-72">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                        <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('instant', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('instant')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Send each one at once</span>
</div>
                                                            <div data-slot="select-item" x-bind="item('hourly', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('hourly')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Group them every hour</span>
</div>
                                                            <div data-slot="select-item" x-bind="item('daily', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('daily')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Group them once a day</span>
</div>
    </div>
</template>
    </div>
</div>
            </div></div>
    </div>
            <div role="region" aria-labelledby="nq-settings-section-59d27cd2-title" data-slot="settings-section" data-tone="default"
    class="flex flex-col rounded-card border border-border bg-card py-4 text-card-foreground gap-5">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" id="nq-settings-section-59d27cd2-title" class="text-foreground text-h3">Digest</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">One summary of what you missed.</div></div>
    <div data-slot="card-content" class="px-4"><div class="flex flex-col gap-4">
                <label class="flex items-center justify-between gap-4">
                    <span class="flex items-center gap-2 text-label text-foreground">
                        <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>                        Send me a digest
                    </span>
                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(true)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="digestOn" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50">
    <span data-slot="switch-thumb"  data-checked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
                </label>
                <div class="flex flex-col gap-4" x-show="digestOn" >
                    <div class="grid gap-4 sm:grid-cols-3">
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">How often</label>
                            <div data-slot="select" x-data="nqSelect('weekly', false)" x-modelable="value" x-id="['nq-select']" x-model="frequency" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="How often" class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                                <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('daily', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('daily')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Every day</span>
</div>
                                    <div data-slot="select-item" x-bind="item('weekly', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('weekly')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Every week</span>
</div>
    </div>
</template>
    </div>
</div>
                        <div x-show="frequency === 'weekly'" >
                            <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">Day</label>
                                <div data-slot="select" x-data="nqSelect('1', false)" x-modelable="value" x-id="['nq-select']" x-model="day" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="Day" class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                                    <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('0', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('0')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Sunday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('1', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('1')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Monday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('2', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('2')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Tuesday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('3', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('3')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Wednesday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('4', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('4')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Thursday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('5', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('5')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Friday</span>
</div>
                                                                                    <div data-slot="select-item" x-bind="item('6', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('6')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Saturday</span>
</div>
    </div>
</template>
    </div>
</div>
                        </div>
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Time</label>
                            <div role="group" dir="ltr" lang="en" data-slot="time-picker" x-data="nqTimePicker(JSON.parse('{\u0022value\u0022:\u002208:00\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022hourCycle\u0022:12}'))" x-modelable="time"
    x-model="digestTime" 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" selected>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" selected>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>
</div>
                    </div>
                    <p class="text-body-sm text-muted-foreground" x-show="nextIso !== ''" >
                        Next digest:
                        <time x-bind:datetime="nextIso" class="text-foreground" x-text="nextText"  datetime="2026-10-05T08:00:00+00:00" >Monday, Oct 5, 8:00 AM</time>
                    </p>
                </div>
            </div></div>
    </div>
            <div role="region" aria-labelledby="nq-settings-section-93292768-title" data-slot="settings-section" data-tone="default"
    class="flex flex-col rounded-card border border-border bg-card py-4 text-card-foreground gap-5">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" id="nq-settings-section-93292768-title" class="text-foreground text-h3">Delivery destinations</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Send notifications to an extra email address or a webhook.</div></div>
    <div data-slot="card-content" class="px-4"><div class="flex flex-col gap-4" data-slot="notification-destinations">
                <template x-if="destError !== null">
                    <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="destError = null" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="destError"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
                </template>
                                    <ul class="flex flex-col divide-y divide-border rounded-card border border-border" x-show="visibleCount > 0">
                                                    <li class="flex flex-wrap items-center gap-x-3 gap-y-2 px-3 py-2.5" x-show="! removed['d1']" data-destination="d1">
                                <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="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>                                <div class="flex min-w-0 flex-1 flex-col">
                                    <bdi dir="ltr" class="truncate text-body-sm text-foreground">team@example.com</bdi>
                                    <span class="text-caption text-muted-foreground">Email</span>
                                </div>
                                                                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Verified</span>
                                                                                                    <button data-slot="button"
     type="button"                         x-on:click="test(&#039;d1&#039;)" x-bind:disabled="testing !== null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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-text="testing === 'd1' ? labels.testing : labels.test">Send a test</span></button>
                                                                                                    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" class="contents">
    <button data-slot="alert-dialog-trigger"
     type="button"                         aria-haspopup="dialog" x-on:click="show()" :aria-expanded="open" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                        Remove</button>
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground">Remove team@example.com?</h2>
                            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground">Notifications stop going there right away.</p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
            <button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="remove(&#039;d1&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Remove</button></div>
        </div>
    </div>
</template>
</div>
                                                                <p role="status" class="basis-full text-caption" style="display: none" x-show="results['d1']" x-text="results['d1'] ? results['d1'].text : ''"
                                    x-bind:class="results['d1'] && results['d1'].ok ? 'text-nq-success-text' : 'text-nq-danger-text'"></p>
                            </li>
                                                    <li class="flex flex-wrap items-center gap-x-3 gap-y-2 px-3 py-2.5" x-show="! removed['d2']" data-destination="d2">
                                <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="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"/>
  <path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"/>
  <path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"/>
</svg>                                <div class="flex min-w-0 flex-1 flex-col">
                                    <bdi dir="ltr" class="truncate text-body-sm text-foreground">https://hooks.example.com/nasaq</bdi>
                                    <span class="text-caption text-muted-foreground">Webhook</span>
                                </div>
                                                                                                    <button data-slot="button"
     type="button"                         x-on:click="test(&#039;d2&#039;)" x-bind:disabled="testing !== null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="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-text="testing === 'd2' ? labels.testing : labels.test">Send a test</span></button>
                                                                                                    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" class="contents">
    <button data-slot="alert-dialog-trigger"
     type="button"                         aria-haspopup="dialog" x-on:click="show()" :aria-expanded="open" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                        Remove</button>
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground">Remove https://hooks.example.com/nasaq?</h2>
                            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground">Notifications stop going there right away.</p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
            <button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="remove(&#039;d2&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Remove</button></div>
        </div>
    </div>
</template>
</div>
                                                                <p role="status" class="basis-full text-caption" style="display: none" x-show="results['d2']" x-text="results['d2'] ? results['d2'].text : ''"
                                    x-bind:class="results['d2'] && results['d2'].ok ? 'text-nq-success-text' : 'text-nq-danger-text'"></p>
                            </li>
                                            </ul>
                    <p class="text-body-sm text-muted-foreground" x-show="visibleCount === 0" style="display: none">No extra destinations yet.</p>
                                                    <form novalidate class="flex flex-col gap-3 sm:flex-row sm:items-start" x-on:submit.prevent="addDestination()">
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5 sm:w-40">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Type</label>
                            <div data-slot="select" x-data="nqSelect('email', false)" x-modelable="value" x-id="['nq-select']" x-model="newKind" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        aria-label="Type" class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                                <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('email', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('email')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Email</span>
</div>
                                    <div data-slot="select-item" x-bind="item('webhook', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('webhook')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Webhook</span>
</div>
    </div>
</template>
    </div>
</div>
                        <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="targetBad" class="flex flex-col gap-1.5 flex-1">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Address</label>
                            <input data-slot="input" type="text"
     dir="ltr"                 autocapitalize="none" spellcheck="false" x-model="newTarget" x-bind:placeholder="newKind === &#039;email&#039; ? labels.destEmailPlaceholder : labels.destWebhookPlaceholder" placeholder="team@example.com" x-bind:disabled="adding" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
                            <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="targetError"></span></div>
</div>
                        <button data-slot="button"
     type="submit"                         x-bind:disabled="adding" 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)] sm:mt-6">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>                            Add destination</button>
                    </form>
                            </div></div>
    </div>
    </div>
```