# Server Admin

> Four admin panels for one server. A systemd service list with start, stop and restart, a package updates panel, an SSH key manager with a servers by keys matrix, and a job queue monitor with retry and forget.

Source: https://docs.nasaqui.com/components/server-admin

## Install

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

Panels for running one server. They have no backend: your callbacks do the work and you pass the updated data back.

- `ServiceUnitsList`: units with state, boot setting, memory and uptime. The row menu (also the context menu) offers only the actions that fit the state. Stop, restart and disable ask first.
- `PackageUpdatesPanel`: pending updates, security first, with Update selected, Update all, Check now and a restart banner.
- `SshKeyManager`: keys as rows and servers as columns. Tick a box to install or remove a key. Add key rejects private keys and unknown formats.
- `JobQueueMonitor`: status counts as filters, retry and forget for one or many jobs, and a dialog with the error and payload.

## When to use

- A server detail page in a hosting or ops console.

## When not to use

- Fleet-wide dashboards: use the server card and a table.

## Import

```tsx
import { ServiceUnitsList } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { ServiceUnitsList, type ServiceUnit } from "@fadymondy/nasaq/web";

declare const services: ServiceUnit[];
declare const api: { run(id: string, action: string): Promise<void> };

export function Services() {
  return <ServiceUnitsList services={services} onAction={(id, action) => api.run(id, action)} />;
}
```

## API

Every panel takes the `div` props of a Card (except `children` and `title`), a `loading` flag and a `labels` override.

| Component | Main props |
| --- | --- |
| `ServiceUnitsList` | `services` `{ id, name, description?, state, enabled, canReload?, memoryBytes?, since? }`, `onAction(id, action)`, `onViewLogs?(id)`, `error?`, `onRetry?` |
| `PackageUpdatesPanel` | `packages` `{ name, currentVersion, newVersion, kind, sizeBytes? }`, `lastCheckedAt?`, `rebootRequired?`, `updating?` (names), `checking?`, `onCheck`, `onUpdate(names)`, `onReboot?` |
| `SshKeyManager` | `servers` `{ id, name }`, `keys` `{ id, name, type, fingerprint, comment?, addedAt?, lastUsedAt?, installedOn }`, `onInstallChange(keyId, serverId, installed)`, `onAdd({ name, publicKey })`, `onRemove(id)` |
| `JobQueueMonitor` | `jobs` `{ id, name, queue, status, attempts, maxAttempts?, at, error?, payload? }`, `onRetry(ids)`, `onForget(ids)`, `error?`, `onRetryLoad?` |

Callbacks return `Promise<void | { error?: string }>`. Return `{ error }` to show a failure in the panel.

## Accessibility

Dialogs trap focus; disruptive actions use an alert dialog. Matrix checkboxes are labelled with the key and server names.

## RTL and languages

English and Arabic strings, overridable through `labels`. Unit names, fingerprints, versions, IDs and payloads stay left to right.

## Code

### React

```tsx
import { ServiceUnitsList, type ServiceUnit } from "@fadymondy/nasaq/web";

declare const services: ServiceUnit[];
declare const api: { run(id: string, action: string): Promise<void> };

export function Services() {
  return <ServiceUnitsList services={services} onAction={(id, action) => api.run(id, action)} />;
}
```

### shadcn

```tsx
import { ServiceUnitsList, type ServiceUnit } from "@/components/ui/server-admin";

declare const services: ServiceUnit[];
declare const api: { run(id: string, action: string): Promise<void> };

export function Services() {
  return <ServiceUnitsList services={services} onAction={(id, action) => api.run(id, action)} />;
}
```

### Vue

```vue
<script setup lang="ts">
import { NqServiceUnitsList, type ServiceAction, type ServiceUnit } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const t = Date.now();
const services = ref<ServiceUnit[]>([
  { id: "nginx", name: "nginx.service", description: "A high performance web server", state: "active", enabled: true, memoryBytes: 48_200_000, since: t - 3 * 86_400_000 },
  { id: "postgresql", name: "postgresql.service", description: "PostgreSQL database server", state: "active", enabled: true, memoryBytes: 312_000_000, since: t - 9 * 86_400_000 },
  { id: "redis", name: "redis-server.service", description: "Advanced key-value store", state: "failed", enabled: true, since: t - 3_600_000 },
  { id: "cron", name: "cron.service", state: "inactive", enabled: false },
]);

const onAction = async (id: string, action: ServiceAction) => {
  const state = { start: "active", restart: "active", stop: "inactive" } as const;
  services.value = services.value.map((s) => {
    if (s.id !== id) return s;
    if (action === "enable" || action === "disable") return { ...s, enabled: action === "enable" };
    return action in state ? { ...s, state: state[action as keyof typeof state], since: Date.now() } : s;
  });
};
</script>

<template>
  <NqServiceUnitsList :services="services" :on-action="onAction" />
</template>
```

### Blade

```blade
@php
    $services = [
        ['id' => 'nginx', 'name' => 'nginx.service', 'description' => 'A high performance web server', 'state' => 'active', 'enabled' => true, 'memoryBytes' => 48234496, 'since' => '3 days ago'],
        ['id' => 'redis', 'name' => 'redis-server.service', 'description' => 'Advanced key-value store', 'state' => 'inactive', 'enabled' => false, 'since' => '1 hour ago'],
        ['id' => 'worker', 'name' => 'queue-worker.service', 'description' => 'Background job worker', 'state' => 'failed', 'enabled' => true, 'since' => '5 minutes ago'],
    ];
    $packages = [
        ['name' => 'openssl', 'currentVersion' => '3.0.2', 'newVersion' => '3.0.13', 'kind' => 'security', 'sizeBytes' => 1200000],
        ['name' => 'linux-image-generic', 'currentVersion' => '5.15.0', 'newVersion' => '5.15.1', 'kind' => 'kernel', 'sizeBytes' => 9400000],
        ['name' => 'curl', 'currentVersion' => '7.81.0', 'newVersion' => '7.81.1', 'kind' => 'regular', 'sizeBytes' => 300000],
    ];
    $servers = [['id' => 'web1', 'name' => 'web-1'], ['id' => 'web2', 'name' => 'web-2']];
    $keys = [
        ['id' => 'k1', 'name' => 'Laptop', 'type' => 'ssh-ed25519', 'fingerprint' => 'SHA256:abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG', 'comment' => 'fady@laptop', 'addedAt' => 'Jan 5', 'lastUsedAt' => 'Today', 'installedOn' => ['web1']],
        ['id' => 'k2', 'name' => 'CI', 'type' => 'ssh-rsa', 'fingerprint' => 'SHA256:zyxwvutsrqponmlkjihgfedcba9876543210ZYXWVUT', 'addedAt' => 'Feb 1', 'installedOn' => ['web1', 'web2']],
    ];
    $jobs = [
        ['id' => 'j1', 'name' => 'SendInvoice', 'queue' => 'mail', 'status' => 'failed', 'attempts' => 3, 'maxAttempts' => 3, 'at' => '2 min ago', 'error' => "SMTP timeout\n  at send (mail.ts:12)", 'payload' => '{"invoice":42}'],
        ['id' => 'j2', 'name' => 'ResizeImage', 'queue' => 'media', 'status' => 'active', 'attempts' => 1, 'at' => 'now'],
        ['id' => 'j3', 'name' => 'Backup', 'queue' => 'media', 'status' => 'waiting', 'attempts' => 0, 'at' => 'in 1 min'],
    ];
@endphp
<div class="flex flex-col gap-6">
    <x-nq::server-admin.service-units-list :services="$services"
        x-on:action="$event.detail.wait(Promise.resolve())" x-on:view-logs="$event.detail.wait(Promise.resolve())" />
    <x-nq::server-admin.package-updates-panel :packages="$packages" reboot-required last-checked="2 hours ago"
        x-on:check="$event.detail.wait(Promise.resolve())" x-on:update="$event.detail.wait(Promise.resolve())" x-on:reboot="$event.detail.wait(Promise.resolve())" />
    <x-nq::server-admin.ssh-key-manager :servers="$servers" :keys="$keys"
        x-on:install-change="$event.detail.wait(Promise.resolve())" x-on:add="$event.detail.wait(Promise.resolve())" x-on:remove="$event.detail.wait(Promise.resolve())" />
    <x-nq::server-admin.job-queue-monitor :jobs="$jobs"
        x-on:retry="$event.detail.wait(Promise.resolve())" x-on:forget="$event.detail.wait(Promise.resolve())" />
</div>
```

### HTML + Alpine

