{{/* Common head elements */}} {{define "head-common"}}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="htmx-config" content='{"allowScriptTags":false}' />
<link rel="stylesheet" href="/static/css/tailwind.min.css" />
<link rel="stylesheet" href="/static/boxicons/fonts/animations.min.css" />
<link rel="stylesheet" href="/static/boxicons/fonts/basic/boxicons.min.css" />
<link
	rel="stylesheet"
	href="/static/boxicons/fonts/brands/boxicons-brands.min.css"
/>
<link rel="stylesheet" href="/static/style.css" />
<link rel="icon" href="/static/favicon.png" type="image/png" />
{{end}} {{/* Common body scripts */}} {{define "body-common-scripts"}}
{{template "jobs-modal-root" .}}
<script src="/static/utils.js"></script>
<script src="/static/dialog.js"></script>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/htmx-errors.js"></script>
<script src="/static/modal.js"></script>
<script src="/static/toast.js"></script>
<script src="/static/output-tail.js"></script>
	<script src="/static/jobs.js"></script>
<script src="/static/jobs-modal.js"></script>
<script src="/static/server-status.js"></script>
<script src="/static/password-modal.js"></script>
<script src="/static/notice.js"></script>
<script src="/static/manifest-status.js" defer></script>
<script src="/static/sidebar-nav.js" defer></script>
<script src="/static/js/alpine.min.js" defer></script>
{{end}} {{/* Job output modal root - persistent Alpine.js component
(static/jobs-modal.js), opened via window.showJobOutput(jobId) */}} {{define
"jobs-modal-root"}}
<div
	id="job-output-modal"
	x-data="jobsModal()"
	x-cloak
	class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"
	:class="{ 'hidden': !isOpen }"
	:data-job-id="jobId"
	role="dialog"
	aria-modal="true"
	aria-labelledby="job-output-title"
	aria-describedby="job-output-summary"
	@click.self="close()"
>
	<div
		class="bg-gray-800 rounded-lg shadow-2xl max-w-4xl w-full mx-4 max-h-[80vh] flex flex-col"
	>
		<!-- Header -->
		<div
			class="p-6 border-b border-gray-700 flex items-center justify-between"
		>
			<div class="flex items-center gap-3">
				<i aria-hidden="true"
					id="job-modal-icon"
					class="bx text-2xl"
					:class="[statusIcon(), statusClass()]"
				></i>
				<div>
					<h3
						id="job-output-title"
						class="text-xl font-semibold text-white"
						x-text="appName + ' - ' + jobType"
					></h3>
					<p id="job-output-summary" class="text-sm text-gray-400">
						Status:
						<span
							id="job-modal-status"
							class="font-medium"
							:class="statusClass()"
							x-text="statusText()"
						></span>
						<span
							id="job-modal-progress-text"
							x-text="headerProgress"
						></span>
					</p>
				</div>
			</div>
			<button
				@click="close()"
				class="text-gray-400 hover:text-white transition focus:outline-hidden focus:ring-2 focus:ring-purple-500 rounded"
				aria-label="Close modal"
			>
				<i aria-hidden="true" class="bx bx-x text-2xl"></i>
			</button>
		</div>

		<!-- Progress bar (while running) -->
		<div
			id="job-modal-progress-section"
			class="px-6 py-3 border-b border-gray-700"
			x-show="isRunning()"
		>
			<div class="flex items-center justify-between mb-1">
				<span
					id="job-modal-message"
					class="text-sm text-gray-400"
					x-text="message"
				></span>
				<span
					id="job-modal-progress-pct"
					class="text-sm text-gray-400"
					x-text="progress + '%'"
				></span>
			</div>
			<div
				class="w-full bg-gray-700 rounded-full h-2"
				role="progressbar"
				:aria-valuenow="progress"
				aria-valuemin="0"
				aria-valuemax="100"
			>
				<div
					id="job-modal-progress-bar"
					class="bg-purple-500 h-2 rounded-full transition-all duration-300"
					:style="'width: ' + progress + '%'"
				></div>
			</div>
		</div>

		<!-- Output -->
		<div class="flex-1 overflow-auto p-6">
			<div
				class="bg-gray-900 rounded-lg p-4 font-mono text-sm max-h-[50vh] overflow-auto"
				:data-job-output="jobId"
				x-ref="output"
			>
				<template x-for="(line, index) in output" :key="index">
					<div class="text-gray-300" x-text="line"></div>
				</template>
				<div class="text-gray-500" x-show="output.length === 0">
					No output available
				</div>
			</div>
		</div>

		<!-- Error/reconciliation details -->
		<div
			id="job-modal-error-section"
			class="px-6 py-4 border-t border-gray-700"
			:class="isPartial() ? 'bg-yellow-900/20' : 'bg-red-900/20'"
			x-show="isError() || isPartial()"
		>
			<div class="flex items-start gap-3">
				<i aria-hidden="true" class="bx text-xl mt-0.5" :class="isPartial() ? 'bx-error-circle text-yellow-400' : 'bx-x-circle text-red-400'"></i>
				<div>
					<p
						id="job-modal-error"
						class="font-medium"
						:class="isPartial() ? 'text-yellow-400' : 'text-red-400'"
						x-text="error ? (isPartial() ? 'Reconciliation needed: ' : 'Error: ') + error : ''"
					></p>
					<p
						id="job-modal-error-details"
						class="text-gray-400 text-sm mt-1"
						x-text="errorDetails"
					></p>
				</div>
			</div>
		</div>

		<!-- Footer -->
		<div class="p-6 border-t border-gray-700 flex justify-end gap-3">
			<button
				id="job-modal-cancel-btn"
				@click="cancel()"
				x-show="isRunning()"
				:disabled="isCancelling()"
				class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
			>
				<i aria-hidden="true" class="bx bx-x"></i>
				Cancel Job
			</button>
			<button
				@click="close()"
				class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition flex items-center gap-2"
			>
				<i aria-hidden="true" class="bx bx-x"></i>
				Close
			</button>
			<button
				id="job-modal-refresh-btn"
				@click="close(); window.location.reload()"
				x-show="isSuccess()"
				class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
			>
				<i aria-hidden="true" class="bx bx-refresh-cw"></i>
				Refresh Page
			</button>
		</div>
	</div>
