{{define "system"}}
<!doctype html>
<html lang="en">
	<head>
		{{template "head-common" .}}
		<title>{{.Title}}</title>
	</head>
	<body class="bg-gray-900 text-gray-100">
		{{template "accessibility-common" .}} {{template "main-layout-start" .}}
		{{template "system-content" .}} {{template "main-layout-end" .}}
		{{template "body-common-scripts" .}}
	</body>
</html>
{{end}} {{define "system-content"}}
<div class="space-y-6">
	<div class="mb-6">
		<h2 class="text-3xl font-bold text-white">System Information</h2>
		<p class="text-gray-400 mt-1">
			Detailed system and hardware information
		</p>
	</div>

	<div class="grid grid-cols-2 gap-6 mb-6">
		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">
				Processor
			</h3>

			<div class="space-y-3">
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">CPU Model</p>
					<p
						class="font-medium {{getVendorColor .Platform.CPUInfo.Vendor}}"
					>
						{{.Platform.CPUInfo.Model}}
					</p>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">GPU Vendor</p>
					<p class="font-medium">
						{{getVendorDisplay .Platform.GPUInfo.Brand}}
					</p>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Architecture</p>
					<p class="font-medium text-white">
						{{capitalizeArchitecture
						.Platform.CPUInfo.ArchitectureLevel}}
					</p>
				</div>
				{{if isX86Architecture .Platform.Arch}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">AVX2 Support</p>
					{{if .Platform.CPUInfo.SupportsAVX2}}
					<p class="font-medium text-green-400">
						<i class="bx bx-check-circle"></i> Supported
					</p>
					{{else}}
					<p class="font-medium text-red-400">
						<i class="bx bx-x-circle"></i> Not Supported
					</p>
					{{end}}
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">AVX512 Support</p>
					{{if .Platform.CPUInfo.SupportsAVX512}}
					<p class="font-medium text-green-400">
						<i class="bx bx-check-circle"></i> Supported
					</p>
					{{else}}
					<p class="font-medium text-red-400">
						<i class="bx bx-x-circle"></i> Not Supported
					</p>
					{{end}}
				</div>
				{{end}} {{if isARMArchitecture .Platform.Arch}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">NEON Support</p>
					{{if .Platform.CPUInfo.SupportsNEON}}
					<p class="font-medium text-green-400">
						<i class="bx bx-check-circle"></i> Supported
					</p>
					{{else}}
					<p class="font-medium text-red-400">
						<i class="bx bx-x-circle"></i> Not Supported
					</p>
					{{end}}
				</div>
				{{end}}
			</div>
		</div>

		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">
				Operating System
			</h3>

			<div class="space-y-3">
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">OS Type</p>
					<div class="flex items-center gap-2">
						{{if getOSLogo (toString .Platform.OSType)}}
						<img
							src="/static/logos/{{getOSLogo (toString .Platform.OSType)}}"
							class="w-6 h-6"
							alt="{{getOSDisplayName (toString .Platform.OSType)}}"
						/>
						{{end}}
						<p class="font-medium text-white">
							{{getOSDisplayName (toString .Platform.OSType)}}
						</p>
					</div>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Architecture</p>
					<p class="font-medium text-white">
						{{capitalizeArchitecture .Platform.Arch}}
					</p>
				</div>
				{{if .Platform.Distro}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Distribution</p>
					<div class="flex items-center gap-2">
						{{if getDistroLogo .Platform.Distro}}
						<img
							src="/static/logos/{{getDistroLogo .Platform.Distro}}"
							class="w-6 h-6"
							alt="{{.Platform.Distro}}"
						/>
						{{end}}
						<p class="font-medium text-white">
							{{capitalize .Platform.Distro}}
						</p>
					</div>
				</div>
				{{end}} {{if .Platform.DistroFamily}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Distro Family</p>
					<div class="flex items-center gap-2">
						{{if getDistroFamilyLogo .Platform.DistroFamily}}
						<img
							src="/static/logos/{{getDistroFamilyLogo .Platform.DistroFamily}}"
							class="w-6 h-6"
							alt="{{.Platform.DistroFamily}}"
						/>
						{{end}}
						<p class="font-medium text-white">
							{{capitalize .Platform.DistroFamily}}
						</p>
					</div>
				</div>
				{{end}} {{if .Platform.Version}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">OS Version</p>
					<p class="font-medium text-white">{{.Platform.Version}}</p>
				</div>
				{{end}}
			</div>
		</div>
	</div>

	<div class="grid grid-cols-2 gap-6 mb-6">
		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">Graphics</h3>

			<div class="space-y-3">
				{{range .Platform.GPUInfo.Models}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">GPU Model</p>
					<p
						class="font-medium {{getVendorColor $.Platform.GPUInfo.Brand}}"
					>
						{{.}}
					</p>
				</div>
				{{end}}
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">GPU Vendor</p>
					<span>{{getVendorDisplay .Platform.GPUInfo.Brand}}</span>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Supported Codecs</p>
					<div class="flex flex-wrap gap-2 mt-2">
						{{range .Platform.GPUInfo.SupportedCodecs}}
						<span
							class="{{getCodecBadgeColor .}} text-white px-3 py-1 rounded-full text-sm font-medium"
							>{{formatCodecName .}}</span
						>
						{{end}} {{if not .Platform.GPUInfo.SupportedCodecs}}
						<span class="text-gray-400 text-sm"
							>No codec information available</span
						>
						{{end}}
					</div>
				</div>
			</div>
		</div>

		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">
				{{.SystemInfo.AppName}}
			</h3>

			<div class="space-y-3">
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Installer Version</p>
					<p class="font-medium text-white">{{.SystemInfo.AppVersion}}</p>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Go Version</p>
					<p class="font-medium text-white">{{.SystemInfo.GoVersion}}</p>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Build Time</p>
					<p class="font-medium text-white">{{.SystemInfo.BuildTime}}</p>
				</div>
				<div class="bg-gray-700 rounded-lg p-4">
					<p class="text-sm text-gray-400">Repository</p>
					<a
						href="{{.SystemInfo.RepositoryURL}}"
						class="font-medium text-purple-400 hover:underline"
					>
						{{.SystemInfo.RepositoryName}}
					</a>
				</div>
			</div>
		</div>
	</div>

	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">Environment</h3>

		<div class="grid grid-cols-2 gap-4">
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Install Path</p>
				<p class="font-mono text-sm text-white">{{.SystemInfo.InstallPath}}</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">MPV Config Path</p>
				<p class="font-mono text-sm text-white">
					{{.SystemInfo.MPVConfigPath}}
				</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Log Path</p>
				<p class="font-mono text-sm text-white">
					{{.SystemInfo.LogPath}}
				</p>
			</div>
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Backup Path</p>
				<p class="font-mono text-sm text-white">
					{{.SystemInfo.BackupPath}}
				</p>
			</div>
		</div>
	</div>
</div>
{{end}}
