{#if filteredConnectsManual} {#each filteredConnectsManual as [key, _]} {#if !nativeLanguagesCategory.includes(key)} {/if} {/each} {:else} {#each new Array(9) as _} {/each} {/if}

{:else if step == 2 && manual} {#if apiTokenApps[resourceType]}

Instructions

{@html step}

{#if apiTokenApps[resourceType].img}

{/if} {:else if !emptyString(resourceTypeInfo?.description)}

{resourceTypeInfo?.name} description

{/if} {#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'} {/if}

Resource description

{#if renderDescription}

GH Markdown

</div>
	{:else if description == undefined || description == ''}
		<div class="text-sm text-tertiary">No description provided</div>
	{:else}
		<div class="mt-2" />
		<GfmMarkdown md={description} />
	{/if}
	<div class="mt-12">
		{#key resourceTypeInfo}
			<ApiConnectForm
				{linkedSecret}
				{linkedSecretCandidates}
				{resourceType}
				{resourceTypeInfo}
				bind:args
				bind:isValid
			/>
		{/key}
	</div>
{:else if step == 2 && !manual}
	{#if manual == false && resourceType != ''}
		<h1 class="mb-4">{resourceType}</h1>
		<div class="my-4 text-secondary"
			>Click connect to create a resource backed by an oauth connection, whose token is fetched from
			the external services and refreshed automatically if needed before expiration (using its
			refresh token)</div
		>
		<h4 class="mb-2">Description</h4>
		<div class="text-sm mb-8">
			<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
		</div>
		<h3 class="mb-4 flex gap-4"
			>Scopes <button
				on:click={() => {
					editScopes = !editScopes
				}}><Pen size={14} /></button
			></h3
		>

{#if editScopes}
			<OauthScopes bind:scopes />
		{:else}
			<div class="flex flex-col gap-1">
				{#each scopes as scope}
					<div class="py-0.5 pl-2 text-xs">- {scope}</div>
				{/each}
			</div>
		{/if}
	{/if}
{:else if step == 3 && !manual}
	Finish connection in popup window
{:else}
	<Path
		initialPath=""
		namePlaceholder={resourceType}
		bind:error={pathError}
		bind:path
		kind="resource"
	/>
	{#if apiTokenApps[resourceType] || !manual}
		<ul class="mt-10">
			<li>
				1. A secret variable containing the {apiTokenApps[resourceType]?.linkedSecret ?? 'token'}
				<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
				will be stored a
				<span class="font-mono whitespace-nowrap">{path}</span>.
			</li>
			<li class="mt-4">
				2. The resource containing that token will be stored at the same path <span
					class="font-mono whitespace-nowrap">{path}</span
				>. The Variable and Resource will be "linked together", they will be deleted and renamed
				together.
			</li></ul
		>
	{/if}
{/if}

OAuth APIs

Others

Instructions

{resourceTypeInfo?.name} description

Resource description