<!--
  App manifest — a forged "spec-sheet" summarizing the whole workload on the
  wizard's Review step so the operator can confirm everything before Create.

  Pure presentation: the page computes the row set + source-kind via `$derived`
  and passes them in. Values are rendered in a definition grid (mono uppercase
  labels in the left column, values in the right). Machine-readable values
  (image refs, repo paths, branches, ports, FQDNs) are set `mono` by the caller
  so they read as the literals they are. The source kind is shown as an ember
  badge in the manifest header.
-->
<script lang="ts">
	import { t } from '$lib/i18n';

	export interface ManifestRow {
		label: string;
		value: string;
		mono?: boolean;
	}

	interface Props {
		/** Definition rows: Name / Source / Trigger / Public face. */
		rows: ManifestRow[];
		/** Source-kind string (image / compose / static / dockerfile) — badge. */
		sourceKind: string;
	}

	let { rows, sourceKind }: Props = $props();
</script>

<section class="manifest" aria-label={$t('apps.new.manifest.title')}>
	<span class="reg reg-tl" aria-hidden="true"></span>
	<span class="reg reg-tr" aria-hidden="true"></span>
	<span class="reg reg-bl" aria-hidden="true"></span>
	<span class="reg reg-br" aria-hidden="true"></span>

	<header class="manifest-head">
		<span class="forge-eyebrow">
			<span class="forge-ember"></span>
			<span class="eb-word">{$t('apps.new.manifest.title')}</span>
		</span>
		{#if sourceKind}
			<span class="kind-badge mono">{sourceKind}</span>
		{/if}
	</header>

	<dl class="manifest-grid">
		{#each rows as row (row.label)}
			<div class="manifest-row">
				<dt class="manifest-label">{row.label}</dt>
				<dd class="manifest-value" class:mono={row.mono}>{row.value}</dd>
			</div>
		{/each}
	</dl>
</section>

<style>
	/* Forged spec-sheet: subtle bordered panel with registration corners,
	   ember eyebrow header, and a label/value definition grid. Reuses the
	   forge token system end-to-end — no ad-hoc colours. */
	.manifest {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-5) var(--space-5) var(--space-6);
		background: var(--surface-card-hover);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-xl);
	}

	.reg {
		position: absolute;
		width: 9px;
		height: 9px;
		border-color: var(--forge-accent);
		border-style: solid;
		border-width: 0;
		pointer-events: none;
	}
	.reg-tl {
		top: -1px;
		left: -1px;
		border-top-width: 2px;
		border-left-width: 2px;
		border-top-left-radius: var(--radius-xl);
	}
	.reg-tr {
		top: -1px;
		right: -1px;
		border-top-width: 2px;
		border-right-width: 2px;
		border-top-right-radius: var(--radius-xl);
	}
	.reg-bl {
		bottom: -1px;
		left: -1px;
		border-bottom-width: 2px;
		border-left-width: 2px;
		border-bottom-left-radius: var(--radius-xl);
	}
	.reg-br {
		bottom: -1px;
		right: -1px;
		border-bottom-width: 2px;
		border-right-width: 2px;
		border-bottom-right-radius: var(--radius-xl);
	}

	.manifest-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--border-primary);
	}
	.eb-word {
		font-weight: 700;
	}
	.kind-badge {
		display: inline-flex;
		align-self: flex-start;
		padding: 0.2rem 0.55rem;
		background: var(--forge-accent);
		color: #fff;
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		border-radius: var(--radius-sm);
		line-height: 1;
	}

	/* Definition grid — mono uppercase labels, values aligned in a second
	   column. Collapses to stacked rows on narrow viewports. */
	.manifest-grid {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		margin: 0;
	}
	.manifest-row {
		display: grid;
		grid-template-columns: minmax(7rem, 0.32fr) 1fr;
		gap: var(--space-4);
		align-items: baseline;
		padding: var(--space-2) 0;
		border-bottom: 1px dashed var(--border-secondary);
	}
	.manifest-row:last-child {
		border-bottom: 0;
	}
	.manifest-label {
		margin: 0;
		font-family: var(--forge-mono);
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-tertiary);
	}
	.manifest-value {
		margin: 0;
		font-size: 0.9rem;
		line-height: 1.5;
		color: var(--text-primary);
		word-break: break-word;
	}
	.manifest-value.mono {
		font-family: var(--forge-mono);
		font-size: 0.82rem;
	}

	@media (max-width: 560px) {
		.manifest-row {
			grid-template-columns: 1fr;
			gap: var(--space-1);
		}
	}
</style>