</div>
{{end}} {{/* Accessibility elements */}} {{define "accessibility-common"}}
<a href="#main-content" class="skip-link">Skip to main content</a>
<div
	id="status-announcer"
	class="sr-only"
	aria-live="polite"
	aria-atomic="true"
></div>
<div
	id="alert-announcer"
	class="sr-only"
	aria-live="assertive"
	aria-atomic="true"
></div>
{{end}} {{/* Main layout wrapper start */}} {{define "main-layout-start"}}
<div class="flex h-screen">
	{{template "sidebar" .}}
	<main
		id="main-content"
		class="flex-1 p-4 pt-16 sm:p-6 sm:pt-16 lg:p-8 lg:pt-8 overflow-auto"
		role="main"
		aria-label="Main content"
	>
		<div
			id="manifest-unavailable-banner"
			class="hidden bg-yellow-900/30 border border-yellow-600/50 rounded-lg p-4 mb-6"
			role="alert"
		>
			<div class="flex items-center gap-3">
				<i
					class="bx bx-info-circle text-yellow-500 text-xl shrink-0"
					aria-hidden="true"
				></i>
				<p
					id="manifest-unavailable-text"
					class="flex-1 text-yellow-400 text-sm"
				>
					Release manifest unavailable — installs and updates are
					disabled. Release metadata could not be verified.
				</p>
				<button
					id="manifest-retry-btn"
					type="button"
					class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded transition flex items-center gap-1 text-sm"
				>
					<i class="bx bx-refresh-cw" aria-hidden="true"></i>
					Retry
				</button>
			</div>
		</div>
		{{end}} {{/* Main layout wrapper end */}} {{define "main-layout-end"}}
	</main>
</div>
{{end}} {{/* Full base page template - use this for new templates that define
page-content */}} {{define "base-page"}}
<!doctype html>
<html lang="en">
	<head>
		{{template "head-common" .}}
		<title>{{.Title}}</title>
		{{template "head-extra" .}}
	</head>
	<body class="bg-gray-900 text-gray-100">
		{{template "accessibility-common" .}} {{template "main-layout-start" .}}
		{{template "page-content" .}} {{template "main-layout-end" .}}
		{{template "body-common-scripts" .}} {{template "scripts-extra" .}}
	</body>
</html>
{{end}}