{$i18n.t("Type")}

{#if !direct} {:else}

{$i18n.t("OpenAPI")}

{/if}

{$i18n.t("Name")}

{#if !direct}

{$i18n.t("ID")} {#if type !== "mcp"}({$i18n.t( "optional", )}){/if}

{/if}

{$i18n.t("Description")}

{$i18n.t("URL")}

{$i18n.t("Auth")}

{#if ["oauth_2.1", "oauth_2.1_static"].includes(auth_type)}

{#if !oauthClientInfo}

{$i18n.t("Not Registered")}

{:else}

{$i18n.t("Registered")}

{/if}

{#if auth_type === "bearer"} {:else if auth_type === "none"}

{$i18n.t("No authentication")}

{:else if auth_type === "session"}

{$i18n.t( "Forwards system user session credentials to authenticate", )}

{:else if auth_type === "system_oauth"}

{$i18n.t( "Forwards system user OAuth access token to authenticate", )}

{:else if auth_type === "oauth_2.1"}

{$i18n.t( "Uses OAuth 2.1 Dynamic Client Registration", )}

{:else if auth_type === "oauth_2.1_static"}

{/if}

{#if !direct} {/if}

{$i18n.t("OpenAPI Spec")}

{#if spec_type === "url"}

{:else if spec_type === "json"}

</div>
												{/if}
											</div>
										</div>

{#if ["", "url"].includes(spec_type)}
											<div
												class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? "text-gray-800 dark:text-gray-100" : "text-gray-500"}`}
											>
												{$i18n.t(
													`rexpro will make requests to "{{url}}"`,
													{
														url: path.includes(
															"://",
														)
															? path
															: `${url}${path.startsWith("/") ? "" : "/"}${path}`,
													},
												)}
											</div>
										{/if}
									</div>
								</div>
							{/if}

{#if !direct}
								<div class="flex gap-2 mt-2">
									<div class="flex flex-col w-full">
										<label
											for="headers-input"
											class={`mb-0.5 text-xs text-gray-500
									${($settings?.highContrastMode ?? false) ? "text-gray-800 dark:text-gray-100" : ""}`}
											>{$i18n.t("Headers")}</label
										>

<div class="flex-1">
											<Tooltip
												content={$i18n.t(
													'Enter additional headers in JSON format (e.g. {"X-Custom-Header": "value"}',
												)}
											>
												<Textarea
													className="w-full text-sm outline-hidden"
													bind:value={headers}
													placeholder={$i18n.t(
														"Enter additional headers in JSON format",
													)}
													required={false}
													minSize={30}
												/>
											</Tooltip>
										</div>
									</div>
								</div>
							{/if}
						{/if}

{#if !direct}
							<hr
								class=" border-gray-100/50 dark:border-gray-700/10 my-2.5 w-full"
							/>

<div class="flex flex-col w-full mt-2">
								<label
									for="function-name-filter-list"
									class={`mb-1 text-xs ${($settings?.highContrastMode ?? false) ? "text-gray-800 dark:text-gray-100 placeholder:text-gray-700 dark:placeholder:text-gray-100" : "outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 text-gray-500"}`}
									>{$i18n.t(
										"Function Name Filter List",
									)}</label
								>

{#if type === "mcp"}
						<div
							class=" bg-yellow-500/20 text-yellow-700 dark:text-yellow-200 rounded-2xl text-xs px-4 py-3 mb-2 mt-1"
						>
							<span class="font-medium">
								{$i18n.t("Warning")}:
							</span>
							{$i18n.t(
								"MCP support is experimental and its specification changes often, which can lead to incompatibilities. OpenAPI specification support is directly maintained by the rexpro-ai team, making it the more reliable option for compatibility.",
							)}

<a
								class="font-medium underline"
								href="https://docs.openrexpro.com/"
								target="_blank">{$i18n.t("Read more →")}</a
							>
						</div>
					{/if}

<div
						class="flex justify-between items-center pt-3 text-sm font-medium"
					>
						<div>
							{#if edit}
								<button
									class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
									type="button"
									on:click={() => {
										showDeleteConfirmDialog = true;
									}}
								>
									{$i18n.t("Delete")}
								</button>
							{/if}
						</div>

<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 flex items-center gap-2 whitespace-nowrap {loading
								? ' cursor-not-allowed'
								: ''}"
							type="submit"
							disabled={loading}
						>
							{$i18n.t("Save")}

{#if loading}
								<span class="shrink-0">
									<Spinner />
								</span>
							{/if}
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</Modal>

<ConfirmDialog
	bind:show={showDeleteConfirmDialog}
	message={$i18n.t(
		"Are you sure you want to delete this connection? This action cannot be undone.",
	)}
	confirmLabel={$i18n.t("Delete")}
	on:confirm={() => {
		onDelete();
		show = false;
	}}
/>

{#if edit} {$i18n.t("Edit Connection")} {:else} {$i18n.t("Add Connection")} {/if}