```html
<div class="flex flex-col gap-6">
    <div data-slot="service-units" x-data="nqServiceUnits(JSON.parse('{\u0022labels\u0022:{\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022cancel\u0022:\u0022Cancel\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022search\u0022:\u0022Search\\u2026\u0022,\u0022servicesTitle\u0022:\u0022Services\u0022,\u0022servicesDescription\u0022:\u0022Systemd units on this server. Start, stop, restart or choose what runs at boot.\u0022,\u0022servicesTable\u0022:\u0022Service units\u0022,\u0022service\u0022:\u0022Service\u0022,\u0022state\u0022:\u0022State\u0022,\u0022boot\u0022:\u0022At boot\u0022,\u0022memory\u0022:\u0022Memory\u0022,\u0022since\u0022:\u0022Since\u0022,\u0022states\u0022:{\u0022active\u0022:\u0022Running\u0022,\u0022inactive\u0022:\u0022Stopped\u0022,\u0022failed\u0022:\u0022Failed\u0022,\u0022activating\u0022:\u0022Starting\u0022,\u0022deactivating\u0022:\u0022Stopping\u0022,\u0022reloading\u0022:\u0022Reloading\u0022},\u0022enabledAtBoot\u0022:\u0022Enabled\u0022,\u0022disabledAtBoot\u0022:\u0022Disabled\u0022,\u0022actions\u0022:{\u0022start\u0022:\u0022Start\u0022,\u0022stop\u0022:\u0022Stop\u0022,\u0022restart\u0022:\u0022Restart\u0022,\u0022reload\u0022:\u0022Reload\u0022,\u0022enable\u0022:\u0022Enable at boot\u0022,\u0022disable\u0022:\u0022Disable at boot\u0022},\u0022viewLogs\u0022:\u0022View logs\u0022,\u0022working\u0022:\u0022Working\u0022,\u0022confirmAction\u0022:\u0022{action} {name}?\u0022,\u0022confirmStop\u0022:\u0022Anything that depends on this service stops working until it is started again.\u0022,\u0022confirmRestart\u0022:\u0022The service is interrupted for a moment while it restarts.\u0022,\u0022confirmDisable\u0022:\u0022The service will not start by itself after a reboot.\u0022,\u0022servicesEmpty\u0022:\u0022No services\u0022,\u0022packagesTitle\u0022:\u0022Package updates\u0022,\u0022packagesDescription\u0022:\u0022Updates waiting on this server.\u0022,\u0022packagesTable\u0022:\u0022Available updates\u0022,\u0022package\u0022:\u0022Package\u0022,\u0022version\u0022:\u0022Version\u0022,\u0022kind\u0022:\u0022Type\u0022,\u0022size\u0022:\u0022Size\u0022,\u0022kinds\u0022:{\u0022security\u0022:\u0022Security\u0022,\u0022kernel\u0022:\u0022Kernel\u0022,\u0022regular\u0022:\u0022Update\u0022},\u0022upToDate\u0022:\u0022Everything is up to date\u0022,\u0022upToDateBody\u0022:\u0022There are no updates waiting.\u0022,\u0022lastChecked\u0022:\u0022Last checked\u0022,\u0022neverChecked\u0022:\u0022Not checked yet\u0022,\u0022checkNow\u0022:\u0022Check for updates\u0022,\u0022checking\u0022:\u0022Checking\u0022,\u0022updateAll\u0022:\u0022Update all\u0022,\u0022updateAllTitle\u0022:\u0022Update {n} packages?\u0022,\u0022updateAllBody\u0022:\u0022Services that use an updated library may restart.\u0022,\u0022updateSelected\u0022:\u0022Update selected\u0022,\u0022updateOne\u0022:\u0022Update\u0022,\u0022updating\u0022:\u0022Updating\u0022,\u0022securityCount\u0022:\u0022{n} security\u0022,\u0022totalCount\u0022:\u0022{n} updates\u0022,\u0022download\u0022:\u0022{size} to download\u0022,\u0022rebootTitle\u0022:\u0022A restart is needed\u0022,\u0022rebootBody\u0022:\u0022A kernel or core library was updated. Restart the server to use it.\u0022,\u0022reboot\u0022:\u0022Restart server\u0022,\u0022rebootConfirmTitle\u0022:\u0022Restart the server?\u0022,\u0022rebootConfirmBody\u0022:\u0022Everything on it is offline for a minute or two.\u0022,\u0022sshTitle\u0022:\u0022SSH keys\u0022,\u0022sshDescription\u0022:\u0022Which keys can sign in to which server. Tick a box to install or remove a key.\u0022,\u0022sshTable\u0022:\u0022SSH keys by server\u0022,\u0022sshKey\u0022:\u0022Key\u0022,\u0022sshCoverage\u0022:\u0022{n} of {total}\u0022,\u0022sshServers\u0022:\u0022Servers\u0022,\u0022addKey\u0022:\u0022Add key\u0022,\u0022addKeyTitle\u0022:\u0022Add an SSH key\u0022,\u0022addKeyBody\u0022:\u0022Paste the public key, the one that ends in .pub. Never paste a private key.\u0022,\u0022keyName\u0022:\u0022Name\u0022,\u0022keyNamePlaceholder\u0022:\u0022Laptop\u0022,\u0022keyNameRequired\u0022:\u0022Give the key a name.\u0022,\u0022publicKey\u0022:\u0022Public key\u0022,\u0022keyProblems\u0022:{\u0022empty\u0022:\u0022Paste the public key.\u0022,\u0022format\u0022:\u0022A public key is one line: the type, the key, and an optional comment.\u0022,\u0022type\u0022:\u0022This key type is not recognised. Use ssh-ed25519, ssh-rsa or ecdsa.\u0022,\u0022body\u0022:\u0022The key text looks damaged. Copy it again.\u0022,\u0022private\u0022:\u0022That is a private key. Never paste it. Paste the .pub file instead.\u0022},\u0022keyDetected\u0022:\u0022{type} key, {comment}\u0022,\u0022addedOn\u0022:\u0022Added\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022never\u0022:\u0022Never\u0022,\u0022installOnAll\u0022:\u0022Install on all servers\u0022,\u0022removeFromAll\u0022:\u0022Remove from all servers\u0022,\u0022deleteKey\u0022:\u0022Delete key\u0022,\u0022deleteKeyTitle\u0022:\u0022Delete {name}?\u0022,\u0022deleteKeyBody\u0022:\u0022The key is removed from every server it is installed on. Anyone using it can no longer sign in.\u0022,\u0022installedOn\u0022:\u0022{key} on {server}\u0022,\u0022noKeys\u0022:\u0022No SSH keys yet\u0022,\u0022noKeysBody\u0022:\u0022Add a public key, then choose the servers it can sign in to.\u0022,\u0022jobsTitle\u0022:\u0022Job queue\u0022,\u0022jobsDescription\u0022:\u0022Background work, by status. Retry what failed, or forget it.\u0022,\u0022jobsTable\u0022:\u0022Jobs\u0022,\u0022job\u0022:\u0022Job\u0022,\u0022queue\u0022:\u0022Queue\u0022,\u0022attempts\u0022:\u0022Attempts\u0022,\u0022when\u0022:\u0022When\u0022,\u0022status\u0022:\u0022Status\u0022,\u0022jobStatuses\u0022:{\u0022waiting\u0022:\u0022Waiting\u0022,\u0022active\u0022:\u0022Running\u0022,\u0022delayed\u0022:\u0022Delayed\u0022,\u0022completed\u0022:\u0022Done\u0022,\u0022failed\u0022:\u0022Failed\u0022},\u0022retry\u0022:\u0022Retry\u0022,\u0022forget\u0022:\u0022Forget\u0022,\u0022retryFailed\u0022:\u0022Retry all failed\u0022,\u0022forgetFailed\u0022:\u0022Forget all failed\u0022,\u0022forgetTitle\u0022:\u0022Forget {n} jobs?\u0022,\u0022forgetBody\u0022:\u0022They are removed from the queue and the history. This cannot be undone.\u0022,\u0022retryTitle\u0022:\u0022Retry {n} jobs?\u0022,\u0022retryBody\u0022:\u0022They go back to the queue and run again.\u0022,\u0022details\u0022:\u0022Details\u0022,\u0022errorLabel\u0022:\u0022Error\u0022,\u0022payloadLabel\u0022:\u0022Payload\u0022,\u0022noError\u0022:\u0022No error recorded.\u0022,\u0022close\u0022:\u0022Close\u0022,\u0022jobsEmpty\u0022:\u0022No jobs\u0022,\u0022of\u0022:\u0022{a}\\\/{b}\u0022,\u0022queueFilter\u0022:\u0022Queue\u0022,\u0022statusGroup\u0022:\u0022Job status\u0022,\u0022ar\u0022:false,\u0022totalOne\u0022:\u00221 update\u0022,\u0022totalTwo\u0022:\u0022{n} updates\u0022,\u0022totalFew\u0022:\u0022{n} updates\u0022,\u0022totalMany\u0022:\u0022{n} updates\u0022,\u0022forgetOne\u0022:\u0022Forget this job?\u0022,\u0022retryOne\u0022:\u0022Retry this job?\u0022,\u0022keyNoComment\u0022:\u0022{type} key\u0022,\u0022notAvailable\u0022:\u0022{action} is not available while the status is {state}.\u0022,\u0022justNow\u0022:\u0022just now\u0022},\u0022services\u0022:[{\u0022id\u0022:\u0022nginx\u0022,\u0022name\u0022:\u0022nginx.service\u0022,\u0022description\u0022:\u0022A high performance web server\u0022,\u0022state\u0022:\u0022active\u0022,\u0022enabled\u0022:true,\u0022memoryBytes\u0022:48234496,\u0022since\u0022:\u00223 days ago\u0022},{\u0022id\u0022:\u0022redis\u0022,\u0022name\u0022:\u0022redis-server.service\u0022,\u0022description\u0022:\u0022Advanced key-value store\u0022,\u0022state\u0022:\u0022inactive\u0022,\u0022enabled\u0022:false,\u0022since\u0022:\u00221 hour ago\u0022},{\u0022id\u0022:\u0022worker\u0022,\u0022name\u0022:\u0022queue-worker.service\u0022,\u0022description\u0022:\u0022Background job worker\u0022,\u0022state\u0022:\u0022failed\u0022,\u0022enabled\u0022:true,\u0022since\u0022:\u00225 minutes ago\u0022}]}'))" x-on:nq-data-table-action="onAction($event)"
    x-on:action="$event.detail.wait(Promise.resolve())" x-on:view-logs="$event.detail.wait(Promise.resolve())" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h2 data-slot="card-title" class="text-label text-foreground">Services</h2>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">Systemd units on this server. Start, stop, restart or choose what runs at boot.</div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-3"><template x-if="pageError">
            <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="pageError = 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="pageError"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
        </template>
        <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022service\u0022,\u0022header\u0022:\u0022Service\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022state\u0022,\u0022header\u0022:\u0022State\u0022,\u0022type\u0022:\u0022status\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022active\u0022,\u0022label\u0022:\u0022Running\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022inactive\u0022,\u0022label\u0022:\u0022Stopped\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022failed\u0022,\u0022label\u0022:\u0022Failed\u0022,\u0022tone\u0022:\u0022danger\u0022},{\u0022value\u0022:\u0022activating\u0022,\u0022label\u0022:\u0022Starting\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022deactivating\u0022,\u0022label\u0022:\u0022Stopping\u0022,\u0022tone\u0022:\u0022warning\u0022},{\u0022value\u0022:\u0022reloading\u0022,\u0022label\u0022:\u0022Reloading\u0022,\u0022tone\u0022:\u0022info\u0022}]},{\u0022id\u0022:\u0022boot\u0022,\u0022header\u0022:\u0022At boot\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022enabled\u0022,\u0022label\u0022:\u0022Enabled\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022disabled\u0022,\u0022label\u0022:\u0022Disabled\u0022,\u0022tone\u0022:\u0022neutral\u0022}]},{\u0022id\u0022:\u0022memory\u0022,\u0022header\u0022:\u0022Memory\u0022,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022since\u0022,\u0022header\u0022:\u0022Since\u0022,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022label\u0022,\u0022pageSize\u0022:10,\u0022locale\u0022:\u0022en\u0022,\u0022expand\u0022:\u0022description\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022start\u0022},{\u0022id\u0022:\u0022stop\u0022},{\u0022id\u0022:\u0022restart\u0022},{\u0022id\u0022:\u0022reload\u0022},{\u0022id\u0022:\u0022enable\u0022},{\u0022id\u0022:\u0022disable\u0022},{\u0022id\u0022:\u0022logs\u0022,\u0022group\u0022:\u0022logs\u0022}],\u0022actionsKey\u0022:\u0022actions\u0022,\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="tableRows" class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search…" aria-label="Search…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;state&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="state" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        State
                        <span data-slot="badge" x-show="facetCount('state')" x-text="facetSummary('state')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|active&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Running
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|inactive&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Stopped
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|failed&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Failed
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|activating&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Starting
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|deactivating&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Stopping
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;state|reloading&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Reloading
</div></div>
                        <div x-show="facetCount('state')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;state&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;boot&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="boot" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        At boot
                        <span data-slot="badge" x-show="facetCount('boot')" x-text="facetSummary('boot')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;boot|enabled&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Enabled
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;boot|disabled&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Disabled
</div></div>
                        <div x-show="facetCount('boot')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;boot&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Service units"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Service units"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 2) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Details for </span></div>
                                                                                        <div role="columnheader" data-slot="table-head" data-col="service" x-show="shown['service']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('service')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('service', $event.shiftKey)"
                                    x-bind:class="sortOf('service') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Service</span>
                                    <svg aria-hidden="true" x-show="! sortOf('service')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('service') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('service') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="state" x-show="shown['state']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('state')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('state', $event.shiftKey)"
                                    x-bind:class="sortOf('state') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >State</span>
                                    <svg aria-hidden="true" x-show="! sortOf('state')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('state') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('state') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="boot" x-show="shown['boot']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            At boot
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="memory" x-show="shown['memory']"  x-bind:class="pad"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Memory
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="since" x-show="shown['since']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Since
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No services</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                                                        <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" data-slot="data-table-expand" x-show="canExpand(row)" x-on:click="toggleExpanded(row)" x-bind:aria-expanded="String(isOpen(row))"
                                        x-bind:aria-label="say('expandRow', row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                                        class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                                        <svg aria-hidden="true" x-bind:class="isOpen(row) ? 'rotate-90 rtl:-rotate-90' : ''" class="transition-transform duration-150 ease-nq rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg>                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="service" x-show="shown['service']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;service&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="state" x-show="shown['state']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;state&#039;)) !== '' && tone(row, col(&#039;state&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;state&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;state&#039;)) !== '' && tone(row, col(&#039;state&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;state&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;state&#039;)) !== '' && tone(row, col(&#039;state&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;state&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;state&#039;)) !== '' && tone(row, col(&#039;state&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;state&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;state&#039;)) !== '' && tone(row, col(&#039;state&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;state&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="boot" x-show="shown['boot']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span data-slot="badge" x-show="shownText(row, col(&#039;boot&#039;)) !== ''" x-bind:style="hueStyle(row, col(&#039;boot&#039;))" style="display: none"
                                                    class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-transparent bg-[var(--tag-soft)] px-1.5 text-caption font-medium text-[var(--tag-solid)]" x-text="shownText(row, col(&#039;boot&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="memory" x-show="shown['memory']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;memory&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="since" x-show="shown['since']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;since&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;start&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                                                                Start</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 1)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;stop&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
</svg>                                                                Stop</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 2)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;restart&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
</svg>                                                                Restart</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 3)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 3)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;reload&#039;, row)" x-bind:data-disabled="actionOff(row, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg>                                                                Reload</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 4)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 4)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;enable&#039;, row)" x-bind:data-disabled="actionOff(row, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="15" cy="12" r="3"/>
  <rect width="20" height="14" x="2" y="5" rx="7"/>
</svg>                                                                Enable at boot</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 5)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 5)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;disable&#039;, row)" x-bind:data-disabled="actionOff(row, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="9" cy="12" r="3"/>
  <rect width="20" height="14" x="2" y="5" rx="7"/>
</svg>                                                                Disable at boot</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 6)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 6)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;logs&#039;, row)" x-bind:data-disabled="actionOff(row, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 12h-5"/>
  <path d="M15 8h-5"/>
  <path d="M19 17V5a2 2 0 0 0-2-2H4"/>
  <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>
</svg>                                                                View logs</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                                    <template x-if="isOpen(row)">
                                <div role="row" data-slot="data-table-expanded" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                    <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                                        <section x-bind:aria-label="say('details', row)" class="border-s-2 border-nq-action/50 bg-secondary/40 px-4 py-3 ps-14"  x-text="row[expandKey]" ></section>
                                    </div>
                                </div>
                            </template>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;start&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                                Start</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 1)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;stop&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
</svg>                                Stop</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 2)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;restart&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
</svg>                                Restart</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 3)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 3)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;reload&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 3) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 3) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg>                                Reload</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 4)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 4)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;enable&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 4) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 4) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="15" cy="12" r="3"/>
  <rect width="20" height="14" x="2" y="5" rx="7"/>
</svg>                                Enable at boot</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 5)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 5)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;disable&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 5) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 5) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="9" cy="12" r="3"/>
  <rect width="20" height="14" x="2" y="5" rx="7"/>
</svg>                                Disable at boot</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 6)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 6)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;logs&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 6) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 6) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 12h-5"/>
  <path d="M15 8h-5"/>
  <path d="M19 17V5a2 2 0 0 0-2-2H4"/>
  <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>
</svg>                                View logs</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div>
    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="confirmOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><span x-text="confirmTitle"></span></h2>
            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="confirmBody"></span></p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" 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>
            <template x-if="confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template>
            <template x-if="! confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template></div>
        </div>
    </div>
</template>
</div>
</div>
    <div data-slot="package-updates" x-data="nqPackageUpdates(JSON.parse('{\u0022labels\u0022:{\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022cancel\u0022:\u0022Cancel\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022search\u0022:\u0022Search\\u2026\u0022,\u0022servicesTitle\u0022:\u0022Services\u0022,\u0022servicesDescription\u0022:\u0022Systemd units on this server. Start, stop, restart or choose what runs at boot.\u0022,\u0022servicesTable\u0022:\u0022Service units\u0022,\u0022service\u0022:\u0022Service\u0022,\u0022state\u0022:\u0022State\u0022,\u0022boot\u0022:\u0022At boot\u0022,\u0022memory\u0022:\u0022Memory\u0022,\u0022since\u0022:\u0022Since\u0022,\u0022states\u0022:{\u0022active\u0022:\u0022Running\u0022,\u0022inactive\u0022:\u0022Stopped\u0022,\u0022failed\u0022:\u0022Failed\u0022,\u0022activating\u0022:\u0022Starting\u0022,\u0022deactivating\u0022:\u0022Stopping\u0022,\u0022reloading\u0022:\u0022Reloading\u0022},\u0022enabledAtBoot\u0022:\u0022Enabled\u0022,\u0022disabledAtBoot\u0022:\u0022Disabled\u0022,\u0022actions\u0022:{\u0022start\u0022:\u0022Start\u0022,\u0022stop\u0022:\u0022Stop\u0022,\u0022restart\u0022:\u0022Restart\u0022,\u0022reload\u0022:\u0022Reload\u0022,\u0022enable\u0022:\u0022Enable at boot\u0022,\u0022disable\u0022:\u0022Disable at boot\u0022},\u0022viewLogs\u0022:\u0022View logs\u0022,\u0022working\u0022:\u0022Working\u0022,\u0022confirmAction\u0022:\u0022{action} {name}?\u0022,\u0022confirmStop\u0022:\u0022Anything that depends on this service stops working until it is started again.\u0022,\u0022confirmRestart\u0022:\u0022The service is interrupted for a moment while it restarts.\u0022,\u0022confirmDisable\u0022:\u0022The service will not start by itself after a reboot.\u0022,\u0022servicesEmpty\u0022:\u0022No services\u0022,\u0022packagesTitle\u0022:\u0022Package updates\u0022,\u0022packagesDescription\u0022:\u0022Updates waiting on this server.\u0022,\u0022packagesTable\u0022:\u0022Available updates\u0022,\u0022package\u0022:\u0022Package\u0022,\u0022version\u0022:\u0022Version\u0022,\u0022kind\u0022:\u0022Type\u0022,\u0022size\u0022:\u0022Size\u0022,\u0022kinds\u0022:{\u0022security\u0022:\u0022Security\u0022,\u0022kernel\u0022:\u0022Kernel\u0022,\u0022regular\u0022:\u0022Update\u0022},\u0022upToDate\u0022:\u0022Everything is up to date\u0022,\u0022upToDateBody\u0022:\u0022There are no updates waiting.\u0022,\u0022lastChecked\u0022:\u0022Last checked\u0022,\u0022neverChecked\u0022:\u0022Not checked yet\u0022,\u0022checkNow\u0022:\u0022Check for updates\u0022,\u0022checking\u0022:\u0022Checking\u0022,\u0022updateAll\u0022:\u0022Update all\u0022,\u0022updateAllTitle\u0022:\u0022Update {n} packages?\u0022,\u0022updateAllBody\u0022:\u0022Services that use an updated library may restart.\u0022,\u0022updateSelected\u0022:\u0022Update selected\u0022,\u0022updateOne\u0022:\u0022Update\u0022,\u0022updating\u0022:\u0022Updating\u0022,\u0022securityCount\u0022:\u0022{n} security\u0022,\u0022totalCount\u0022:\u0022{n} updates\u0022,\u0022download\u0022:\u0022{size} to download\u0022,\u0022rebootTitle\u0022:\u0022A restart is needed\u0022,\u0022rebootBody\u0022:\u0022A kernel or core library was updated. Restart the server to use it.\u0022,\u0022reboot\u0022:\u0022Restart server\u0022,\u0022rebootConfirmTitle\u0022:\u0022Restart the server?\u0022,\u0022rebootConfirmBody\u0022:\u0022Everything on it is offline for a minute or two.\u0022,\u0022sshTitle\u0022:\u0022SSH keys\u0022,\u0022sshDescription\u0022:\u0022Which keys can sign in to which server. Tick a box to install or remove a key.\u0022,\u0022sshTable\u0022:\u0022SSH keys by server\u0022,\u0022sshKey\u0022:\u0022Key\u0022,\u0022sshCoverage\u0022:\u0022{n} of {total}\u0022,\u0022sshServers\u0022:\u0022Servers\u0022,\u0022addKey\u0022:\u0022Add key\u0022,\u0022addKeyTitle\u0022:\u0022Add an SSH key\u0022,\u0022addKeyBody\u0022:\u0022Paste the public key, the one that ends in .pub. Never paste a private key.\u0022,\u0022keyName\u0022:\u0022Name\u0022,\u0022keyNamePlaceholder\u0022:\u0022Laptop\u0022,\u0022keyNameRequired\u0022:\u0022Give the key a name.\u0022,\u0022publicKey\u0022:\u0022Public key\u0022,\u0022keyProblems\u0022:{\u0022empty\u0022:\u0022Paste the public key.\u0022,\u0022format\u0022:\u0022A public key is one line: the type, the key, and an optional comment.\u0022,\u0022type\u0022:\u0022This key type is not recognised. Use ssh-ed25519, ssh-rsa or ecdsa.\u0022,\u0022body\u0022:\u0022The key text looks damaged. Copy it again.\u0022,\u0022private\u0022:\u0022That is a private key. Never paste it. Paste the .pub file instead.\u0022},\u0022keyDetected\u0022:\u0022{type} key, {comment}\u0022,\u0022addedOn\u0022:\u0022Added\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022never\u0022:\u0022Never\u0022,\u0022installOnAll\u0022:\u0022Install on all servers\u0022,\u0022removeFromAll\u0022:\u0022Remove from all servers\u0022,\u0022deleteKey\u0022:\u0022Delete key\u0022,\u0022deleteKeyTitle\u0022:\u0022Delete {name}?\u0022,\u0022deleteKeyBody\u0022:\u0022The key is removed from every server it is installed on. Anyone using it can no longer sign in.\u0022,\u0022installedOn\u0022:\u0022{key} on {server}\u0022,\u0022noKeys\u0022:\u0022No SSH keys yet\u0022,\u0022noKeysBody\u0022:\u0022Add a public key, then choose the servers it can sign in to.\u0022,\u0022jobsTitle\u0022:\u0022Job queue\u0022,\u0022jobsDescription\u0022:\u0022Background work, by status. Retry what failed, or forget it.\u0022,\u0022jobsTable\u0022:\u0022Jobs\u0022,\u0022job\u0022:\u0022Job\u0022,\u0022queue\u0022:\u0022Queue\u0022,\u0022attempts\u0022:\u0022Attempts\u0022,\u0022when\u0022:\u0022When\u0022,\u0022status\u0022:\u0022Status\u0022,\u0022jobStatuses\u0022:{\u0022waiting\u0022:\u0022Waiting\u0022,\u0022active\u0022:\u0022Running\u0022,\u0022delayed\u0022:\u0022Delayed\u0022,\u0022completed\u0022:\u0022Done\u0022,\u0022failed\u0022:\u0022Failed\u0022},\u0022retry\u0022:\u0022Retry\u0022,\u0022forget\u0022:\u0022Forget\u0022,\u0022retryFailed\u0022:\u0022Retry all failed\u0022,\u0022forgetFailed\u0022:\u0022Forget all failed\u0022,\u0022forgetTitle\u0022:\u0022Forget {n} jobs?\u0022,\u0022forgetBody\u0022:\u0022They are removed from the queue and the history. This cannot be undone.\u0022,\u0022retryTitle\u0022:\u0022Retry {n} jobs?\u0022,\u0022retryBody\u0022:\u0022They go back to the queue and run again.\u0022,\u0022details\u0022:\u0022Details\u0022,\u0022errorLabel\u0022:\u0022Error\u0022,\u0022payloadLabel\u0022:\u0022Payload\u0022,\u0022noError\u0022:\u0022No error recorded.\u0022,\u0022close\u0022:\u0022Close\u0022,\u0022jobsEmpty\u0022:\u0022No jobs\u0022,\u0022of\u0022:\u0022{a}\\\/{b}\u0022,\u0022queueFilter\u0022:\u0022Queue\u0022,\u0022statusGroup\u0022:\u0022Job status\u0022,\u0022ar\u0022:false,\u0022totalOne\u0022:\u00221 update\u0022,\u0022totalTwo\u0022:\u0022{n} updates\u0022,\u0022totalFew\u0022:\u0022{n} updates\u0022,\u0022totalMany\u0022:\u0022{n} updates\u0022,\u0022forgetOne\u0022:\u0022Forget this job?\u0022,\u0022retryOne\u0022:\u0022Retry this job?\u0022,\u0022keyNoComment\u0022:\u0022{type} key\u0022,\u0022notAvailable\u0022:\u0022{action} is not available while the status is {state}.\u0022,\u0022justNow\u0022:\u0022just now\u0022},\u0022rebootRequired\u0022:true,\u0022packages\u0022:[{\u0022name\u0022:\u0022openssl\u0022,\u0022currentVersion\u0022:\u00223.0.2\u0022,\u0022newVersion\u0022:\u00223.0.13\u0022,\u0022kind\u0022:\u0022security\u0022,\u0022sizeBytes\u0022:1200000},{\u0022name\u0022:\u0022linux-image-generic\u0022,\u0022currentVersion\u0022:\u00225.15.0\u0022,\u0022newVersion\u0022:\u00225.15.1\u0022,\u0022kind\u0022:\u0022kernel\u0022,\u0022sizeBytes\u0022:9400000},{\u0022name\u0022:\u0022curl\u0022,\u0022currentVersion\u0022:\u00227.81.0\u0022,\u0022newVersion\u0022:\u00227.81.1\u0022,\u0022kind\u0022:\u0022regular\u0022,\u0022sizeBytes\u0022:300000}]}'))" x-on:nq-data-table-action="onAction($event)"
    x-on:check="$event.detail.wait(Promise.resolve())" x-on:update="$event.detail.wait(Promise.resolve())" x-on:reboot="$event.detail.wait(Promise.resolve())" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] sm:flex sm:items-start sm:justify-between sm:gap-4"><div class="flex flex-col gap-1.5">
            <h2 data-slot="card-title" class="text-label text-foreground">Package updates</h2>
            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Updates waiting on this server.</div>
        </div>
        <div class="mt-3 flex flex-wrap items-center gap-2 sm:mt-0">
            <button data-slot="button"
     type="button"                         x-on:click="check()" x-bind:aria-busy="checking ? &#039;true&#039; : null" x-bind:data-disabled="checking ? &#039;&#039; : 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 px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="checking" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                <svg x-show="! checking" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg>                <span x-text="checking ? 'Checking' : 'Check for updates'"></span></button>
            <button data-slot="button"
     type="button"                         x-show="packages.length &gt; 0" style="display: none" x-on:click="askUpdateAll()" x-bind:data-disabled="busy ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>                Update all</button>
        </div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-3"><template x-if="pageError">
            <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="pageError = 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="pageError"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
        </template>
        <template x-if="rebootRequired">
            <div data-slot="alert" data-tone="warning" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-warning/30 bg-nq-warning-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                    <div data-slot="alert-title" class="text-label text-foreground">A restart is needed</div>
                            <div data-slot="alert-description" class="text-body-sm text-muted-foreground">A kernel or core library was updated. Restart the server to use it.</div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
            <button data-slot="button"
     type="button"                         x-on:click="askReboot()" 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">
        Restart server</button>
                    </div>
    </div>
        </template>
        <p data-slot="package-summary" class="flex flex-wrap items-center gap-x-3 gap-y-1 text-body text-muted-foreground" x-show="packages.length > 0" style="display: none">
            <span class="text-foreground" x-text="totalText()"></span>
            <span x-show="summary.security > 0" style="display: none" class="text-nq-danger" x-text="securityText()"></span>
            <span x-show="summary.downloadBytes > 0" style="display: none" x-text="downloadText()"></span>
            <span>Last checked: 2 hours ago</span>
        </p>
        <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022package\u0022,\u0022header\u0022:\u0022Package\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022version\u0022,\u0022header\u0022:\u0022Version\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022kind\u0022,\u0022header\u0022:\u0022Type\u0022,\u0022type\u0022:\u0022status\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022security\u0022,\u0022label\u0022:\u0022Security\u0022,\u0022tone\u0022:\u0022danger\u0022},{\u0022value\u0022:\u0022kernel\u0022,\u0022label\u0022:\u0022Kernel\u0022,\u0022tone\u0022:\u0022warning\u0022},{\u0022value\u0022:\u0022regular\u0022,\u0022label\u0022:\u0022Update\u0022,\u0022tone\u0022:\u0022neutral\u0022}]},{\u0022id\u0022:\u0022size\u0022,\u0022header\u0022:\u0022Size\u0022,\u0022align\u0022:\u0022end\u0022,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022label\u0022,\u0022pageSize\u0022:10,\u0022selectable\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022update\u0022}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="tableRows" class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search…" aria-label="Search…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;kind&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="kind" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Type
                        <span data-slot="badge" x-show="facetCount('kind')" x-text="facetSummary('kind')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;kind|security&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Security
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;kind|kernel&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Kernel
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;kind|regular&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Update
</div></div>
                        <div x-show="facetCount('kind')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;kind&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="selectedText()" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="selectedText()"></span>
            <button data-slot="button"
     type="button"                         x-on:click="updateSelected(selectedIds())" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Update selected</button>            <button type="button" aria-label="Clear selection" x-on:click="clearSelection()"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Available updates"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Available updates"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 2) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                            <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                            <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all rows on this page" x-on:click="togglePage()"
                                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null"
                                aria-checked="false" 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 after:absolute after:-inset-1 align-middle">
                                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                                </span>
                            </button>
                        </div>
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="package" x-show="shown['package']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('package')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('package', $event.shiftKey)"
                                    x-bind:class="sortOf('package') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Package</span>
                                    <svg aria-hidden="true" x-show="! sortOf('package')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('package') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('package') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="version" x-show="shown['version']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Version
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="kind" x-show="shown['kind']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('kind')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('kind', $event.shiftKey)"
                                    x-bind:class="sortOf('kind') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Type</span>
                                    <svg aria-hidden="true" x-show="! sortOf('kind')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('kind') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('kind') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="size" x-show="shown['size']"  x-bind:class="pad"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Size
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Everything is up to date</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)"
                                        aria-checked="false" x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                                        x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" 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 after:absolute after:-inset-1 align-middle">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="package" x-show="shown['package']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;package&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="version" x-show="shown['version']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;version&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="kind" x-show="shown['kind']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;kind&#039;)) !== '' && tone(row, col(&#039;kind&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;kind&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;kind&#039;)) !== '' && tone(row, col(&#039;kind&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;kind&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;kind&#039;)) !== '' && tone(row, col(&#039;kind&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;kind&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;kind&#039;)) !== '' && tone(row, col(&#039;kind&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;kind&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;kind&#039;)) !== '' && tone(row, col(&#039;kind&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;kind&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="size" x-show="shown['size']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;size&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;update&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>                                                                Update</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;update&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>                                Update</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div>
    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="confirmOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><span x-text="confirmTitle"></span></h2>
            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="confirmBody"></span></p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" 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>
            <template x-if="confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template>
            <template x-if="! confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template></div>
        </div>
    </div>
</template>
</div>
</div>
    <div data-slot="ssh-key-manager" x-data="nqSshKeys(JSON.parse('{\u0022labels\u0022:{\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022cancel\u0022:\u0022Cancel\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022search\u0022:\u0022Search\\u2026\u0022,\u0022servicesTitle\u0022:\u0022Services\u0022,\u0022servicesDescription\u0022:\u0022Systemd units on this server. Start, stop, restart or choose what runs at boot.\u0022,\u0022servicesTable\u0022:\u0022Service units\u0022,\u0022service\u0022:\u0022Service\u0022,\u0022state\u0022:\u0022State\u0022,\u0022boot\u0022:\u0022At boot\u0022,\u0022memory\u0022:\u0022Memory\u0022,\u0022since\u0022:\u0022Since\u0022,\u0022states\u0022:{\u0022active\u0022:\u0022Running\u0022,\u0022inactive\u0022:\u0022Stopped\u0022,\u0022failed\u0022:\u0022Failed\u0022,\u0022activating\u0022:\u0022Starting\u0022,\u0022deactivating\u0022:\u0022Stopping\u0022,\u0022reloading\u0022:\u0022Reloading\u0022},\u0022enabledAtBoot\u0022:\u0022Enabled\u0022,\u0022disabledAtBoot\u0022:\u0022Disabled\u0022,\u0022actions\u0022:{\u0022start\u0022:\u0022Start\u0022,\u0022stop\u0022:\u0022Stop\u0022,\u0022restart\u0022:\u0022Restart\u0022,\u0022reload\u0022:\u0022Reload\u0022,\u0022enable\u0022:\u0022Enable at boot\u0022,\u0022disable\u0022:\u0022Disable at boot\u0022},\u0022viewLogs\u0022:\u0022View logs\u0022,\u0022working\u0022:\u0022Working\u0022,\u0022confirmAction\u0022:\u0022{action} {name}?\u0022,\u0022confirmStop\u0022:\u0022Anything that depends on this service stops working until it is started again.\u0022,\u0022confirmRestart\u0022:\u0022The service is interrupted for a moment while it restarts.\u0022,\u0022confirmDisable\u0022:\u0022The service will not start by itself after a reboot.\u0022,\u0022servicesEmpty\u0022:\u0022No services\u0022,\u0022packagesTitle\u0022:\u0022Package updates\u0022,\u0022packagesDescription\u0022:\u0022Updates waiting on this server.\u0022,\u0022packagesTable\u0022:\u0022Available updates\u0022,\u0022package\u0022:\u0022Package\u0022,\u0022version\u0022:\u0022Version\u0022,\u0022kind\u0022:\u0022Type\u0022,\u0022size\u0022:\u0022Size\u0022,\u0022kinds\u0022:{\u0022security\u0022:\u0022Security\u0022,\u0022kernel\u0022:\u0022Kernel\u0022,\u0022regular\u0022:\u0022Update\u0022},\u0022upToDate\u0022:\u0022Everything is up to date\u0022,\u0022upToDateBody\u0022:\u0022There are no updates waiting.\u0022,\u0022lastChecked\u0022:\u0022Last checked\u0022,\u0022neverChecked\u0022:\u0022Not checked yet\u0022,\u0022checkNow\u0022:\u0022Check for updates\u0022,\u0022checking\u0022:\u0022Checking\u0022,\u0022updateAll\u0022:\u0022Update all\u0022,\u0022updateAllTitle\u0022:\u0022Update {n} packages?\u0022,\u0022updateAllBody\u0022:\u0022Services that use an updated library may restart.\u0022,\u0022updateSelected\u0022:\u0022Update selected\u0022,\u0022updateOne\u0022:\u0022Update\u0022,\u0022updating\u0022:\u0022Updating\u0022,\u0022securityCount\u0022:\u0022{n} security\u0022,\u0022totalCount\u0022:\u0022{n} updates\u0022,\u0022download\u0022:\u0022{size} to download\u0022,\u0022rebootTitle\u0022:\u0022A restart is needed\u0022,\u0022rebootBody\u0022:\u0022A kernel or core library was updated. Restart the server to use it.\u0022,\u0022reboot\u0022:\u0022Restart server\u0022,\u0022rebootConfirmTitle\u0022:\u0022Restart the server?\u0022,\u0022rebootConfirmBody\u0022:\u0022Everything on it is offline for a minute or two.\u0022,\u0022sshTitle\u0022:\u0022SSH keys\u0022,\u0022sshDescription\u0022:\u0022Which keys can sign in to which server. Tick a box to install or remove a key.\u0022,\u0022sshTable\u0022:\u0022SSH keys by server\u0022,\u0022sshKey\u0022:\u0022Key\u0022,\u0022sshCoverage\u0022:\u0022{n} of {total}\u0022,\u0022sshServers\u0022:\u0022Servers\u0022,\u0022addKey\u0022:\u0022Add key\u0022,\u0022addKeyTitle\u0022:\u0022Add an SSH key\u0022,\u0022addKeyBody\u0022:\u0022Paste the public key, the one that ends in .pub. Never paste a private key.\u0022,\u0022keyName\u0022:\u0022Name\u0022,\u0022keyNamePlaceholder\u0022:\u0022Laptop\u0022,\u0022keyNameRequired\u0022:\u0022Give the key a name.\u0022,\u0022publicKey\u0022:\u0022Public key\u0022,\u0022keyProblems\u0022:{\u0022empty\u0022:\u0022Paste the public key.\u0022,\u0022format\u0022:\u0022A public key is one line: the type, the key, and an optional comment.\u0022,\u0022type\u0022:\u0022This key type is not recognised. Use ssh-ed25519, ssh-rsa or ecdsa.\u0022,\u0022body\u0022:\u0022The key text looks damaged. Copy it again.\u0022,\u0022private\u0022:\u0022That is a private key. Never paste it. Paste the .pub file instead.\u0022},\u0022keyDetected\u0022:\u0022{type} key, {comment}\u0022,\u0022addedOn\u0022:\u0022Added\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022never\u0022:\u0022Never\u0022,\u0022installOnAll\u0022:\u0022Install on all servers\u0022,\u0022removeFromAll\u0022:\u0022Remove from all servers\u0022,\u0022deleteKey\u0022:\u0022Delete key\u0022,\u0022deleteKeyTitle\u0022:\u0022Delete {name}?\u0022,\u0022deleteKeyBody\u0022:\u0022The key is removed from every server it is installed on. Anyone using it can no longer sign in.\u0022,\u0022installedOn\u0022:\u0022{key} on {server}\u0022,\u0022noKeys\u0022:\u0022No SSH keys yet\u0022,\u0022noKeysBody\u0022:\u0022Add a public key, then choose the servers it can sign in to.\u0022,\u0022jobsTitle\u0022:\u0022Job queue\u0022,\u0022jobsDescription\u0022:\u0022Background work, by status. Retry what failed, or forget it.\u0022,\u0022jobsTable\u0022:\u0022Jobs\u0022,\u0022job\u0022:\u0022Job\u0022,\u0022queue\u0022:\u0022Queue\u0022,\u0022attempts\u0022:\u0022Attempts\u0022,\u0022when\u0022:\u0022When\u0022,\u0022status\u0022:\u0022Status\u0022,\u0022jobStatuses\u0022:{\u0022waiting\u0022:\u0022Waiting\u0022,\u0022active\u0022:\u0022Running\u0022,\u0022delayed\u0022:\u0022Delayed\u0022,\u0022completed\u0022:\u0022Done\u0022,\u0022failed\u0022:\u0022Failed\u0022},\u0022retry\u0022:\u0022Retry\u0022,\u0022forget\u0022:\u0022Forget\u0022,\u0022retryFailed\u0022:\u0022Retry all failed\u0022,\u0022forgetFailed\u0022:\u0022Forget all failed\u0022,\u0022forgetTitle\u0022:\u0022Forget {n} jobs?\u0022,\u0022forgetBody\u0022:\u0022They are removed from the queue and the history. This cannot be undone.\u0022,\u0022retryTitle\u0022:\u0022Retry {n} jobs?\u0022,\u0022retryBody\u0022:\u0022They go back to the queue and run again.\u0022,\u0022details\u0022:\u0022Details\u0022,\u0022errorLabel\u0022:\u0022Error\u0022,\u0022payloadLabel\u0022:\u0022Payload\u0022,\u0022noError\u0022:\u0022No error recorded.\u0022,\u0022close\u0022:\u0022Close\u0022,\u0022jobsEmpty\u0022:\u0022No jobs\u0022,\u0022of\u0022:\u0022{a}\\\/{b}\u0022,\u0022queueFilter\u0022:\u0022Queue\u0022,\u0022statusGroup\u0022:\u0022Job status\u0022,\u0022ar\u0022:false,\u0022totalOne\u0022:\u00221 update\u0022,\u0022totalTwo\u0022:\u0022{n} updates\u0022,\u0022totalFew\u0022:\u0022{n} updates\u0022,\u0022totalMany\u0022:\u0022{n} updates\u0022,\u0022forgetOne\u0022:\u0022Forget this job?\u0022,\u0022retryOne\u0022:\u0022Retry this job?\u0022,\u0022keyNoComment\u0022:\u0022{type} key\u0022,\u0022notAvailable\u0022:\u0022{action} is not available while the status is {state}.\u0022,\u0022justNow\u0022:\u0022just now\u0022},\u0022servers\u0022:[{\u0022id\u0022:\u0022web1\u0022,\u0022name\u0022:\u0022web-1\u0022},{\u0022id\u0022:\u0022web2\u0022,\u0022name\u0022:\u0022web-2\u0022}],\u0022keys\u0022:[{\u0022id\u0022:\u0022k1\u0022,\u0022name\u0022:\u0022Laptop\u0022,\u0022type\u0022:\u0022ssh-ed25519\u0022,\u0022fingerprint\u0022:\u0022SHA256:abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG\u0022,\u0022comment\u0022:\u0022fady@laptop\u0022,\u0022addedAt\u0022:\u0022Jan 5\u0022,\u0022lastUsedAt\u0022:\u0022Today\u0022,\u0022installedOn\u0022:[\u0022web1\u0022]},{\u0022id\u0022:\u0022k2\u0022,\u0022name\u0022:\u0022CI\u0022,\u0022type\u0022:\u0022ssh-rsa\u0022,\u0022fingerprint\u0022:\u0022SHA256:zyxwvutsrqponmlkjihgfedcba9876543210ZYXWVUT\u0022,\u0022addedAt\u0022:\u0022Feb 1\u0022,\u0022installedOn\u0022:[\u0022web1\u0022,\u0022web2\u0022]}]}'))"
    x-on:nq-data-table-action="onAction($event)" x-on:nq-data-table-edit="onEdit($event)"
    x-on:install-change="$event.detail.wait(Promise.resolve())" x-on:add="$event.detail.wait(Promise.resolve())" x-on:remove="$event.detail.wait(Promise.resolve())" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] sm:flex sm:items-start sm:justify-between sm:gap-4"><div class="flex flex-col gap-1.5">
            <h2 data-slot="card-title" class="text-label text-foreground">SSH keys</h2>
            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Which keys can sign in to which server. Tick a box to install or remove a key.</div>
        </div>
        <button data-slot="button"
     type="button"                         x-on:click="openAdd()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)] mt-3 sm:mt-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>            Add key</button></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-3"><template x-if="pageError">
            <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="pageError = 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="pageError"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
                            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismiss()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
        </template>
        <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022key\u0022,\u0022header\u0022:\u0022Key\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022type\u0022,\u0022header\u0022:\u0022Type\u0022,\u0022type\u0022:\u0022tag\u0022},{\u0022id\u0022:\u0022fingerprint\u0022,\u0022header\u0022:\u0022Fingerprint\u0022,\u0022hidden\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022coverage\u0022,\u0022header\u0022:\u0022Servers\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022s_web1\u0022,\u0022header\u0022:\u0022web-1\u0022,\u0022type\u0022:\u0022boolean\u0022,\u0022edit\u0022:\u0022switch\u0022,\u0022hideable\u0022:true},{\u0022id\u0022:\u0022s_web2\u0022,\u0022header\u0022:\u0022web-2\u0022,\u0022type\u0022:\u0022boolean\u0022,\u0022edit\u0022:\u0022switch\u0022,\u0022hideable\u0022:true},{\u0022id\u0022:\u0022added\u0022,\u0022header\u0022:\u0022Added\u0022,\u0022hidden\u0022:true,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022used\u0022,\u0022header\u0022:\u0022Last used\u0022,\u0022hidden\u0022:true,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022label\u0022,\u0022pageSize\u0022:10,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022all\u0022},{\u0022id\u0022:\u0022none\u0022},{\u0022id\u0022:\u0022delete\u0022,\u0022group\u0022:\u0022danger\u0022}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{row} on {column}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="tableRows" class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search…" aria-label="Search…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5 ms-auto">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                        View</button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Columns</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;type&#039;]" x-bind:disabled="shown[&#039;type&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Type
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;fingerprint&#039;]" x-bind:disabled="shown[&#039;fingerprint&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Fingerprint
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;coverage&#039;]" x-bind:disabled="shown[&#039;coverage&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Servers
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;s_web1&#039;]" x-bind:disabled="shown[&#039;s_web1&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    web-1
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;s_web2&#039;]" x-bind:disabled="shown[&#039;s_web2&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    web-2
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;added&#039;]" x-bind:disabled="shown[&#039;added&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Added
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;used&#039;]" x-bind:disabled="shown[&#039;used&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Last used
</div></div></div>
</template></div>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="SSH keys by server"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="SSH keys by server"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 1) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="key" x-show="shown['key']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('key')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('key', $event.shiftKey)"
                                    x-bind:class="sortOf('key') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Key</span>
                                    <svg aria-hidden="true" x-show="! sortOf('key')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('key') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('key') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="type" x-show="shown['type']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Type
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="fingerprint" x-show="shown['fingerprint']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Fingerprint
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="coverage" x-show="shown['coverage']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Servers
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="s_web1" x-show="shown['s_web1']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            web-1
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="s_web2" x-show="shown['s_web2']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            web-2
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="added" x-show="shown['added']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Added
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="used" x-show="shown['used']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Last used
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No SSH keys yet</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, false)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                                                         x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover ">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="key" x-show="shown['key']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;key&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="type" x-show="shown['type']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span data-slot="badge" x-show="shownText(row, col(&#039;type&#039;)) !== ''" x-bind:style="hueStyle(row, col(&#039;type&#039;))" style="display: none"
                                                    class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-transparent bg-[var(--tag-soft)] px-1.5 text-caption font-medium text-[var(--tag-solid)]" x-text="shownText(row, col(&#039;type&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="fingerprint" x-show="shown['fingerprint']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;fingerprint&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="coverage" x-show="shown['coverage']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;coverage&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="s_web1" x-show="shown['s_web1']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;s_web1&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;s_web1&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;s_web1&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;s_web1&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;s_web1&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;s_web1&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;s_web1&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;s_web1&#039;)) ? 'bg-nq-danger-soft' : ''"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-nq-focus">
                                                                            <button type="button" role="switch" data-slot="switch" x-bind:aria-label="editName(row, col(&#039;s_web1&#039;))" x-on:click="toggleSwitch(row, col(&#039;s_web1&#039;))"
                                            x-bind:aria-checked="shownValue(row, col(&#039;s_web1&#039;)) === true ? 'true' : 'false'" aria-checked="false"
                                            x-bind:data-checked="shownValue(row, col(&#039;s_web1&#039;)) === true ? '' : null" x-bind:data-unchecked="shownValue(row, col(&#039;s_web1&#039;)) === true ? null : ''"
                                            x-bind:disabled="editable(row, col(&#039;s_web1&#039;)) ? null : ''" x-bind:data-disabled="editable(row, col(&#039;s_web1&#039;)) ? null : ''"
                                            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" x-bind:data-checked="shownValue(row, col(&#039;s_web1&#039;)) === true ? '' : null" x-bind:data-unchecked="shownValue(row, col(&#039;s_web1&#039;)) === true ? null : ''"
                                                class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
                                        </button>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="s_web2" x-show="shown['s_web2']"  x-bind:class="pad"
                                                                            x-bind:data-cell-row="rid(row)" tabindex="-1" x-bind:data-editable="editable(row, col(&#039;s_web2&#039;)) ? '' : null" x-bind:data-editing="isEditing(row, col(&#039;s_web2&#039;)) ? '' : null"
                                        x-bind:aria-busy="isPending(row, col(&#039;s_web2&#039;)) ? 'true' : null" x-bind:aria-invalid="failure(row, col(&#039;s_web2&#039;)) ? 'true' : null"
                                        x-on:dblclick="beginEdit(row, col(&#039;s_web2&#039;), $event)" x-on:keydown.enter.self.prevent="beginEdit(row, col(&#039;s_web2&#039;), $event)" x-on:keydown.f2.self.prevent="beginEdit(row, col(&#039;s_web2&#039;), $event)"
                                        x-bind:class="failure(row, col(&#039;s_web2&#039;)) ? 'bg-nq-danger-soft' : ''"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-nq-focus">
                                                                            <button type="button" role="switch" data-slot="switch" x-bind:aria-label="editName(row, col(&#039;s_web2&#039;))" x-on:click="toggleSwitch(row, col(&#039;s_web2&#039;))"
                                            x-bind:aria-checked="shownValue(row, col(&#039;s_web2&#039;)) === true ? 'true' : 'false'" aria-checked="false"
                                            x-bind:data-checked="shownValue(row, col(&#039;s_web2&#039;)) === true ? '' : null" x-bind:data-unchecked="shownValue(row, col(&#039;s_web2&#039;)) === true ? null : ''"
                                            x-bind:disabled="editable(row, col(&#039;s_web2&#039;)) ? null : ''" x-bind:data-disabled="editable(row, col(&#039;s_web2&#039;)) ? null : ''"
                                            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" x-bind:data-checked="shownValue(row, col(&#039;s_web2&#039;)) === true ? '' : null" x-bind:data-unchecked="shownValue(row, col(&#039;s_web2&#039;)) === true ? null : ''"
                                                class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
                                        </button>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="added" x-show="shown['added']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;added&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="used" x-show="shown['used']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;used&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;all&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="8" x="2" y="2" rx="2" ry="2"/>
  <rect width="20" height="8" x="2" y="14" rx="2" ry="2"/>
  <line x1="6" x2="6.01" y1="6" y2="6"/>
  <line x1="6" x2="6.01" y1="18" y2="18"/>
</svg>                                                                Install on all servers</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 1)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;none&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M7 2h13a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-5"/>
  <path d="M10 10 2.5 2.5C2 2 2 2.5 2 5v3a2 2 0 0 0 2 2h6z"/>
  <path d="M22 17v-1a2 2 0 0 0-2-2h-1"/>
  <path d="M4 14a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16.5l1-.5.5.5-8-8H4z"/>
  <path d="M6 18h.01"/>
  <path d="m2 2 20 20"/>
</svg>                                                                Remove from all servers</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 2)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;delete&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                                                Delete key</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;all&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="8" x="2" y="2" rx="2" ry="2"/>
  <rect width="20" height="8" x="2" y="14" rx="2" ry="2"/>
  <line x1="6" x2="6.01" y1="6" y2="6"/>
  <line x1="6" x2="6.01" y1="18" y2="18"/>
</svg>                                Install on all servers</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 1)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;none&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M7 2h13a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-5"/>
  <path d="M10 10 2.5 2.5C2 2 2 2.5 2 5v3a2 2 0 0 0 2 2h6z"/>
  <path d="M22 17v-1a2 2 0 0 0-2-2h-1"/>
  <path d="M4 14a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16.5l1-.5.5.5-8-8H4z"/>
  <path d="M6 18h.01"/>
  <path d="m2 2 20 20"/>
</svg>                                Remove from all servers</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 2)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;delete&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                Delete key</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="addOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form novalidate data-slot="ssh-key-form" class="grid gap-4" x-on:submit.prevent="submit()">
                <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Add an SSH key</h2>
                    <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Paste the public key, the one that ends in .pub. Never paste a private key.</p></div>
                <template x-if="formError"><div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="formError"></span></div>
            </div>
    </div>
</template>
                <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="nameInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Name</label>
                    <input data-slot="input" type="text"
                    x-model="keyName" placeholder="Laptop" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                    <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="nameError"></span></div>
</div>
                <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="keyInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Public key</label>
                    <textarea data-slot="textarea"
                x-model="keyText" dir="ltr" rows="4" spellcheck="false" autocomplete="off" placeholder="ssh-ed25519 AAAA… you@laptop" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] min-h-20 py-2 font-mono text-caption"></textarea>
                    <p data-slot="field-description" class="text-caption text-muted-foreground"><span x-text="detected"></span></p>
                    <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="keyError"></span></div>
</div>
                <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="addOpen = false" x-bind:disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                    <button data-slot="button"
     type="submit"                         x-bind:aria-busy="pending ? &#039;true&#039; : null" x-bind:data-disabled="pending ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="pending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                        Add key</button></div>
            </form>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="confirmOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><span x-text="confirmTitle"></span></h2>
            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="confirmBody"></span></p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" 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>
            <template x-if="confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template>
            <template x-if="! confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template></div>
        </div>
    </div>
</template>
</div>
</div>
    <div data-slot="job-queue-monitor" x-data="nqJobQueue(JSON.parse('{\u0022labels\u0022:{\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022cancel\u0022:\u0022Cancel\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022search\u0022:\u0022Search\\u2026\u0022,\u0022servicesTitle\u0022:\u0022Services\u0022,\u0022servicesDescription\u0022:\u0022Systemd units on this server. Start, stop, restart or choose what runs at boot.\u0022,\u0022servicesTable\u0022:\u0022Service units\u0022,\u0022service\u0022:\u0022Service\u0022,\u0022state\u0022:\u0022State\u0022,\u0022boot\u0022:\u0022At boot\u0022,\u0022memory\u0022:\u0022Memory\u0022,\u0022since\u0022:\u0022Since\u0022,\u0022states\u0022:{\u0022active\u0022:\u0022Running\u0022,\u0022inactive\u0022:\u0022Stopped\u0022,\u0022failed\u0022:\u0022Failed\u0022,\u0022activating\u0022:\u0022Starting\u0022,\u0022deactivating\u0022:\u0022Stopping\u0022,\u0022reloading\u0022:\u0022Reloading\u0022},\u0022enabledAtBoot\u0022:\u0022Enabled\u0022,\u0022disabledAtBoot\u0022:\u0022Disabled\u0022,\u0022actions\u0022:{\u0022start\u0022:\u0022Start\u0022,\u0022stop\u0022:\u0022Stop\u0022,\u0022restart\u0022:\u0022Restart\u0022,\u0022reload\u0022:\u0022Reload\u0022,\u0022enable\u0022:\u0022Enable at boot\u0022,\u0022disable\u0022:\u0022Disable at boot\u0022},\u0022viewLogs\u0022:\u0022View logs\u0022,\u0022working\u0022:\u0022Working\u0022,\u0022confirmAction\u0022:\u0022{action} {name}?\u0022,\u0022confirmStop\u0022:\u0022Anything that depends on this service stops working until it is started again.\u0022,\u0022confirmRestart\u0022:\u0022The service is interrupted for a moment while it restarts.\u0022,\u0022confirmDisable\u0022:\u0022The service will not start by itself after a reboot.\u0022,\u0022servicesEmpty\u0022:\u0022No services\u0022,\u0022packagesTitle\u0022:\u0022Package updates\u0022,\u0022packagesDescription\u0022:\u0022Updates waiting on this server.\u0022,\u0022packagesTable\u0022:\u0022Available updates\u0022,\u0022package\u0022:\u0022Package\u0022,\u0022version\u0022:\u0022Version\u0022,\u0022kind\u0022:\u0022Type\u0022,\u0022size\u0022:\u0022Size\u0022,\u0022kinds\u0022:{\u0022security\u0022:\u0022Security\u0022,\u0022kernel\u0022:\u0022Kernel\u0022,\u0022regular\u0022:\u0022Update\u0022},\u0022upToDate\u0022:\u0022Everything is up to date\u0022,\u0022upToDateBody\u0022:\u0022There are no updates waiting.\u0022,\u0022lastChecked\u0022:\u0022Last checked\u0022,\u0022neverChecked\u0022:\u0022Not checked yet\u0022,\u0022checkNow\u0022:\u0022Check for updates\u0022,\u0022checking\u0022:\u0022Checking\u0022,\u0022updateAll\u0022:\u0022Update all\u0022,\u0022updateAllTitle\u0022:\u0022Update {n} packages?\u0022,\u0022updateAllBody\u0022:\u0022Services that use an updated library may restart.\u0022,\u0022updateSelected\u0022:\u0022Update selected\u0022,\u0022updateOne\u0022:\u0022Update\u0022,\u0022updating\u0022:\u0022Updating\u0022,\u0022securityCount\u0022:\u0022{n} security\u0022,\u0022totalCount\u0022:\u0022{n} updates\u0022,\u0022download\u0022:\u0022{size} to download\u0022,\u0022rebootTitle\u0022:\u0022A restart is needed\u0022,\u0022rebootBody\u0022:\u0022A kernel or core library was updated. Restart the server to use it.\u0022,\u0022reboot\u0022:\u0022Restart server\u0022,\u0022rebootConfirmTitle\u0022:\u0022Restart the server?\u0022,\u0022rebootConfirmBody\u0022:\u0022Everything on it is offline for a minute or two.\u0022,\u0022sshTitle\u0022:\u0022SSH keys\u0022,\u0022sshDescription\u0022:\u0022Which keys can sign in to which server. Tick a box to install or remove a key.\u0022,\u0022sshTable\u0022:\u0022SSH keys by server\u0022,\u0022sshKey\u0022:\u0022Key\u0022,\u0022sshCoverage\u0022:\u0022{n} of {total}\u0022,\u0022sshServers\u0022:\u0022Servers\u0022,\u0022addKey\u0022:\u0022Add key\u0022,\u0022addKeyTitle\u0022:\u0022Add an SSH key\u0022,\u0022addKeyBody\u0022:\u0022Paste the public key, the one that ends in .pub. Never paste a private key.\u0022,\u0022keyName\u0022:\u0022Name\u0022,\u0022keyNamePlaceholder\u0022:\u0022Laptop\u0022,\u0022keyNameRequired\u0022:\u0022Give the key a name.\u0022,\u0022publicKey\u0022:\u0022Public key\u0022,\u0022keyProblems\u0022:{\u0022empty\u0022:\u0022Paste the public key.\u0022,\u0022format\u0022:\u0022A public key is one line: the type, the key, and an optional comment.\u0022,\u0022type\u0022:\u0022This key type is not recognised. Use ssh-ed25519, ssh-rsa or ecdsa.\u0022,\u0022body\u0022:\u0022The key text looks damaged. Copy it again.\u0022,\u0022private\u0022:\u0022That is a private key. Never paste it. Paste the .pub file instead.\u0022},\u0022keyDetected\u0022:\u0022{type} key, {comment}\u0022,\u0022addedOn\u0022:\u0022Added\u0022,\u0022lastUsed\u0022:\u0022Last used\u0022,\u0022never\u0022:\u0022Never\u0022,\u0022installOnAll\u0022:\u0022Install on all servers\u0022,\u0022removeFromAll\u0022:\u0022Remove from all servers\u0022,\u0022deleteKey\u0022:\u0022Delete key\u0022,\u0022deleteKeyTitle\u0022:\u0022Delete {name}?\u0022,\u0022deleteKeyBody\u0022:\u0022The key is removed from every server it is installed on. Anyone using it can no longer sign in.\u0022,\u0022installedOn\u0022:\u0022{key} on {server}\u0022,\u0022noKeys\u0022:\u0022No SSH keys yet\u0022,\u0022noKeysBody\u0022:\u0022Add a public key, then choose the servers it can sign in to.\u0022,\u0022jobsTitle\u0022:\u0022Job queue\u0022,\u0022jobsDescription\u0022:\u0022Background work, by status. Retry what failed, or forget it.\u0022,\u0022jobsTable\u0022:\u0022Jobs\u0022,\u0022job\u0022:\u0022Job\u0022,\u0022queue\u0022:\u0022Queue\u0022,\u0022attempts\u0022:\u0022Attempts\u0022,\u0022when\u0022:\u0022When\u0022,\u0022status\u0022:\u0022Status\u0022,\u0022jobStatuses\u0022:{\u0022waiting\u0022:\u0022Waiting\u0022,\u0022active\u0022:\u0022Running\u0022,\u0022delayed\u0022:\u0022Delayed\u0022,\u0022completed\u0022:\u0022Done\u0022,\u0022failed\u0022:\u0022Failed\u0022},\u0022retry\u0022:\u0022Retry\u0022,\u0022forget\u0022:\u0022Forget\u0022,\u0022retryFailed\u0022:\u0022Retry all failed\u0022,\u0022forgetFailed\u0022:\u0022Forget all failed\u0022,\u0022forgetTitle\u0022:\u0022Forget {n} jobs?\u0022,\u0022forgetBody\u0022:\u0022They are removed from the queue and the history. This cannot be undone.\u0022,\u0022retryTitle\u0022:\u0022Retry {n} jobs?\u0022,\u0022retryBody\u0022:\u0022They go back to the queue and run again.\u0022,\u0022details\u0022:\u0022Details\u0022,\u0022errorLabel\u0022:\u0022Error\u0022,\u0022payloadLabel\u0022:\u0022Payload\u0022,\u0022noError\u0022:\u0022No error recorded.\u0022,\u0022close\u0022:\u0022Close\u0022,\u0022jobsEmpty\u0022:\u0022No jobs\u0022,\u0022of\u0022:\u0022{a}\\\/{b}\u0022,\u0022queueFilter\u0022:\u0022Queue\u0022,\u0022statusGroup\u0022:\u0022Job status\u0022,\u0022ar\u0022:false,\u0022totalOne\u0022:\u00221 update\u0022,\u0022totalTwo\u0022:\u0022{n} updates\u0022,\u0022totalFew\u0022:\u0022{n} updates\u0022,\u0022totalMany\u0022:\u0022{n} updates\u0022,\u0022forgetOne\u0022:\u0022Forget this job?\u0022,\u0022retryOne\u0022:\u0022Retry this job?\u0022,\u0022keyNoComment\u0022:\u0022{type} key\u0022,\u0022notAvailable\u0022:\u0022{action} is not available while the status is {state}.\u0022,\u0022justNow\u0022:\u0022just now\u0022},\u0022canForget\u0022:true,\u0022jobs\u0022:[{\u0022id\u0022:\u0022j1\u0022,\u0022name\u0022:\u0022SendInvoice\u0022,\u0022queue\u0022:\u0022mail\u0022,\u0022status\u0022:\u0022failed\u0022,\u0022attempts\u0022:3,\u0022maxAttempts\u0022:3,\u0022at\u0022:\u00222 min ago\u0022,\u0022error\u0022:\u0022SMTP timeout\\n  at send (mail.ts:12)\u0022,\u0022payload\u0022:\u0022{\\u0022invoice\\u0022:42}\u0022},{\u0022id\u0022:\u0022j2\u0022,\u0022name\u0022:\u0022ResizeImage\u0022,\u0022queue\u0022:\u0022media\u0022,\u0022status\u0022:\u0022active\u0022,\u0022attempts\u0022:1,\u0022at\u0022:\u0022now\u0022},{\u0022id\u0022:\u0022j3\u0022,\u0022name\u0022:\u0022Backup\u0022,\u0022queue\u0022:\u0022media\u0022,\u0022status\u0022:\u0022waiting\u0022,\u0022attempts\u0022:0,\u0022at\u0022:\u0022in 1 min\u0022}]}'))"
    x-on:nq-data-table-action="onAction($event)" x-on:nq-data-table-row-click="onRowClick($event)"
    x-on:retry="$event.detail.wait(Promise.resolve())" x-on:forget="$event.detail.wait(Promise.resolve())" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] sm:flex sm:items-start sm:justify-between sm:gap-4"><div class="flex flex-col gap-1.5">
            <h2 data-slot="card-title" class="text-label text-foreground">Job queue</h2>
            <div data-slot="card-description" class="text-body-sm text-muted-foreground">Background work, by status. Retry what failed, or forget it.</div>
        </div>
        <div class="mt-3 flex flex-wrap items-center gap-2 sm:mt-0" x-show="count('failed') > 0" style="display: none">
            <button data-slot="button"
     type="button"                         x-on:click="askRetry(failedIds())" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
</svg>Retry all failed</button>
                            <button data-slot="button"
     type="button"                         x-on:click="askForget(failedIds())" 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)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Forget all failed</button>
                    </div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-3"><template x-if="pageError">
            <div data-slot="alert" data-tone="danger" role="alert"
     x-data="nqAlert()" x-modelable="open" x-show="open"     x-on:nq:dismiss="pageError = 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="pageError"></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="group" aria-label="Job status" data-slot="job-status-counts" class="grid grid-cols-2 gap-2 sm:grid-cols-5">
                            <button type="button" data-status="waiting" x-on:click="toggle('waiting')" x-bind:aria-pressed="status === 'waiting' ? 'true' : 'false'"
                    class="flex flex-col items-start gap-0.5 rounded-control border border-border bg-card px-3 py-2 text-start transition-colors hover:bg-nq-hover aria-pressed:border-nq-focus aria-pressed:bg-nq-hover focus-visible:outline-1 focus-visible:outline-nq-focus">
                    <span class="text-caption text-muted-foreground">Waiting</span>
                    <span class="text-title tabular-nums text-foreground" x-text="String(count('waiting'))"></span>
                </button>
                            <button type="button" data-status="active" x-on:click="toggle('active')" x-bind:aria-pressed="status === 'active' ? 'true' : 'false'"
                    class="flex flex-col items-start gap-0.5 rounded-control border border-border bg-card px-3 py-2 text-start transition-colors hover:bg-nq-hover aria-pressed:border-nq-focus aria-pressed:bg-nq-hover focus-visible:outline-1 focus-visible:outline-nq-focus">
                    <span class="text-caption text-muted-foreground">Running</span>
                    <span class="text-title tabular-nums text-foreground" x-text="String(count('active'))"></span>
                </button>
                            <button type="button" data-status="delayed" x-on:click="toggle('delayed')" x-bind:aria-pressed="status === 'delayed' ? 'true' : 'false'"
                    class="flex flex-col items-start gap-0.5 rounded-control border border-border bg-card px-3 py-2 text-start transition-colors hover:bg-nq-hover aria-pressed:border-nq-focus aria-pressed:bg-nq-hover focus-visible:outline-1 focus-visible:outline-nq-focus">
                    <span class="text-caption text-muted-foreground">Delayed</span>
                    <span class="text-title tabular-nums text-foreground" x-text="String(count('delayed'))"></span>
                </button>
                            <button type="button" data-status="completed" x-on:click="toggle('completed')" x-bind:aria-pressed="status === 'completed' ? 'true' : 'false'"
                    class="flex flex-col items-start gap-0.5 rounded-control border border-border bg-card px-3 py-2 text-start transition-colors hover:bg-nq-hover aria-pressed:border-nq-focus aria-pressed:bg-nq-hover focus-visible:outline-1 focus-visible:outline-nq-focus">
                    <span class="text-caption text-muted-foreground">Done</span>
                    <span class="text-title tabular-nums text-foreground" x-text="String(count('completed'))"></span>
                </button>
                            <button type="button" data-status="failed" x-on:click="toggle('failed')" x-bind:aria-pressed="status === 'failed' ? 'true' : 'false'"
                    class="flex flex-col items-start gap-0.5 rounded-control border border-border bg-card px-3 py-2 text-start transition-colors hover:bg-nq-hover aria-pressed:border-nq-focus aria-pressed:bg-nq-hover focus-visible:outline-1 focus-visible:outline-nq-focus">
                    <span class="text-caption text-muted-foreground">Failed</span>
                    <span class="text-title tabular-nums text-foreground" x-text="String(count('failed'))"></span>
                </button>
                    </div>
        <div data-slot="data-table" x-data="nqDataTable([], JSON.parse('[{\u0022id\u0022:\u0022job\u0022,\u0022header\u0022:\u0022Job\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022queue\u0022,\u0022header\u0022:\u0022Queue\u0022,\u0022type\u0022:\u0022tag\u0022,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022mail\u0022,\u0022label\u0022:\u0022mail\u0022},{\u0022value\u0022:\u0022media\u0022,\u0022label\u0022:\u0022media\u0022}]},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022sortable\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022waiting\u0022,\u0022label\u0022:\u0022Waiting\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022active\u0022,\u0022label\u0022:\u0022Running\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022delayed\u0022,\u0022label\u0022:\u0022Delayed\u0022,\u0022tone\u0022:\u0022warning\u0022},{\u0022value\u0022:\u0022completed\u0022,\u0022label\u0022:\u0022Done\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022failed\u0022,\u0022label\u0022:\u0022Failed\u0022,\u0022tone\u0022:\u0022danger\u0022}]},{\u0022id\u0022:\u0022attempts\u0022,\u0022header\u0022:\u0022Attempts\u0022,\u0022type\u0022:\u0022number\u0022,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022when\u0022,\u0022header\u0022:\u0022When\u0022,\u0022type\u0022:\u0022text\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022label\u0022,\u0022pageSize\u0022:10,\u0022selectable\u0022:true,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022details\u0022},{\u0022id\u0022:\u0022retry\u0022,\u0022visibleWhen\u0022:{\u0022field\u0022:\u0022status\u0022,\u0022eq\u0022:\u0022failed\u0022}},{\u0022id\u0022:\u0022forget\u0022,\u0022group\u0022:\u0022danger\u0022,\u0022visibleWhen\u0022:{\u0022field\u0022:\u0022status\u0022,\u0022ne\u0022:\u0022active\u0022}}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    x-model="tableRows" class="flex min-w-0 flex-col gap-3">
            <div data-slot="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search…" aria-label="Search…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;queue&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="queue" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Queue
                        <span data-slot="badge" x-show="facetCount('queue')" x-text="facetSummary('queue')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;queue|mail&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    mail
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;queue|media&#039;]" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    media
</div></div>
                        <div x-show="facetCount('queue')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;queue&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Reset</div>
                        </div></div>
</template></div>
                    </div>
            <div data-slot="data-table-bulk-actions" role="toolbar" x-bind:aria-label="selectedText()" x-bind:hidden="selectedCount() === 0" hidden
            class="flex flex-wrap items-center gap-2 rounded-control bg-nq-selected py-1 ps-3 pe-1">
            <span aria-live="polite" class="me-auto text-label tabular-nums text-foreground" x-text="selectedText()"></span>
            <button data-slot="button"
     type="button"                         x-on:click="askRetry(retryable(selectedIds()))" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Retry</button>
                                    <button data-slot="button"
     type="button"                         x-on:click="askForget(forgettable(selectedIds()))" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control-sm px-2.5">
        Forget</button>            <button type="button" aria-label="Clear selection" x-on:click="clearSelection()"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
        </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Jobs"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Jobs"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 2) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                            <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                            <button type="button" role="checkbox" data-slot="checkbox" aria-label="Select all rows on this page" x-on:click="togglePage()"
                                x-bind:aria-checked="pageSelection() === 'all' ? 'true' : (pageSelection() === 'some' ? 'mixed' : 'false')"
                                x-bind:data-checked="pageSelection() === 'all' ? '' : null" x-bind:data-indeterminate="pageSelection() === 'some' ? '' : null"
                                aria-checked="false" 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 after:absolute after:-inset-1 align-middle">
                                <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="pageSelection() !== 'none'" style="display: none">
                                    <x-lucide-minus aria-hidden="true" x-show="pageSelection() === 'some'" style="display: none" />
                                    <x-lucide-check aria-hidden="true" x-show="pageSelection() === 'all'" style="display: none" />
                                </span>
                            </button>
                        </div>
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="job" x-show="shown['job']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('job')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('job', $event.shiftKey)"
                                    x-bind:class="sortOf('job') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Job</span>
                                    <svg aria-hidden="true" x-show="! sortOf('job')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('job') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('job') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="queue" x-show="shown['queue']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Queue
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('status')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('status', $event.shiftKey)"
                                    x-bind:class="sortOf('status') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Status</span>
                                    <svg aria-hidden="true" x-show="! sortOf('status')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="attempts" x-show="shown['attempts']"  x-bind:class="pad"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Attempts
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="when" x-show="shown['when']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            When
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No jobs</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, true)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                              x-on:click="rowClick(row, $event)"                             x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover cursor-pointer">
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-10 pe-0 align-middle whitespace-nowrap">
                                    <button type="button" role="checkbox" data-slot="checkbox" x-bind:aria-label="say('selectRow', row)" x-on:click="toggleRow(row)"
                                        aria-checked="false" x-bind:aria-checked="isSelected(row) ? 'true' : 'false'" x-bind:data-checked="isSelected(row) ? '' : null" x-bind:data-unchecked="isSelected(row) ? null : ''"
                                        x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" 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 after:absolute after:-inset-1 align-middle">
                                        <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="isSelected(row)" style="display: none"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
                                    </button>
                                </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="job" x-show="shown['job']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;job&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="queue" x-show="shown['queue']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span data-slot="badge" x-show="shownText(row, col(&#039;queue&#039;)) !== ''" x-bind:style="hueStyle(row, col(&#039;queue&#039;))" style="display: none"
                                                    class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-transparent bg-[var(--tag-soft)] px-1.5 text-caption font-medium text-[var(--tag-solid)]" x-text="shownText(row, col(&#039;queue&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="attempts" x-show="shown['attempts']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  tabular-nums" x-text="shownText(row, col(&#039;attempts&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="when" x-show="shown['when']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;when&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;details&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg>                                                                Details</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 1)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 1)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;retry&#039;, row)" x-bind:data-disabled="actionOff(row, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
</svg>                                                                Retry</div>
                                                        </div>
                                                    </template>
                                                                                                    <template x-if="actionOn(row, 2)">
                                                        <div role="none" class="contents">
                                                            <template x-if="sepBefore(row, 2)"><div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;forget&#039;, row)" x-bind:data-disabled="actionOff(row, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                                                Forget</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;details&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg>                                Details</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 1)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 1)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;retry&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 1) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 1) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
</svg>                                Retry</div>
                        </div>
                    </template>
                                    <template x-if="ctxRow && actionOn(ctxRow, 2)">
                        <div role="none" class="contents">
                            <template x-if="sepBefore(ctxRow, 2)"><div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
</template>                            <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="act(&#039;forget&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 2) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 2) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>                                Forget</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></div>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="detailOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground"><span x-text="detail ? detail.name : ''"></span></h2>
                <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="detail ? detail.queue + ' · ' + attemptsText() : ''"></span></p></div>
            <template x-if="detail">
                <div class="grid gap-3">
                    <div>
                        <h3 class="mb-1 text-label text-foreground">Error</h3>
                        <pre data-slot="job-error" dir="ltr" class="max-h-48 overflow-auto rounded-control border border-border bg-secondary p-3 font-mono text-caption whitespace-pre-wrap" x-text="detail.error || 'No error recorded.'"></pre>
                    </div>
                    <div x-show="detail.payload" style="display: none">
                        <h3 class="mb-1 text-label text-foreground">Payload</h3>
                        <pre data-slot="job-payload" dir="ltr" class="max-h-48 overflow-auto rounded-control border border-border bg-secondary p-3 font-mono text-caption whitespace-pre-wrap" x-text="detail.payload"></pre>
                    </div>
                </div>
            </template>
            <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="detailOpen = false" 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)]">
        Close</button></div>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="confirmOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><span x-text="confirmTitle"></span></h2>
            <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="confirmBody"></span></p></div>
        <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" 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>
            <template x-if="confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template>
            <template x-if="! confirmDanger"><button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmGo()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <span x-text="confirmLabel"></span></button>
</template></div>
        </div>
    </div>
</template>
</div>
</div>
</div>
```