{#if adminConfig !== null}

{$i18n.t("General")}

{$i18n.t("Version")}

v{REXPRO_VERSION} {#if $config?.features?.enable_version_update_check} {updateAvailable === null ? $i18n.t( "Checking for updates...", ) : updateAvailable ? `(v${version.latest} ${$i18n.t("available!")})` : $i18n.t("(latest)")} {/if}

{#if $config?.features?.enable_version_update_check} {/if}

{$i18n.t("Help")}

{$i18n.t( "Discover how to use rexpro-ai and seek support from the community.", )}

{$i18n.t("Documentation")}

{$i18n.t("License")}

{#if $config?.license_metadata} {$config?.license_metadata?.type} license registered to {$config?.license_metadata ?.organization_name} for {$config?.license_metadata ?.seats ?? "Unlimited"} users. {#if $config?.license_metadata?.html}

{@html DOMPurify.sanitize( $config?.license_metadata?.html, )}

{/if} {:else} {$i18n.t( "Upgrade to a licensed plan for enhanced capabilities, including custom theming and branding, and dedicated support.", )} {/if}

{$i18n.t("Authentication")}

{$i18n.t("Default User Role")}

{$i18n.t("Default Group")}

{$i18n.t("Enable New Sign Ups")}

{$i18n.t( "Show Admin Details in Account Pending Overlay", )}

{#if adminConfig.SHOW_ADMIN_DETAILS}

{$i18n.t("Admin Contact Email")}

{/if}

{$i18n.t("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>

{#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>

{#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>

<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="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>

{#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>

<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>

<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>

<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>

{#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="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>

<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>

<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>

<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>

<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>

<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>

<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>

<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="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="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>