frontend/src/lib/components/admin/Settings/General.svelte

<script lang="ts">
	import DOMPurify from "dompurify";
	import { v4 as uuidv4 } from "uuid";

	import {
		getBackendConfig,
		getVersionUpdates,
		getWebhookUrl,
		updateWebhookUrl,
	} from "$lib/apis";
	import {
		getAdminConfig,
		getLdapConfig,
		getLdapServer,
		updateAdminConfig,
		updateLdapConfig,
		updateLdapServer,
	} from "$lib/apis/auths";
	import { getBanners, setBanners } from "$lib/apis/configs";
	import { getGroups } from "$lib/apis/groups";
	import SensitiveInput from "$lib/components/common/SensitiveInput.svelte";
	import Switch from "$lib/components/common/Switch.svelte";
	import Tooltip from "$lib/components/common/Tooltip.svelte";
	import { REXPRO_BUILD_HASH, REXPRO_VERSION } from "$lib/constants";
	import { banners as _banners, config, showChangelog } from "$lib/stores";
	import type { Banner } from "$lib/types";
	import { compareVersion } from "$lib/utils";
	import { onMount, getContext } from "svelte";
	import { toast } from "svelte-sonner";
	import Textarea from "$lib/components/common/Textarea.svelte";
	import Banners from "./Interface/Banners.svelte";

	const i18n = getContext("i18n");

	export let saveHandler: Function;

	let updateAvailable = null;
	let version = {
		current: "",
		latest: "",
	};

	let adminConfig = null;
	let webhookUrl = "";
	let groups = [];

	let banners: Banner[] = [];

	// LDAP
	let ENABLE_LDAP = false;
	let LDAP_SERVER = {
		label: "",
		host: "",
		port: "",
		attribute_for_mail: "mail",
		attribute_for_username: "uid",
		app_dn: "",
		app_dn_password: "",
		search_base: "",
		search_filters: "",
		use_tls: false,
		certificate_path: "",
		ciphers: "",
	};

	const checkForVersionUpdates = async () => {
		updateAvailable = null;
		version = await getVersionUpdates(localStorage.token).catch((error) => {
			return {
				current: REXPRO_VERSION,
				latest: REXPRO_VERSION,
			};
		});

		console.info(version);

		updateAvailable = compareVersion(version.latest, version.current);
		console.info(updateAvailable);
	};

	const updateLdapServerHandler = async () => {
		if (!ENABLE_LDAP) return;
		const res = await updateLdapServer(
			localStorage.token,
			LDAP_SERVER,
		).catch((error) => {
			toast.error(`${error}`);
			return null;
		});
		if (res) {
			toast.success($i18n.t("LDAP server updated"));
		}
	};

	const updateBanners = async () => {
		_banners.set(await setBanners(localStorage.token, banners));
	};

	const updateHandler = async () => {
		webhookUrl = await updateWebhookUrl(localStorage.token, webhookUrl);
		const res = await updateAdminConfig(localStorage.token, adminConfig);
		await updateLdapConfig(localStorage.token, ENABLE_LDAP);
		await updateLdapServerHandler();

		await updateBanners();

		await config.set(await getBackendConfig());

		if (res) {
			saveHandler();
		} else {
			toast.error($i18n.t("Failed to update settings"));
		}
	};

	onMount(async () => {
		if ($config?.features?.enable_version_update_check) {
			checkForVersionUpdates();
		}

		await Promise.all([
			(async () => {
				adminConfig = await getAdminConfig(localStorage.token);
			})(),

			(async () => {
				webhookUrl = await getWebhookUrl(localStorage.token);
			})(),
			(async () => {
				LDAP_SERVER = await getLdapServer(localStorage.token);
			})(),
			(async () => {
				groups = await getGroups(localStorage.token);
			})(),
		]);

		const ldapConfig = await getLdapConfig(localStorage.token);
		ENABLE_LDAP = ldapConfig.ENABLE_LDAP;

		banners = await getBanners(localStorage.token);
	});
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={async () => {
		updateHandler();
	}}
