<script lang="ts">
	import { t } from '$lib/i18n';
</script>

<svelte:head>
	<title>{$t('settingsCredentials.title')} - {$t('app.name')}</title>
</svelte:head>

<div class="space-y-6">
	<div>
		<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('settingsCredentials.registryTokens')}</h2>
		<p class="text-sm text-[var(--text-secondary)]">
			{$t('settingsCredentials.registryTokensDesc')}
			<a href="/settings/registries" class="text-[var(--text-link)] hover:text-[var(--text-link-hover)] underline transition-colors">{$t('settingsCredentials.registriesLink')}</a>
			{$t('settingsCredentials.registryTokensSuffix')}
		</p>
	</div>
</div>
