familienarchiv/frontend/src/routes/admin/groups/new/+page.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';

const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
const availableAdmin = [
	{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
	{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
	{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
	{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
];

let { form } = $props();
</script>

<div class="flex flex-1 flex-col overflow-hidden">
	<!-- Detail panel header -->
	<div
		class="flex items-center border-b border-green-200 bg-green-50 px-5 py-3 dark:border-green-900 dark:bg-green-950/30"
	>
		<h2 class="flex-1 font-sans text-sm font-bold text-green-800 dark:text-green-300">
			{m.admin_group_new_heading()}
		</h2>
	</div>

	<!-- Scrollable body -->
	<div class="flex-1 overflow-y-auto px-5 py-5">
		{#if form?.error}
			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
				{form.error}
			</div>
		{/if}

		<form id="new-group-form" method="POST" use:enhance class="space-y-5">
			<!-- Name card -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_col_name()}
				</h3>
				<input
					type="text"
					name="name"
					placeholder={m.admin_group_name_placeholder()}
					required
					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
				/>
			</div>

			<!-- Standard permissions -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_groups_section_standard()}
				</h3>
				<div class="space-y-2">
					{#each availableStandard as perm (perm.value)}
						<label class="flex items-center gap-2 text-sm text-ink">
							<input
								type="checkbox"
								name="permissions"
								value={perm.value}
								class="rounded border-line text-primary focus:ring-primary"
							/>
							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
							<span class="text-ink-3">— {perm.label}</span>
						</label>
					{/each}
				</div>
			</div>

			<!-- Administrative permissions -->
			<div
				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
			>
				<h3
					class="mb-3 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
				>
					{m.admin_groups_section_administrative()}
				</h3>
				<div class="space-y-2">
					{#each availableAdmin as perm (perm.value)}
						<label
							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
								? 'font-bold text-red-700 dark:text-red-400'
								: 'text-ink'}"
						>
							<input
								type="checkbox"
								name="permissions"
								value={perm.value}
								class="rounded border-line text-primary focus:ring-primary"
							/>
							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
							<span class="font-normal text-ink-3">— {perm.label}</span>
						</label>
					{/each}
				</div>
			</div>
		</form>
	</div>

	<!-- Docked footer -->
	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
		<a
			href="/admin/groups"
			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
		>
			{m.btn_cancel()}
		</a>
		<button
			type="submit"
			form="new-group-form"
			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.btn_create()}
		</button>
	</div>
</div>