{#if selectedBackend.value === 'local'}

Local path repositories work on the local Docker host, or a co-located socket-proxy on that same host. For remote hosts, use S3, REST, or another remote backend.

{/if}

Backend type {selectedBackend.label} {#each backendTypes as backend} {backend.label} {/each}

{#each repoFields as field} {#if field.key === 'region'}

{ formFields.region = (e.target as HTMLInputElement).value; }} placeholder="e.g. eu-north-1" class="flex-1" /> { if (!v) return; formFields.region = v; formFields.endpoint = regionalEndpoint(v); }}> AWS regions {#each AWS_REGIONS as r} {r} {/each}

Passed to restic as AWS_DEFAULT_REGION.

{:else}

{ formFields[field.key] = (e.target as HTMLInputElement).value; }} placeholder={field.placeholder} />

{/if} {/each}

{#each credentialFields as field} {#if field.key === 'skipHostKey'}

{field.label} { formFields[field.key] = formFields[field.key] === 'true' ? '' : 'true'; }} />

{:else}

{#if field.multiline}

uploadJsonToField(field.key, e)} />

{ formFields[field.key] = (e.target as HTMLTextAreaElement).value; }}
									placeholder={isEditing && field.secret ? '(leave blank to keep current)' : field.placeholder}
									class="field-sizing-fixed max-h-40 resize-y overflow-auto font-mono text-xs"
								/>
							{:else}
								<FieldLabel label={field.label} forId="field-{field.key}" required={fieldRequired(field)} />
								<Input
									id="field-{field.key}"
									type={field.secret ? 'password' : 'text'}
									value={formFields[field.key] ?? ''}
									oninput={(e: Event) => { formFields[field.key] = (e.target as HTMLInputElement).value; }}
									placeholder={isEditing && field.secret ? '(leave blank to keep current)' : field.placeholder}
								/>
							{/if}
							{#if field.hint}<p class="text-xs text-muted-foreground">{field.hint}</p>{/if}
						</div>
					{/if}
				{/each}

<div class="space-y-2">
					<FieldLabel label="Encryption password" forId="dest-password" required={!isEditing} />
					<div class="flex gap-1.5">
						<Input id="dest-password" type="password" bind:value={formPassword} placeholder={isEditing ? '(leave blank to keep current)' : ''} class="flex-1" />
						<Button variant="outline" size="sm" class="h-9 px-2 shrink-0" onclick={generatePassword} title="Generate strong password">
							{#if generatedOk}<Check class="w-3.5 h-3.5 text-green-500" />{:else}<Dices class="w-3.5 h-3.5" />{/if}
						</Button>
						{#if formPassword}
							<Button variant="outline" size="sm" class="h-9 px-2 shrink-0" onclick={copyPassword} title="Copy password">
								{#if copiedOk}<Check class="w-3.5 h-3.5 text-green-500" />{:else}<Copy class="w-3.5 h-3.5" />{/if}
							</Button>
						{/if}
					</div>
					<p class="text-xs text-muted-foreground">Restic encrypts all data with this password. You will need it to restore.</p>
				</div>

<div class="space-y-2">
					<Label for="dest-backup-flags">Extra backup flags</Label>
					<Input id="dest-backup-flags" bind:value={formBackupFlags} />
					<div class="text-xs text-muted-foreground space-y-0.5">
						<p>Applied to backups. Common flags:</p>
						<div class="flex flex-wrap gap-x-3 gap-y-0.5 font-mono">
							<span class="cursor-pointer hover:text-foreground" onclick={() => { formBackupFlags = (formBackupFlags + ' --limit-upload 5120').trim(); }} title="Limit upload speed to 5 MB/s">--limit-upload</span>
							<span class="cursor-pointer hover:text-foreground" onclick={() => { formBackupFlags = (formBackupFlags + ' --limit-download 10240').trim(); }} title="Limit download speed to 10 MB/s">--limit-download</span>
							<span class="cursor-pointer hover:text-foreground" onclick={() => { formBackupFlags = (formBackupFlags + ' --verbose').trim(); }} title="Verbose output">--verbose</span>
							<span class="cursor-pointer hover:text-foreground" onclick={() => { formBackupFlags = (formBackupFlags + ' --compression max').trim(); }} title="Maximum compression">--compression max</span>
						</div>
					</div>
				</div>

<div class="space-y-2">
					<Label for="dest-restore-flags">Extra restore flags</Label>
					<Input id="dest-restore-flags" bind:value={formRestoreFlags} />
					<div class="text-xs text-muted-foreground space-y-0.5">
						<p>Applied only to restores. Common flags:</p>
						<div class="flex flex-wrap gap-x-3 gap-y-0.5 font-mono">
							<span class="cursor-pointer hover:text-foreground" onclick={() => { formRestoreFlags = (formRestoreFlags + ' --exclude-xattr security.selinux').trim(); }} title="Skip the SELinux xattr the helper can't remove on a cross-distro restore (e.g. Ubuntu -> Fedora)">--exclude-xattr security.selinux</span>
						</div>
					</div>
				</div>
			</div>
		</div>

<div class="border-t pt-3 mt-2 space-y-3">
			<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Repository policies</span>

<div class="space-y-1.5">
				<div class="flex items-center gap-3">
					<div class="flex items-center gap-1.5">
						<Clock class="w-3.5 h-3.5 text-muted-foreground" />
						<Label class="text-sm">Scheduled prune</Label>
						<Tooltip.Provider delayDuration={200}>
							<Tooltip.Root><Tooltip.Trigger><CircleHelp class="w-3 h-3 text-muted-foreground/50 cursor-help" /></Tooltip.Trigger>
								<Tooltip.Portal><Tooltip.Content side="right" class="!w-64 text-xs">Removes unreferenced data from the repository. Frees disk space after snapshots are forgotten. Run monthly for most repos.</Tooltip.Content></Tooltip.Portal>
							</Tooltip.Root>
						</Tooltip.Provider>
					</div>
					<TogglePill bind:checked={policyPruneEnabled} />
				</div>
				{#if policyPruneEnabled}
					<div class="pl-5 space-y-2">
						<CronEditor value={policyPruneSchedule} onchange={(v) => policyPruneSchedule = v} />
						<div class="flex items-center gap-2">
							<label class="text-xs text-muted-foreground">Max unused %</label>
							<Input bind:value={policyPruneMaxUnused} type="number" min="0" max="100" class="h-8 text-xs w-20" />
						</div>
					</div>
				{/if}
			</div>

<div class="space-y-1.5">
				<div class="flex items-center gap-3">
					<div class="flex items-center gap-1.5">
						<PackageCheck class="w-3.5 h-3.5 text-muted-foreground" />
						<Label class="text-sm">Scheduled integrity check</Label>
						<Tooltip.Provider delayDuration={200}>
							<Tooltip.Root><Tooltip.Trigger><CircleHelp class="w-3 h-3 text-muted-foreground/50 cursor-help" /></Tooltip.Trigger>
								<Tooltip.Portal><Tooltip.Content side="right" class="!w-64 text-xs">Verifies the structure and integrity of the repository. Detects corruption or missing data. Run monthly or after storage issues.</Tooltip.Content></Tooltip.Portal>
							</Tooltip.Root>
						</Tooltip.Provider>
					</div>
					<TogglePill bind:checked={policyCheckEnabled} />
				</div>
				{#if policyCheckEnabled}
					<div class="pl-5">
						<CronEditor value={policyCheckSchedule} onchange={(v) => policyCheckSchedule = v} />
					</div>
				{/if}
			</div>

<div class="space-y-1.5">
				<div class="flex items-center gap-3">
					<div class="flex items-center gap-1.5">
						<FolderCheck class="w-3.5 h-3.5 text-muted-foreground" />
						<Label class="text-sm">Scheduled data verification</Label>
						<Tooltip.Provider delayDuration={200}>
							<Tooltip.Root><Tooltip.Trigger><CircleHelp class="w-3 h-3 text-muted-foreground/50 cursor-help" /></Tooltip.Trigger>
								<Tooltip.Portal><Tooltip.Content side="right" class="!w-64 text-xs">Reads a random subset of data packs to verify they're readable and intact. Catches bit rot and storage corruption. Slower and uses bandwidth on cloud repos. Off by default.</Tooltip.Content></Tooltip.Portal>
							</Tooltip.Root>
						</Tooltip.Provider>
					</div>
					<TogglePill bind:checked={policyVerifyEnabled} />
				</div>
				{#if policyVerifyEnabled}
					<div class="pl-5 space-y-2">
						<CronEditor value={policyVerifySchedule} onchange={(v) => policyVerifySchedule = v} />
						<div class="flex items-center gap-2">
							<label class="text-xs text-muted-foreground">Data %</label>
							<Select.Root type="single" value={policyVerifyDataSubset} onValueChange={(v) => policyVerifyDataSubset = v}>
								<Select.Trigger class="h-8 w-20 text-xs">{policyVerifyDataSubset}</Select.Trigger>
								<Select.Content>
									<Select.Item value="5%">5%</Select.Item>
									<Select.Item value="10%">10%</Select.Item>
									<Select.Item value="25%">25%</Select.Item>
									<Select.Item value="50%">50%</Select.Item>
									<Select.Item value="100%">100%</Select.Item>
								</Select.Content>
							</Select.Root>
						</div>
					</div>
				{/if}
			</div>

<div class="flex items-center gap-3">
				<div class="flex items-center gap-1.5">
					<Unlock class="w-3.5 h-3.5 text-muted-foreground" />
					<Label class="text-sm">Auto-unlock stale locks</Label>
					<Tooltip.Provider delayDuration={200}>
						<Tooltip.Root><Tooltip.Trigger><CircleHelp class="w-3 h-3 text-muted-foreground/50 cursor-help" /></Tooltip.Trigger>
							<Tooltip.Portal><Tooltip.Content side="right" class="!w-64 text-xs">Automatically removes stale repository locks before prune and check operations. Locks can be left behind by interrupted or crashed backups.</Tooltip.Content></Tooltip.Portal>
						</Tooltip.Root>
					</Tooltip.Provider>
				</div>
				<TogglePill bind:checked={policyAutoUnlock} />
			</div>
		</div>

{#if isEditing}
			<div class="border-t pt-3 mt-2">
				<div class="flex items-center gap-2 mb-2">
					<BarChart3 class="w-3.5 h-3.5 text-muted-foreground" />
					<span class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Repository usage</span>
					{#if loadingStats}
						<Loader2 class="w-3 h-3 animate-spin text-muted-foreground" />
					{/if}
				</div>
				{#if repoStats}
					<div class="grid grid-cols-3 gap-2">
						<div class="bg-muted/30 rounded px-2 py-1.5 text-center border border-border/30">
							<div class="text-sm font-semibold">{formatBytes(repoStats.totalSize)}</div>
							<div class="text-[9px] text-muted-foreground">Size</div>
						</div>
						<div class="bg-muted/30 rounded px-2 py-1.5 text-center border border-border/30">
							<div class="text-sm font-semibold">{repoStats.totalFiles.toLocaleString()}</div>
							<div class="text-[9px] text-muted-foreground">Files</div>
						</div>
						<div class="bg-muted/30 rounded px-2 py-1.5 text-center border border-border/30">
							<div class="text-sm font-semibold">{repoStats.snapshots}</div>
							<div class="text-[9px] text-muted-foreground">Snapshots</div>
						</div>
					</div>
					
					{#if repoStats.totalSize > 0}
						<div class="h-2 bg-muted rounded-full overflow-hidden">
							<div class="h-full bg-primary/60 rounded-full transition-all" style="width: {Math.min(100, (repoStats.totalSize / (1024 * 1024 * 1024)) * 10)}%"></div>
						</div>
						<p class="text-[10px] text-muted-foreground mt-1">{repoStats.snapshots} snapshots across {repoStats.totalFiles.toLocaleString()} files</p>
					{/if}
				{:else if !loadingStats}
					<p class="text-xs text-muted-foreground">Loading repository stats...</p>
				{/if}
			</div>
		{/if}

</div>
		{#if repoConflictName}
			<div class="flex-shrink-0 flex gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-400">
				<AlertTriangle class="w-4 h-4 mt-0.5 flex-shrink-0" />
				<span>
					This repository is already used by <span class="font-medium">"{repoConflictName}"</span>.
					Backups to a shared repository run one at a time (restic locks the repo), not in parallel.
					Click <span class="font-medium">Save anyway</span> to continue.
				</span>
			</div>
		{/if}
		<Dialog.Footer class="flex-shrink-0 border-t mt-auto pt-4">
			<div class="flex items-center gap-2 mr-auto min-w-0">
				<Button variant="outline" size="sm" onclick={testConnection} disabled={testing || !formValid} title={!formValid ? 'Fill in all required fields first' : undefined}>
					{#if testing}<Loader2 class="w-4 h-4 mr-1 animate-spin" />{:else}<Wifi class="w-4 h-4 mr-1" />{/if}
					Test
				</Button>
				{#if isEditing}
					<Button variant="outline" size="sm" class="{destination?.lastTestStatus === 'success' ? 'opacity-30' : ''}" onclick={initRepo} disabled={initializing} title={destination?.lastTestStatus === 'success' ? 'Already initialized' : 'Initialize repository'}>
						{#if initializing}<Loader2 class="w-4 h-4 mr-1 animate-spin" />{:else}<Database class="w-4 h-4 mr-1" />{/if}
						Init repo
					</Button>
				{/if}
				{#if testStatus === 'ok'}
					<span class="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400"><Check class="w-3.5 h-3.5 shrink-0" />{testStatusMsg}</span>
				{:else if testStatus === 'needs_init'}
					<span class="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400"><Check class="w-3.5 h-3.5 shrink-0" />{testStatusMsg}{#if !isEditing} - done on save{/if}</span>
				{:else if testStatus === 'error'}
					<span class="flex items-center gap-1.5 min-w-0 text-xs text-destructive" title={testStatusMsg}>
						<AlertTriangle class="w-3.5 h-3.5 shrink-0" />
						<span class="truncate">{testStatusMsg}</span>
					</span>
				{/if}
			</div>
			<Button variant="outline" onclick={() => { open = false; onClose(); }}>Cancel</Button>
			<Button onclick={save} disabled={formSaving || !formValid} variant={repoConflictName ? 'destructive' : 'default'} title={!formValid ? 'Fill in all required fields first' : undefined}>
				{#if formSaving}<Loader2 class="w-4 h-4 mr-1 animate-spin" />{:else if repoConflictName}<AlertTriangle class="w-4 h-4 mr-1" />{:else if isEditing}<Check class="w-4 h-4 mr-1" />{:else}<Plus class="w-4 h-4 mr-1" />{/if}
				{repoConflictName ? 'Save anyway' : needsInit && !isEditing ? 'Create and init' : isEditing ? 'Save' : 'Create'}
			</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>