<script lang="ts">
	import { onMount } from 'svelte';
	import { api } from '$lib/api';
	import { t } from '$lib/i18n';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Card from '$lib/components/Card.svelte';
	import Loading from '$lib/components/Loading.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';

	let configs = $state<any[]>([]);
	let loaded = $state(false);

	onMount(async () => {
		try { configs = await api('/template-configs'); } catch {}
		loaded = true;
	});
</script>

<PageHeader title={t('templateConfig.title')} description={t('templateConfig.description')} />

{#if !loaded}
	<Loading />
{:else if configs.length === 0}
	<Card>
		<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
			<div style="opacity: 0.4;"><MdiIcon name="mdiFileDocumentEdit" size={40} /></div>
			<p class="text-sm">{t('templateConfig.noConfigs')}</p>
		</div>
	</Card>
{:else}
	<div class="grid gap-4 sm:grid-cols-2 stagger-children">
		{#each configs as config}
			<Card hover>
				<div class="flex items-center gap-3">
					<div class="flex items-center justify-center w-10 h-10 rounded-lg"
						style="background: var(--color-accent); color: var(--color-accent-foreground);">
						<MdiIcon name={config.icon || 'mdiFileDocumentEdit'} size={20} />
					</div>
					<div>
						<h3 class="font-medium text-sm">{config.name}</h3>
						<p class="text-xs" style="color: var(--color-muted-foreground);">{config.description || config.provider_type}</p>
					</div>
					{#if config.user_id === 0}
						<span class="ml-auto text-xs px-2 py-0.5 rounded-full"
							style="background: var(--color-muted); color: var(--color-muted-foreground);">System</span>
					{/if}
				</div>
			</Card>
		{/each}
	</div>
{/if}
