settings.templ

package main

import (
	"fmt"
	"slices"
	"strings"

	"fiatjaf.com/nostr"

	"fiatjaf.com/nostr/eventstore/bleve"
	"github.com/fiatjaf/pyramid/global"
	"github.com/fiatjaf/pyramid/layout"
	"github.com/fiatjaf/pyramid/search"
)

templ settingsPage(loggedUser nostr.PubKey) {
	@layout.Layout(loggedUser, "settings") {
		<div class="max-w-4xl mx-auto">
			<!-- landlubber link -->
			<div class="mb-6 flex justify-end">
				@layout.LandlubberButton("")
			</div>
			<!-- relay metadata -->
			@layout.RelayMetadata(global.RelayMain,
				global.Settings.RelayName, global.Settings.RelayDescription, global.Settings.RelayIcon,
				global.Settings.Pinned)
			<!-- theme colors -->
			<form
				method="POST"
				action="/settings"
				class="space-y-6 mt-8"
				x-data={ `{
					accentColor: '`+global.Settings.Theme.AccentColor+`',
					backgroundColor: '`+global.Settings.Theme.BackgroundColor+`',
					textColor: '`+global.Settings.Theme.TextColor+`',
					secondaryBgColor: '`+global.Settings.Theme.SecondaryBackgroundColor+`',
					extraColor: '`+global.Settings.Theme.ExtraColor+`',
					baseColor: '`+global.Settings.Theme.BaseColor+`',
					headerTransparency: '`+global.Settings.Theme.HeaderTransparency+`',
					primaryFont: '`+global.Settings.Theme.PrimaryFont+`',
					secondaryFont: '`+global.Settings.Theme.SecondaryFont+`',
					saved: false,
					updateTheme() {
						document.documentElement.style.setProperty('--accent-color', this.accentColor);
						document.documentElement.style.setProperty('--bg-color', this.backgroundColor);
						document.documentElement.style.setProperty('--text-color', this.textColor);
						document.documentElement.style.setProperty('--secondary-bg-color', this.secondaryBgColor);
						document.documentElement.style.setProperty('--extra-color', this.extraColor);
						document.documentElement.style.setProperty('--base-color', this.baseColor);
						document.documentElement.style.setProperty('--header-transparency', this.headerTransparency + '%');
						document.documentElement.style.setProperty('--primary-font', this.primaryFont);
						document.documentElement.style.setProperty('--secondary-font', this.secondaryFont);
					},
					saveSettings(event) {
						setTimeout(async () => {
							const response = await fetch(this.$refs.form.action, {
								method: 'POST',
								body: new URLSearchParams(new FormData(this.$refs.form))
							});
							if (response.ok) {
								this.saved = true;
								setTimeout(() => this.saved = false, 2000);
							}
						}, 1)
					},
					resetTheme() {
						this.accentColor = '';
						this.backgroundColor = '';
						this.textColor = '';
						this.secondaryBgColor = '';
						this.extraColor = '';
						this.baseColor = '';
						this.headerTransparency = '60';
						this.primaryFont = 'Inter';
						this.secondaryFont = 'system-ui';
						setTimeout(() => this.$refs.form.submit(), 1)
					},
					enableCustomTheme() {
						function gen (baseLight, baseSat) {
							let h = Math.random() * 360
							let s = (baseSat + Math.random() * 10) / 100
							let l = (baseLight + Math.random() * 10) / 100
							const a = s * Math.min(l, 1 - l)
							const f = n => {
								const k = (n + h / 30) % 12
								const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
								return Math.round(255 * color).toString(16).padStart(2, '0')
							}
							return "#" + f(0) + f(8) + f(4)
						}

						this.accentColor = gen(60, 80);
						this.backgroundColor = gen(90, 50);
						this.textColor = gen(30, 60);
						this.secondaryBgColor = '#ffffff';
						this.extraColor = gen(50, 90);
						this.baseColor = '#000000';
						this.headerTransparency = '60';
						this.primaryFont = 'Inter';
						this.secondaryFont = 'sans';
						setTimeout(() => this.$refs.form.submit(), 1)
					}
				}` }
				x-init="updateTheme()"
				x-ref="form"
			>
				@layout.SubSectionTitle("theme colors")
				<div class="mb-4 themed:hidden">
					<button
						type="button"
						@click.prevent="enableCustomTheme()"
						class="cursor-pointer px-6 py-2 rounded-lg font-semibold bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-500 text-white shadow-md hover:shadow-lg"
					>
						enable custom theme
					</button>
				</div>
				<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 unthemed:hidden">
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">primary color</label>
						<input
							type="color"
							name="accent_color"
							x-model="accentColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">background color</label>
						<input
							type="color"
							name="background_color"
							x-model="backgroundColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">text color</label>
						<input
							type="color"
							name="text_color"
							x-model="textColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">secondary background color</label>
						<input
							type="color"
							name="secondary_background_color"
							x-model="secondaryBgColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">extra color</label>
						<input
							type="color"
							name="extra_color"
							x-model="extraColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">base color</label>
						<input
							type="color"
							name="base_color"
							x-model="baseColor"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300 cursor-pointer"
						/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">header transparency</label>
						<input
							type="range"
							name="header_transparency"
							min="0"
							max="100"
							value="100"
							x-model="headerTransparency"
							@input="updateTheme()"
							@blur="saveSettings()"
							class="w-full h-10 rounded border border-stone-300"
						/>
					</div>
					<!-- Font Settings -->
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">primary font</label>
						<select
							name="primary_font"
							x-model="primaryFont"
							@change="updateTheme()"
							@blur="saveSettings()"
							class="w-full px-3 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
						>
							@fontOptions()
						</select>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300">secondary font</label>
						<select
							name="secondary_font"
							x-model="secondaryFont"
							@change="updateTheme()"
							@blur="saveSettings()"
							class="w-full px-3 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
						>
							@fontOptions()
						</select>
					</div>
				</div>
				<div class="flex justify-between items-center mt-4 unthemed:hidden">
					<button
						type="button"
						@click="resetTheme()"
						class="cursor-pointer px-4 py-2 rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-700 dark:hover:bg-stone-600 text-stone-700 dark:text-stone-300 font-medium"
					>
						reset
					</button>
					<div
						x-show="saved"
						x-transition
						class="text-sm text-green-600 dark:text-green-400 font-medium"
					>
						saved!
					</div>
				</div>
			</form>
			<!-- General Settings Section -->
			<form
				method="POST"
				action="/settings"
				class="space-y-6 mt-8"
				x-data={ `{
					nip05Enabled: ` + fmt.Sprint(global.Settings.NIP05.Enabled) + `,
					maxInvitesPerPerson: ` + global.JSONString(global.Settings.GetMaxInvitesDisplay()) + `,
					requireCurrentTimestamp: ` + fmt.Sprint(global.Settings.RequireCurrentTimestamp) + `,
					acceptScheduledEvents: ` + fmt.Sprint(global.Settings.AcceptScheduledEvents) + `,
					allowEphemeralFromAnyone: ` + fmt.Sprint(global.Settings.AllowEphemeralFromAnyone) + `,
					validateSchema: ` + fmt.Sprint(global.Settings.ValidateSchema) + `,
					browseUri: ` + global.JSONString(global.Settings.BrowseURI) + `,
					linkUrl: ` + global.JSONString(global.Settings.LinkURL) + `,
					saved: false,
					async saveSettings() {
						const response = await fetch(this.$refs.form.action, {
							method: 'POST',
							body: new URLSearchParams(new FormData(this.$refs.form))
						})
						if (response.ok) {
							this.saved = true;
							setTimeout(() => this.saved = false, 2000)
						}
					}
				}` }
				x-ref="form"
			>
				@layout.SubSectionTitle("general")
				<div class="space-y-4">
					<div class="flex justify-between gap-4 items-center">
						<label for="require_current_timestamp" class="text-sm dark:text-stone-300 flex items-center">
							<input
								type="checkbox"
								name="require_current_timestamp"
								id="require_current_timestamp"
								class="w-4 h-6 rounded border-stone-300 dark:border-stone-600 mr-2"
								x-model="requireCurrentTimestamp"
								@change="saveSettings()"
							/>
							require event timestamps to be current (within ±60 seconds)
						</label>
						<input type="hidden" name="require_current_timestamp" value="off"/>
						<label for="accept_scheduled_events" class="text-sm dark:text-stone-300 flex items-center">
							<input
								type="checkbox"
								name="accept_scheduled_events"
								id="accept_scheduled_events"
								class="w-4 h-6 rounded border-stone-300 dark:border-stone-600 mr-2"
								x-model="acceptScheduledEvents"
								@change="saveSettings()"
							/>
							accept scheduled events
						</label>
						<input type="hidden" name="accept_scheduled_events" value="off"/>
					</div>
					<div class="flex items-center">
						<input
							type="checkbox"
							name="validate_schema"
							id="validate_schema"
							class="w-4 h-6 rounded border-stone-300 dark:border-stone-600"
							x-model="validateSchema"
							@change="saveSettings()"
						/>
						<label for="validate_schema" class="ml-2 text-sm font-medium dark:text-stone-300">
							validate main relay events against schema
						</label>
						<input type="hidden" name="validate_schema" value="off"/>
					</div>
					<div class="flex items-center">
						<input
							type="checkbox"
							name="allow_ephemeral_from_anyone"
							id="allow_ephemeral_from_anyone"
							class="w-4 h-6 rounded border-stone-300 dark:border-stone-600"
							x-model="allowEphemeralFromAnyone"
							@change="saveSettings()"
						/>
						<label for="allow_ephemeral_from_anyone" class="ml-2 text-sm font-medium dark:text-stone-300">
							allow ephemeral events from non-members
						</label>
						<input type="hidden" name="allow_ephemeral_from_anyone" value="off"/>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_invites_per_person">max invites per person</label>
						<input
							type="text"
							name="max_invites_per_person"
							id="max_invites_per_person"
							placeholder="e.g. 4 or 5/4/3/2/1"
							class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
							x-model="maxInvitesPerPerson"
							@blur="saveSettings()"
						/>
						<p class="text-xs text-stone-500 dark:text-stone-400 mt-1">
							use a single number or slash-separated values for the number of invites available at each level (e.g. "5/4/3/2")
						</p>
					</div>
					<div class="flex items-center">
						<input
							type="checkbox"
							name="nip05_enabled"
							id="nip05_enabled"
							class="w-4 h-6 rounded border-stone-300 dark:border-stone-600"
							x-model="nip05Enabled"
							@change="saveSettings()"
						/>
						<label for="nip05_enabled" class="ml-2 text-sm font-medium dark:text-stone-300">
							enable NIP-05 addresses for members
						</label>
						<input type="hidden" name="nip05_enabled" value="off"/>
					</div>
					<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="allowed kinds">allowed kinds</label>
					<div class="space-y-2">
						<textarea
							name="allowed_kinds_spec"
							placeholder="examples:
1, 3, 6, 7, 20, 21, 22, 1111
all
+1227, +30818, -7"
							class="w-full px-3 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100 h-24 font-mono text-sm"
							@blur="saveSettings()"
						>{ global.Settings.AllowedKindsSpec }</textarea>
						<p class="text-xs text-stone-500 dark:text-stone-400">
							comma-separated numbers set the full list, "all" allows all kinds, and "+/-" entries add or remove from the default list
						</p>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="browse_uri">URL pattern for the relay "browse" links</label>
						<div class="flex flex-wrap gap-2 items-center">
							<input
								type="text"
								name="browse_uri"
								id="browse_uri"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100 mb-3"
								x-model="browseUri"
								@blur="saveSettings()"
							/>
							<button
								type="button"
								@mousedown="browseUri = 'https://jumble.social/?r={url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								jumble
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://yakihonne.com/r/content?r={url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								yakihonne
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://fevela.me/?r={url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								fevela
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://wisp.talk/relay/{url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								wisp
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://grimoire.rocks/run?cmd=req%20{url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								grimoire
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://nosotros.app/feed?relay={url}&kind=1&limit=30&type=relayfeed'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								nosotros
							</button>
							<button
								type="button"
								@mousedown="browseUri = 'https://coracle.social/relays/{url}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								coracle
							</button>
						</div>
					</div>
					<div>
						<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="link_url">URL pattern for external links</label>
						<div class="flex flex-wrap gap-2 items-center">
							<input
								type="text"
								name="link_url"
								id="link_url"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100 mb-3"
								x-model="linkUrl"
								@blur="saveSettings()"
							/>
							<button
								type="button"
								@mousedown="linkUrl = 'nostr:{code}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								native
							</button>
							<button
								type="button"
								@mousedown="linkUrl = 'https://njump.me/{code}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								njump.me
							</button>
							<button
								type="button"
								@mousedown="linkUrl = 'https://grimoire.rocks/run?cmd=open%20{code}'"
								@mouseup="saveSettings()"
								class="cursor-pointer px-3 py-1 text-sm rounded bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500"
							>
								grimoire
							</button>
						</div>
					</div>
				</div>
				<div
					x-show="saved"
					x-transition
					class="text-sm text-green-600 dark:text-green-400 font-medium"
				>
					saved!
				</div>
			</form>
			<form
				method="POST"
				action="/settings"
				class="space-y-6 mt-8"
				x-data={ `{
					maxEventSize: ` + fmt.Sprint(global.Settings.Limits.MaxEventSize) + `,
					maxSubscriptionsOpen: ` + fmt.Sprint(global.Settings.Limits.MaxSubscriptionsOpen) + `,
					maxTotalCostOpen: ` + fmt.Sprint(global.Settings.Limits.MaxTotalCostOpen) + `,
					maxIndexableTags: ` + fmt.Sprint(global.Settings.Limits.MaxIndexableTags) + `,
					maxEntriesInFollowList: ` + fmt.Sprint(global.Settings.Limits.MaxEntriesInFollowList) + `,
					maxQueryLimit: ` + fmt.Sprint(global.Settings.Limits.MaxQueryLimit) + `,
					saved: false,
					async saveSettings() {
						const response = await fetch(this.$refs.form.action, {
							method: 'POST',
							body: new URLSearchParams(new FormData(this.$refs.form))
						})
						if (response.ok) {
							this.saved = true;
							setTimeout(() => this.saved = false, 2000)
						}
					}
				}` }
				x-ref="form"
			>
				@layout.SubSectionTitle("limits")
				<details>
					<summary class="cursor-pointer text-sm font-medium dark:text-stone-300">open</summary>
					<div class="space-y-4 mt-4">
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_event_size">max event size (in bytes)</label>
							<input
								type="number"
								name="max_event_size"
								id="max_event_size"
								min="1"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxEventSize"
								@blur="saveSettings()"
							/>
						</div>
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_subscriptions_open">max subscriptions open</label>
							<input
								type="number"
								name="max_subscriptions_open"
								id="max_subscriptions_open"
								min="0"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxSubscriptionsOpen"
								@blur="saveSettings()"
							/>
						</div>
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_total_cost_open">max total cost open</label>
							<input
								type="number"
								name="max_total_cost_open"
								id="max_total_cost_open"
								min="0"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxTotalCostOpen"
								@blur="saveSettings()"
							/>
						</div>
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_indexable_tags">max indexable tags per event</label>
							<input
								type="number"
								name="max_indexable_tags"
								id="max_indexable_tags"
								min="0"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxIndexableTags"
								@blur="saveSettings()"
							/>
						</div>
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_entries_in_follow_list">max entries in follow list (kind 3)</label>
							<input
								type="number"
								name="max_entries_in_follow_list"
								id="max_entries_in_follow_list"
								min="0"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxEntriesInFollowList"
								@blur="saveSettings()"
							/>
						</div>
						<div>
							<label class="block text-sm font-medium mb-2 dark:text-stone-300" for="max_query_limit">max query limit</label>
							<input
								type="number"
								name="max_query_limit"
								id="max_query_limit"
								min="0"
								class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-model="maxQueryLimit"
								@blur="saveSettings()"
							/>
						</div>
					</div>
				</details>
				<div
					x-show="saved"
					x-transition
					class="text-sm text-green-600 dark:text-green-400 font-medium"
				>
					saved!
				</div>
			</form>
			<!-- NIP-50 Search Section -->
			<div
				x-data={ `{
					saved: false,
					enableSearch: ` + fmt.Sprint(global.Settings.Search.Enable) + `,
					searchLanguages: ` + global.JSONString(global.Settings.Search.Languages) + `,
					prevLanguages: ` + global.JSONString(global.Settings.Search.Languages) + `,
					async saveSettings() {
						const response = await fetch(this.$refs.form.action, {
							method: 'POST',
							body: new URLSearchParams(new FormData(this.$refs.form))
						})
						if (response.ok) {
							this.saved = true;
							setTimeout(() => this.saved = false, 2000)
						}
					},
				}` }
			>
				<form
					method="POST"
					action="/settings"
					class="space-y-6 mt-8"
					x-ref="form"
				>
					@layout.SubSectionTitle("full-text search")
					<div class="flex gap-8 items-start">
						<div class="flex items-center">
							<div>
								<input
									type="checkbox"
									name="enable_search"
									id="enable_search"
									class="w-4 h-6 rounded border-stone-300 dark:border-stone-600"
									x-model="enableSearch"
									@change="saveSettings()"
								/>
								<label for="enable_search" class="ml-2 text-sm dark:text-stone-300">
									enable NIP-50 full-text search
								</label>
								<input type="hidden" name="enable_search" value="off"/>
								<!-- Search Statistics -->
								<div class="mt-4 rounded-lg" x-show="enableSearch">
									{{ searchStats, _ := search.GetStats() }}
									<div class="text-sm space-y-1">
										<div>
											<span class="font-medium text-stone-700 dark:text-stone-300">indexed documents:</span>
											<span class="text-stone-600 dark:text-stone-400">{ searchStats.DocumentCount }</span>
										</div>
										<div>
											<span class="font-medium text-stone-700 dark:text-stone-300">search last enabled:</span>
											<span class="text-stone-600 dark:text-stone-400">
												if searchStats.LastSearchOn.IsZero() {
													never
												} else {
													{ searchStats.LastSearchOn.Format("2006-01-02 15:04:05") }
												}
											</span>
										</div>
										<div>
											<span class="font-medium text-stone-700 dark:text-stone-300">last reindex:</span>
											<span class="text-stone-600 dark:text-stone-400">
												if searchStats.LastReindex.IsZero() {
													never
												} else {
													{ searchStats.LastReindex.Format("2006-01-02 15:04:05") }
												}
											</span>
										</div>
										<div>
											<span class="font-medium text-stone-700 dark:text-stone-300">languages last changed:</span>
											<span class="text-stone-600 dark:text-stone-400">
												if searchStats.LastLanguagesChange.IsZero() {
													never
												} else {
													{ searchStats.LastLanguagesChange.Format("2006-01-02 15:04:05") }
												}
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div x-show="enableSearch" x-transition class="flex-1 max-w-md">
							{{ selectedLanguages := global.Settings.Search.Languages }}
							<label class="block text-sm font-medium mb-2 dark:text-stone-300">languages (current: { strings.Join(selectedLanguages, ", ") })</label>
							<select
								name="search_languages"
								multiple
								size="6"
								class="w-full h-24 px-3 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
								x-ref="languageSelect"
								@blur="saveSettings()"
							>
								for _, lang := range bleve.SupportedLanguages {
									{{ code := strings.ToLower(lang.IsoCode639_1().String()) }}
									{{ name := lang.String() }}
									<option value={ code } selected?={ slices.Contains(selectedLanguages, code) }>{ name }</option>
								}
							</select>
							<p class="text-xs text-stone-500 dark:text-stone-400">
								notes will be judged to be of one of these languages and indexed properly, ctrl+click to select multiple.
							</p>
						</div>
					</div>
					<div
						x-show="saved"
						x-transition
						class="text-sm text-green-600 dark:text-green-400 font-medium"
					>
						saved!
					</div>
				</form>
				<div class="mt-4" x-show={ "enableSearch && " + global.JSONString(search.ShouldShowReindexButton()) }>
					<form method="POST" action="/search/reindex" onsubmit="return confirm('this will delete the current search index and rebuild it from scratch. this may take a while for large databases. continue?');">
						<button
							type="submit"
							class="cursor-pointer px-6 py-2 rounded-lg font-semibold bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-500 text-white shadow-md hover:shadow-lg"
						>
							reindex everything
						</button>
					</form>
				</div>
			</div>
			<!-- Add Root Member Section -->
			<form
				method="POST"
				action="/settings"
				class="space-y-4 mt-8"
				onsubmit="return confirm('this will invite a new root member with full administrative privileges. continue?');"
			>
				@layout.SubSectionTitle("add new root member")
				<p class="text-sm text-stone-600 dark:text-stone-400">
					root users have as much power as you. proceed with maximum caution.
				</p>
				<div class="flex flex-wrap gap-3 items-center">
					<input
						type="text"
						name="root_member_pubkey"
						placeholder="npub1... or hex pubkey"
						required
						class="flex-1 min-w-[220px] px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100 font-mono text-sm"
					/>
					<button
						type="submit"
						class="cursor-pointer px-4 py-2 rounded bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-500 text-white font-medium"
					>
						invite root member
					</button>
				</div>
			</form>
			<!-- FTP Server Settings Section -->
			<form
				method="POST"
				action="/settings"
				class="space-y-6 mt-8"
				x-data={ `{
					ftpEnabled: ` + fmt.Sprint(global.Settings.FTP.Enabled) + `,
					ftpPassword: '` + global.Settings.FTP.Password + `',
					saved: false,
					async saveSettings() {
						const response = await fetch(this.$refs.form.action, {
							method: 'POST',
							body: new URLSearchParams(new FormData(this.$refs.form))
						})
						if (response.ok) {
							this.saved = true;
							setTimeout(() => this.saved = false, 2000)
						}
					}
				}` }
				x-ref="form"
			>
				@layout.SubSectionTitle("ftp server")
				<div class="space-y-4">
					<div class="flex items-center">
						<input
							type="checkbox"
							name="ftp_enabled"
							id="ftp_enabled"
							class="w-4 h-6 rounded border-stone-300 dark:border-stone-600"
							x-model="ftpEnabled"
							@change="saveSettings()"
						/>
						<label for="ftp_enabled" class="ml-2 text-sm font-medium dark:text-stone-300">
							enable FTP (SFTP) server for full read/write access to all events and blobs
						</label>
						<input type="hidden" name="ftp_enabled" value="off"/>
					</div>
					<div class="mt-4" x-show="ftpEnabled">
						<label class="block text-sm font-medium mb-2 dark:text-stone-300" id="ftp_password">password</label>
						<input
							name="ftp_password"
							id="ftp_password"
							placeholder="password for FTP server, please pick something big and unguessable"
							class="w-full px-4 py-2 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-700 dark:text-stone-100"
							x-model="ftpPassword"
							@blur="saveSettings()"
						/>
					</div>
					<div x-show="ftpEnabled && ftpPassword" x-transition>
						<div class="mt-4 p-4 bg-stone-50 dark:bg-stone-800 rounded-lg">
							<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
								<div>
									<label class="block font-medium mb-2 dark:text-stone-300">connection info</label>
									<div class="text-stone-600 dark:text-stone-400">
										<div>port: <span class="font-mono">{ global.S.SFTPPort }</span></div>
										<div>username: <span class="font-mono">admin</span></div>
										<div>password: <span class="font-mono" x-text="ftpPassword"></span></div>
									</div>
								</div>
								<div>
									<label class="block font-medium mb-2 dark:text-stone-300">ssh public key fingerprint</label>
									<div class="text-stone-600 dark:text-stone-400 font-mono text-xs break-all">
										{ getSSHPublicKey() }
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div
					x-show="saved"
					x-transition
					class="text-sm text-green-600 dark:text-green-400 font-medium"
				>
					saved!
				</div>
			</form>
			{{ systemStats := getSystemStats() }}
			{{ relayClients, relayListeners := relay.Stats() }}
			<!-- System Section -->
			<div
				class="mt-8"
				x-data={ `{
					restarting: false,
					restartResult: '',
					async restartServer() {
						this.restarting = true;
						this.restartResult = '';
						try {
							const response = await fetch('/restart', { method: 'POST' });
							if (response.ok) {
								this.restartResult = 'restart triggered. the page will refresh in 5 seconds.';
								setTimeout(() => location.reload(), 5000);
								return;
							}
							const result = await response.text();
							this.restartResult = 'restart failed: ' + result;
						} catch (error) {
							if (error.message === 'Failed to fetch') {
								this.restartResult = 'restart triggered. the page will refresh in 5 seconds.';
								setTimeout(() => location.reload(), 5000);
								return;
							}
							this.restartResult = 'restart failed: ' + error.message;
						} finally {
							this.restarting = false;
						}
					}
				}` }
			>
				@layout.SubSectionTitle("system")
				{{ cpuCount := len(systemStats.CPUUsages) }}
				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
					<div class="bg-white dark:bg-stone-800 rounded-lg border border-stone-200 dark:border-stone-700 p-4">
						<div class="text-sm font-medium text-stone-700 dark:text-stone-300">cpu usage</div>
						if cpuCount <= 1 {
							<div class="mt-1 text-lg text-stone-900 dark:text-stone-100">total: { systemStats.CPUUsage }</div>
							<div class="text-xs text-stone-500 dark:text-stone-400">pyramid: { systemStats.CPUProcess }</div>
						} else {
							<div class="mt-1 text-sm text-stone-600 dark:text-stone-400">total: { systemStats.CPUUsage }</div>
							<div class="text-xs text-stone-500 dark:text-stone-400">pyramid: { systemStats.CPUProcess }</div>
							<div class="mt-3 overflow-x-auto">
								<table class="w-full text-sm">
									<thead>
										<tr class="text-left text-stone-500 dark:text-stone-400">
											<th class="py-1">cpu</th>
											<th class="py-1 text-right">usage</th>
										</tr>
									</thead>
									<tbody>
										for i, usage := range systemStats.CPUUsages {
											<tr class="border-t border-stone-100 dark:border-stone-700">
												<td class="py-1 text-stone-600 dark:text-stone-300">cpu { i }</td>
												<td class="py-1 text-right text-stone-900 dark:text-stone-100">{ fmt.Sprintf("%.1f%%", usage) }</td>
											</tr>
										}
									</tbody>
								</table>
							</div>
						}
					</div>
					<div class="bg-white dark:bg-stone-800 rounded-lg border border-stone-200 dark:border-stone-700 p-4">
						<div class="text-sm font-medium text-stone-700 dark:text-stone-300">memory usage</div>
						<div class="mt-1 text-lg text-stone-900 dark:text-stone-100">total: { systemStats.Memory }</div>
						<div class="text-xs text-stone-500 dark:text-stone-400">pyramid: { systemStats.MemoryProcess }</div>
					</div>
				</div>
				<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
					<div class="bg-white dark:bg-stone-800 rounded-lg border border-stone-200 dark:border-stone-700 p-4">
						<div class="text-sm font-medium text-stone-700 dark:text-stone-300">server</div>
						<div class="mt-1 text-stone-900 dark:text-stone-400">domain: { global.Settings.Domain }</div>
						<div class="mt-1 text-stone-900 dark:text-stone-100">host: <span class="font-mono">{ global.S.Host }</span></div>
						<div class="mt-1 text-stone-900 dark:text-stone-100">port: <span class="font-mono">{ global.S.Port }</span></div>
						if global.S.Port == "443" {
							<div class="text-sm text-stone-600 dark:text-stone-400">managing TLS certificates</div>
						}
					</div>
					<div class="bg-white dark:bg-stone-800 rounded-lg border border-stone-200 dark:border-stone-700 p-4">
						<div class="text-sm font-medium text-stone-700 dark:text-stone-300">relay</div>
						<div class="mt-1 text-lg text-stone-900 dark:text-stone-100">clients: { relayClients }</div>
						<div class="text-xs text-stone-500 dark:text-stone-400">subscriptions: { relayListeners }</div>
						<div class="text-right text-sm text-stone-700 dark:text-stone-200 mt-4">
							<a href="/clients" target="_blank" class="cursor-pointer hover:underline hover:text-stone-400">/clients</a>
							<a href="/log" target="_blank" class="ml-4 cursor-pointer hover:underline hover:text-stone-400">/log</a>
						</div>
					</div>
					<div class="bg-white dark:bg-stone-800 rounded-lg border border-stone-200 dark:border-stone-700 p-4">
						<div class="text-sm font-medium text-stone-700 dark:text-stone-300">data usage</div>
						<div class="mt-1 text-lg text-stone-900 dark:text-stone-100">disk used: { systemStats.DiskUsed } / { systemStats.DiskTotal } ({ systemStats.DiskUsedPct })</div>
						<div class="text-sm text-stone-600 dark:text-stone-400">pyramid: { systemStats.DataSize } ({ global.S.DataPath })</div>
					</div>
				</div>
				<div class="mt-4">
					<button
						type="button"
						@click="confirm('this will restart the pyramid server. continue?') ? restartServer() : null"
						:disabled="restarting"
						class="cursor-pointer inline-block px-4 py-2 rounded bg-stone-700 hover:bg-stone-800 disabled:bg-stone-400 text-white font-medium"
					>
						<span x-show="!restarting">restart pyramid</span>
						<span x-show="restarting">restarting...</span>
					</button>
					<div
						x-show="restartResult"
						x-transition
						class="mt-2 text-sm"
						:class="restartResult.includes('failed') ? 'text-red-600 dark:text-red-400' : 'text-emerald-700 dark:text-emerald-300'"
						x-text="restartResult"
					></div>
				</div>
			</div>
			if !global.S.NoAutoUpdates {
				<!-- update Section -->
				<div
					class="mt-8"
					x-data={ `{
				customUpdateSource: ` + global.JSONString(customUpdateSource) + `,
				updating: false,
				updateResult: '',
				setCustomUpdateSource() {
					const nextSource = prompt('paste a github repo, github release, or direct url', this.customUpdateSource || '')
					if (nextSource === null) return
					this.customUpdateSource = nextSource.trim()
					setTimeout(() => this.$refs.customUpdateForm.submit(), 500)
				},
				async performUpdate() {
					this.updating = true;
					this.updateResult = '';
						try {
							const response = await fetch('/update', {
								method: 'POST',
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded',
								}
							});
							if (response.status === 502) {
								// treat 502 as success (server restarting during update)
								this.updateResult = 'update successful (probably, if you have a reverse-proxy). the page will refresh in 10 seconds.'
								setTimeout(() => location.reload(), 10000)
								return
							}
							const result = await response.text();
							this.updateResult = 'update failed: ' + result;
						} catch (error) {
							if (error.message === 'Failed to fetch') {
								// this means we have probably succeeded
								this.updateResult = 'update successful (probably). the page will refresh in 10 seconds.'
								setTimeout(() => location.reload(), 10000)
								return
							}
							this.updateResult = 'fetch call failed: ' + error.message;
						} finally {
							this.updating = false;
					}
				},
				versionToNumber (versionName) {
					if (versionName.startsWith('v')) versionName = versionName.slice(1)
					return versionName.split('.').map((n, i) => parseInt(n) * 10**(10-i*3)).reduce((acc, n) => acc + n, 0)
				}
			}` }
				>
					@layout.SubSectionTitle("update")
					<form method="POST" action="/settings" x-ref="customUpdateForm">
						<input type="hidden" name="custom_update_source" x-model="customUpdateSource"/>
					</form>
					<p class="text-sm text-stone-600 dark:text-stone-400 mb-4">
						<div>current version: <span class="text-stone-600 dark:text-stone-400" x-ref="currentVersion">{ currentVersion }</span></div>
						<div>
							if customUpdateSource != "" {
								custom version: <span class="text-stone-600 dark:text-stone-400" x-ref="latestVersion"><a class="hover:font-medium underline underline-offset-4" href={ templ.SafeURL(customUpdateSource) } target="_blank">{ latestVersion.name }</a></span>
							} else {
								latest version: <span class="text-stone-600 dark:text-stone-400" x-ref="latestVersion"><a class="hover:font-medium underline underline-offset-4" href={ templ.SafeURL("https://github.com/fiatjaf/pyramid/releases/tag/" + latestVersion.name) } target="_blank">{ latestVersion.name }</a></span>
							}
							<button
								type="button"
								@click="setCustomUpdateSource()"
								class="ml-2 inline-flex items-center justify-center text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200"
								aria-label="set custom update source"
								title="set custom update source"
							>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
									<path d="M13.586 3.586a2 2 0 0 1 2.828 2.828l-9.5 9.5a1 1 0 0 1-.39.242l-3.5 1.25a.5.5 0 0 1-.64-.64l1.25-3.5a1 1 0 0 1 .242-.39l9.5-9.5Z"></path>
									<path d="M12.172 5 15 7.828"></path>
								</svg>
							</button>
						</div>
					</p>
					<div class="mt-2">
						<button
							type="button"
							@click="confirm('this will download the new binary, replace the current one and restart the server, are you ok to continue?') ? performUpdate() : null"
							:disabled="$refs.latestVersion.innerText === '' || (!customUpdateSource && versionToNumber($refs.latestVersion.innerText) <= versionToNumber($refs.currentVersion.innerText)) || updating"
							class="cursor-pointer inline-block px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-400 text-white font-medium"
						>
							if customUpdateSource != "" {
								<span x-show="!updating">update to custom version</span>
							} else {
								<span x-show="!updating">update pyramid</span>
							}
							<span x-show="updating">updating...</span>
						</button>
						<div
							x-show="updateResult"
							x-transition
							class="mt-2 text-sm"
							:class="updateResult.includes('failed') ? 'text-red-600 dark:text-red-400' : 'text-emerald-800 dark:text-emerald-300'"
							x-text="updateResult"
						></div>
					</div>
				</div>
			}
		</div>
	}
}

templ fontOptions() {
	<option value="var(--font-sans)">sans</option>
	<option value="var(--font-serif)">serif</option>
	<option value="var(--font-mono)">monospace</option>
	for font := range  layout.FontOptionsImports {
		<option>{ font }</option>
	}
}