{#snippet end()} {#if !formOpen} {/if} {/snippet} {#if formOpen}

{#snippet children({ id })} {/snippet} {#snippet children({ id })}

{/snippet}
				</Field>

<div class="flex items-center justify-end gap-2">
					<Button variant="ghost" icon={X} disabled={adding} onclick={closeForm}>
						Cancel
					</Button>
					<Button
						type="submit"
						variant={canAdd ? "primary" : "default"}
						icon={Plus}
						disabled={!canAdd}
						loading={adding}
					>
						Add key
					</Button>
				</div>
			</form>
		{/if}

{#if keys.length === 0}
			<SettingsEmpty message="No keys added yet" />
		{:else}
			<SettingsList>
				{#each keys as pubkey (pubkey.rkey)}
					<SettingsRow icon={KeyIcon} title={pubkey.name} stack>
						{#snippet meta()}
							{#if pubkey.fingerprint}
								<span
									class="typography-monospace-regular break-all text-foreground-muted"
								>
									{pubkey.fingerprint}
								</span>
							{/if}
							<span class="typography-paragraph-regular text-foreground-muted">
								added <TimeAgo value={pubkey.createdAt} variant="full" />
							</span>
						{/snippet}
						<Button
							variant="danger"
							icon={Trash}
							loading={deleting === pubkey.rkey}
							onclick={() => requestDelete(pubkey)}
						>
							Delete
						</Button>
					</SettingsRow>
				{/each}
			</SettingsList>
		{/if}
	</div>
</div>

<ConfirmModal
	bind:open={confirmOpen}
	title={`Delete ${pendingDelete?.name ?? "key"}?`}
	description="This removes the key from your account. You will need to add it again to push with it."
	confirmLabel="Delete key"
	loading={!!deleting}
	onconfirm={() => void remove()}
/>