>
	<div class="space-y-3 overflow-y-scroll scrollbar-hidden h-full">
		{#if adminConfig !== null}
			<div class="">
				<div class="mb-3.5">
					<div class=" mt-0.5 mb-2.5 text-base font-medium">
						{$i18n.t("General")}
					</div>

					<hr
						class=" border-gray-100/30 dark:border-gray-850/30 my-2"
					/>

					<div class="mb-2.5">
						<div
							class=" mb-1 text-xs font-medium flex space-x-2 items-center"
						>
							<div>
								{$i18n.t("Version")}
							</div>
						</div>
						<div class="flex w-full justify-between items-center">
							<div
								class="flex flex-col text-xs text-gray-700 dark:text-gray-200"
							>
								<div class="flex gap-1">
									<Tooltip content={REXPRO_BUILD_HASH}>
										v{REXPRO_VERSION}
									</Tooltip>

									{#if $config?.features?.enable_version_update_check}
										<a
											href="https://github.com/rexpro-ai/rexpro-ai/releases/tag/v{version.latest}"
											target="_blank"
										>
											{updateAvailable === null
												? $i18n.t(
														"Checking for updates...",
													)
												: updateAvailable
													? `(v${version.latest} ${$i18n.t("available!")})`
													: $i18n.t("(latest)")}
										</a>
									{/if}
								</div>
							</div>

							{#if $config?.features?.enable_version_update_check}
								<button
									class=" text-xs px-3 py-1.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-lg font-medium"
									type="button"
									on:click={() => {
										checkForVersionUpdates();
									}}
								>
									{$i18n.t("Check for updates")}
								</button>
							{/if}
						</div>
					</div>

					<div class="mb-2.5">
						<div class="flex w-full justify-between items-center">
							<div class="text-xs pr-2">
								<div class="">
									{$i18n.t("Help")}
								</div>
								<div class=" text-xs text-gray-500">
									{$i18n.t(
										"Discover how to use rexpro-ai and seek support from the community.",
									)}
								</div>
							</div>

							<a
								class="flex-shrink-0 text-xs font-medium underline"
								href="https://docs.openrexpro.com/"
								target="_blank"
							>
								{$i18n.t("Documentation")}
							</a>
						</div>
					</div>

					<div class="mb-2.5">
						<div class="flex w-full justify-between items-center">
							<div class="text-xs pr-2">
								<div class="">
									{$i18n.t("License")}
								</div>

								{#if $config?.license_metadata}
									<a
										href="https://docs.openrexpro.com/enterprise"
										target="_blank"
										class="text-gray-500 mt-0.5"
									>
										<span
											class=" capitalize text-black dark:text-white"
											>{$config?.license_metadata?.type}
											license</span
										>
										registered to
										<span
											class=" capitalize text-black dark:text-white"
											>{$config?.license_metadata
												?.organization_name}</span
										>
										for
										<span
											class=" font-medium text-black dark:text-white"
											>{$config?.license_metadata
												?.seats ?? "Unlimited"} users.</span
										>
									</a>
									{#if $config?.license_metadata?.html}
										<div class="mt-0.5">
											{@html DOMPurify.sanitize(
												$config?.license_metadata?.html,
											)}
										</div>
									{/if}
								{:else}
									<a
										class=" text-xs hover:underline"
										href="https://docs.openrexpro.com/enterprise"
										target="_blank"
									>
										<span class="text-gray-500">
											{$i18n.t(
												"Upgrade to a licensed plan for enhanced capabilities, including custom theming and branding, and dedicated support.",
											)}
										</span>
									</a>
								{/if}
							</div>

							<!-- <button
								class="flex-shrink-0 text-xs px-3 py-1.5 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-lg font-medium"
							>
								{$i18n.t('Activate')}
							</button> -->
						</div>
					</div>
				</div>

				<div class="mb-3">
					<div class=" mt-0.5 mb-2.5 text-base font-medium">
						{$i18n.t("Authentication")}
					</div>

					<hr
						class=" border-gray-100/30 dark:border-gray-850/30 my-2"
					/>

					<div class="  mb-2.5 flex w-full justify-between">
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Default User Role")}
						</div>
						<div class="flex items-center relative">
							<select
								class="w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
								bind:value={adminConfig.DEFAULT_USER_ROLE}
								placeholder={$i18n.t("Select a role")}
							>
								<option value="pending"
									>{$i18n.t("pending")}</option
								>
								<option value="user">{$i18n.t("user")}</option>
								<option value="admin">{$i18n.t("admin")}</option
								>
							</select>
						</div>
					</div>

					<div class="  mb-2.5 flex w-full justify-between">
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Default Group")}
						</div>
						<div class="flex items-center relative">
							<select
								class="w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
								bind:value={adminConfig.DEFAULT_GROUP_ID}
								placeholder={$i18n.t("Select a group")}
							>
								<option value={""}>None</option>
								{#each groups as group}
									<option value={group.id}
										>{group.name}</option
									>
								{/each}
							</select>
						</div>
					</div>

					<div class=" mb-2.5 flex w-full justify-between pr-2">
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Enable New Sign Ups")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_SIGNUP} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t(
								"Show Admin Details in Account Pending Overlay",
							)}
						</div>

						<Switch bind:state={adminConfig.SHOW_ADMIN_DETAILS} />
					</div>

					{#if adminConfig.SHOW_ADMIN_DETAILS}
						<div class="mb-2.5 w-full justify-between">
							<div class="flex w-full justify-between">
								<div class=" self-center text-xs font-medium">
									{$i18n.t("Admin Contact Email")}
								</div>
							</div>

							<div class="flex mt-2 space-x-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
									type="email"
									placeholder={$i18n.t(
										"Leave empty to use first admin user",
									)}
									bind:value={adminConfig.ADMIN_EMAIL}
								/>
							</div>
						</div>
					{/if}

					<div class="mb-2.5">
						<div class=" self-center text-xs font-medium mb-2">
							{$i18n.t("Pending User Overlay Title")}
						</div>
						<Textarea
							placeholder={$i18n.t(
								"Enter a title for the pending user info overlay. Leave empty for default.",
							)}
							bind:value={adminConfig.PENDING_USER_OVERLAY_TITLE}
						/>
					</div>

					<div class="mb-2.5">
						<div class=" self-center text-xs font-medium mb-2">
							{$i18n.t("Pending User Overlay Content")}
						</div>
						<Textarea
							placeholder={$i18n.t(
								"Enter content for the pending user info overlay. Leave empty for default.",
							)}
							bind:value={
								adminConfig.PENDING_USER_OVERLAY_CONTENT
							}
						/>
					</div>

					<div class="mb-2.5 flex w-full justify-between pr-2">
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Enable API Keys")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_API_KEYS} />
					</div>

					{#if adminConfig?.ENABLE_API_KEYS}
						<div class="mb-2.5 flex w-full justify-between pr-2">
							<div class=" self-center text-xs font-medium">
								{$i18n.t("API Key Endpoint Restrictions")}
							</div>

							<Switch
								bind:state={
									adminConfig.ENABLE_API_KEYS_ENDPOINT_RESTRICTIONS
								}
							/>
						</div>

						{#if adminConfig?.ENABLE_API_KEYS_ENDPOINT_RESTRICTIONS}
							<div class=" flex w-full flex-col pr-2 mb-2.5">
								<div class=" text-xs font-medium">
									{$i18n.t("Allowed Endpoints")}
								</div>

								<input
									class="w-full mt-1 text-sm dark:text-gray-300 bg-transparent outline-hidden"
									type="text"
									placeholder={`e.g.) /api/v1/messages, /api/v1/channels`}
									bind:value={
										adminConfig.API_KEYS_ALLOWED_ENDPOINTS
									}
								/>

								<div
									class="mt-2 text-xs text-gray-400 dark:text-gray-500"
								>
									<a
										href="https://docs.openrexpro.com/reference/api-endpoints"
										target="_blank"
										class=" text-gray-300 font-medium underline"
									>
										{$i18n.t(
											"To learn more about available endpoints, visit our documentation.",
										)}
									</a>
								</div>
							</div>
						{/if}
					{/if}

					<div class=" mb-2.5 w-full justify-between">
						<div class="flex w-full justify-between">
							<div class=" self-center text-xs font-medium">
								{$i18n.t("JWT Expiration")}
							</div>
						</div>

						<div class="flex mt-2 space-x-2">
							<input
								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
								type="text"
								placeholder={`e.g.) "30m","1h", "10d". `}
								bind:value={adminConfig.JWT_EXPIRES_IN}
							/>
						</div>

						<div
							class="mt-2 text-xs text-gray-400 dark:text-gray-500"
						>
							{$i18n.t("Valid time units:")}
							<span class=" text-gray-300 font-medium"
								>{$i18n.t(
									"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.",
								)}</span
							>
						</div>

						{#if adminConfig.JWT_EXPIRES_IN === "-1"}
							<div class="mt-2 text-xs">
								<div
									class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-lg px-3 py-2"
								>
									<div>
										<span class=" font-medium"
											>{$i18n.t("Warning")}:</span
										>
										<span
											><a
												href="https://docs.openrexpro.com/reference/env-configuration#jwt_expires_in"
												target="_blank"
												class=" underline"
												>{$i18n.t(
													"No expiration can pose security risks.",
												)}
											</a></span
										>
									</div>
								</div>
							</div>
						{/if}
					</div>

					<div class=" space-y-3">
						<div class="mt-2 space-y-2 pr-1.5">
							<div
								class="flex justify-between items-center text-sm"
							>
								<div class="  font-medium">
									{$i18n.t("LDAP")}
								</div>

								<div class="mt-1">
									<Switch bind:state={ENABLE_LDAP} />
								</div>
							</div>

							{#if ENABLE_LDAP}
								<div class="flex flex-col gap-1">
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Label")}
											</div>
											<input
												class="w-full bg-transparent outline-hidden py-0.5"
												required
												placeholder={$i18n.t(
													"Enter server label",
												)}
												bind:value={LDAP_SERVER.label}
											/>
										</div>
										<div class="w-full"></div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Host")}
											</div>
											<input
												class="w-full bg-transparent outline-hidden py-0.5"
												required
												placeholder={$i18n.t(
													"Enter server host",
												)}
												bind:value={LDAP_SERVER.host}
											/>
										</div>
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Port")}
											</div>
											<Tooltip
												placement="top-start"
												content={$i18n.t(
													"Default to 389 or 636 if TLS is enabled",
												)}
												className="w-full"
											>
												<input
													class="w-full bg-transparent outline-hidden py-0.5"
													type="number"
													placeholder={$i18n.t(
														"Enter server port",
													)}
													bind:value={
														LDAP_SERVER.port
													}
												/>
											</Tooltip>
										</div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Application DN")}
											</div>
											<Tooltip
												content={$i18n.t(
													"The Application Account DN you bind with for search",
												)}
												placement="top-start"
											>
												<input
													class="w-full bg-transparent outline-hidden py-0.5"
													placeholder={$i18n.t(
														"Enter Application DN",
													)}
													bind:value={
														LDAP_SERVER.app_dn
													}
												/>
											</Tooltip>
										</div>
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t(
													"Application DN Password",
												)}
											</div>
											<SensitiveInput
												placeholder={$i18n.t(
													"Enter Application DN Password",
												)}
												required={false}
												bind:value={
													LDAP_SERVER.app_dn_password
												}
											/>
										</div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Attribute for Mail")}
											</div>
											<Tooltip
												content={$i18n.t(
													"The LDAP attribute that maps to the mail that users use to sign in.",
												)}
												placement="top-start"
											>
												<input
													class="w-full bg-transparent outline-hidden py-0.5"
													required
													placeholder={$i18n.t(
														"Example: mail",
													)}
													bind:value={
														LDAP_SERVER.attribute_for_mail
													}
												/>
											</Tooltip>
										</div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t(
													"Attribute for Username",
												)}
											</div>
											<Tooltip
												content={$i18n.t(
													"The LDAP attribute that maps to the username that users use to sign in.",
												)}
												placement="top-start"
											>
												<input
													class="w-full bg-transparent outline-hidden py-0.5"
													required
													placeholder={$i18n.t(
														"Example: sAMAccountName or uid or userPrincipalName",
													)}
													bind:value={
														LDAP_SERVER.attribute_for_username
													}
												/>
											</Tooltip>
										</div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Search Base")}
											</div>
											<Tooltip
												content={$i18n.t(
													"The base to search for users",
												)}
												placement="top-start"
											>
												<input
													class="w-full bg-transparent outline-hidden py-0.5"
													required
													placeholder={$i18n.t(
														"Example: ou=users,dc=foo,dc=example",
													)}
													bind:value={
														LDAP_SERVER.search_base
													}
												/>
											</Tooltip>
										</div>
									</div>
									<div class="flex w-full gap-2">
										<div class="w-full">
											<div
												class=" self-center text-xs font-medium min-w-fit mb-1"
											>
												{$i18n.t("Search Filters")}
											</div>
											<input
												class="w-full bg-transparent outline-hidden py-0.5"
												placeholder={$i18n.t(
													"Example: (&(objectClass=inetOrgPerson)(uid=%s))",
												)}
												bind:value={
													LDAP_SERVER.search_filters
												}
											/>
										</div>
									</div>
									<div
										class="text-xs text-gray-400 dark:text-gray-500"
									>
										<a
											class=" text-gray-300 font-medium underline"
											href="https://ldap.com/ldap-filters/"
											target="_blank"
										>
											{$i18n.t(
												"Click here for filter guides.",
											)}
										</a>
									</div>
									<div>
										<div
											class="flex justify-between items-center text-sm"
										>
											<div class="  font-medium">
												{$i18n.t("TLS")}
											</div>

											<div class="mt-1">
												<Switch
													bind:state={
														LDAP_SERVER.use_tls
													}
												/>
											</div>
										</div>
										{#if LDAP_SERVER.use_tls}
											<div class="flex w-full gap-2">
												<div class="w-full">
													<div
														class=" self-center text-xs font-medium min-w-fit mb-1 mt-1"
													>
														{$i18n.t(
															"Certificate Path",
														)}
													</div>
													<input
														class="w-full bg-transparent outline-hidden py-0.5"
														placeholder={$i18n.t(
															"Enter certificate path",
														)}
														bind:value={
															LDAP_SERVER.certificate_path
														}
													/>
												</div>
											</div>
											<div
												class="flex justify-between items-center text-xs"
											>
												<div class=" font-medium">
													{$i18n.t(
														"Validate certificate",
													)}
												</div>

												<div class="mt-1">
													<Switch
														bind:state={
															LDAP_SERVER.validate_cert
														}
													/>
												</div>
											</div>
											<div class="flex w-full gap-2">
												<div class="w-full">
													<div
														class=" self-center text-xs font-medium min-w-fit mb-1"
													>
														{$i18n.t("Ciphers")}
													</div>
													<Tooltip
														content={$i18n.t(
															"Default to ALL",
														)}
														placement="top-start"
													>
														<input
															class="w-full bg-transparent outline-hidden py-0.5"
															placeholder={$i18n.t(
																"Example: ALL",
															)}
															bind:value={
																LDAP_SERVER.ciphers
															}
														/>
													</Tooltip>
												</div>
												<div class="w-full"></div>
											</div>
										{/if}
									</div>
								</div>
							{/if}
						</div>
					</div>
				</div>

				<div class="mb-3">
					<div class=" mt-0.5 mb-2.5 text-base font-medium">
						{$i18n.t("Features")}
					</div>

					<hr
						class=" border-gray-100/30 dark:border-gray-850/30 my-2"
					/>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Enable Community Sharing")}
						</div>

						<Switch
							bind:state={adminConfig.ENABLE_COMMUNITY_SHARING}
						/>
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Enable Message Rating")}
						</div>

						<Switch
							bind:state={adminConfig.ENABLE_MESSAGE_RATING}
						/>
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Folders")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_FOLDERS} />
					</div>

					{#if adminConfig.ENABLE_FOLDERS}
						<div class="mb-2.5 w-full justify-between">
							<div class="flex w-full justify-between">
								<div class=" self-center text-xs font-medium">
									{$i18n.t("Folder Max File Count")}
								</div>
							</div>

							<div class="flex mt-2 space-x-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
									type="number"
									min="0"
									placeholder={$i18n.t(
										"Leave empty for unlimited",
									)}
									bind:value={
										adminConfig.FOLDER_MAX_FILE_COUNT
									}
								/>
							</div>

							<div
								class="mt-2 text-xs text-gray-400 dark:text-gray-500"
							>
								{$i18n.t(
									"Maximum number of files allowed per folder.",
								)}
							</div>
						</div>
					{/if}

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Memories")} ({$i18n.t("Beta")})
						</div>

						<Switch bind:state={adminConfig.ENABLE_MEMORIES} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Notes")} ({$i18n.t("Beta")})
						</div>

						<Switch bind:state={adminConfig.ENABLE_NOTES} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Channels")} ({$i18n.t("Beta")})
						</div>

						<Switch bind:state={adminConfig.ENABLE_CHANNELS} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Calendar")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_CALENDAR} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("Automations")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_AUTOMATIONS} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("User Webhooks")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_USER_WEBHOOKS} />
					</div>

					<div
						class="mb-2.5 flex w-full items-center justify-between pr-2"
					>
						<div class=" self-center text-xs font-medium">
							{$i18n.t("User Status")}
						</div>

						<Switch bind:state={adminConfig.ENABLE_USER_STATUS} />
					</div>

					<div class="mb-2.5">
						<div class=" self-center text-xs font-medium mb-2">
							{$i18n.t("Response Watermark")}
						</div>
						<Textarea
							placeholder={$i18n.t(
								"Enter a watermark for the response. Leave empty for none.",
							)}
							bind:value={adminConfig.RESPONSE_WATERMARK}
						/>
					</div>

					<div class="mb-2.5 w-full justify-between">
						<div class="flex w-full justify-between">
							<div class=" self-center text-xs font-medium">
								{$i18n.t("rexpro URL")}
							</div>
						</div>

						<div class="flex mt-2 space-x-2">
							<input
								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
								type="text"
								placeholder={`e.g.) "http://localhost:3000"`}
								bind:value={adminConfig.REXPRO_URL}
							/>
						</div>

						<div
							class="mt-2 text-xs text-gray-400 dark:text-gray-500"
						>
							{$i18n.t(
								"Enter the public URL of your rexpro. This URL will be used to generate links in the notifications.",
							)}
						</div>
					</div>

					<div class=" w-full justify-between">
						<div class="flex w-full justify-between">
							<div class=" self-center text-xs font-medium">
								{$i18n.t("Webhook URL")}
							</div>
						</div>

						<div class="flex mt-2 space-x-2">
							<input
								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
								type="text"
								placeholder={`https://example.com/webhook`}
								bind:value={webhookUrl}
							/>
						</div>
					</div>
				</div>

				<div class="mb-3.5">
					<div class=" mt-0.5 mb-2.5 text-base font-medium">
						{$i18n.t("UI")}
					</div>

					<hr
						class=" border-gray-100/30 dark:border-gray-850/30 my-2"
					/>

					<div class="mb-2.5">
						<div class="flex w-full justify-between">
							<div class=" self-center text-xs">
								{$i18n.t("Banners")}
							</div>

							<button
								class="p-1 px-3 text-xs flex rounded-sm transition"
								type="button"
								on:click={() => {
									if (
										banners.length === 0 ||
										banners.at(-1).content !== ""
									) {
										banners = [
											...banners,
											{
												id: uuidv4(),
												type: "",
												title: "",
												content: "",
												dismissible: true,
												timestamp: Math.floor(
													Date.now() / 1000,
												),
											},
										];
									}
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 20 20"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
										d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
									/>
								</svg>
							</button>
						</div>

						<Banners bind:banners />
					</div>
				</div>
			</div>
		{/if}
	</div>

	<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
			type="submit"
		>
			{$i18n.t("Save")}
		</button>
	</div>
</form>