<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Music Importer</title>
	<link rel="stylesheet" href="/static/style.css?v={{.Version}}">
</head>
<body>
	<h1>Music Importer</h1>

	<nav class="tabs">
		<button class="tab-btn active" data-tab="import">Import</button>
		<button class="tab-btn" data-tab="discover">Discover</button>
	</nav>

	<!-- ── Import ─────────────────────────────────────────────────────────── -->
	<section id="tab-import" class="tab-pane active">
		<form action="/run" method="POST">
			<button type="submit" class="run-btn" {{if .Running}}disabled{{end}}>
				{{if .Running}}Importer Running…{{else}}Run Importer{{end}}
			</button>
		</form>

		{{with .Session}}
		<div class="content-box session">
			<div class="session-header">
				<h2>Last Run &mdash; {{.StartedAt.Format "Jan 2, 2006 15:04:05"}}</h2>
				<span class="duration">{{duration .StartedAt .FinishedAt}}</span>
			</div>

			{{range .Albums}}{{$album := .}}
			<article class="album">
				<div class="album-header">
					<span class="album-name" title="{{.Path}}">{{.Name}}</span>
					{{if .Succeeded}}
						{{if .HasWarnings}}
							<span class="badge badge-warn">&#9888; warnings</span>
						{{else}}
							<span class="badge badge-ok">&#10003; ok</span>
						{{end}}
					{{else}}
						<span class="badge badge-fatal">&#10007; failed at {{.FatalStep}}</span>
					{{end}}
				</div>

				{{with .Metadata}}
				<div class="metadata">
					<span class="metadata-title">{{.Artist}} &mdash; {{.Album}}{{if .Year}} ({{.Year}}){{end}}</span>
					{{if $album.MetadataSource}}
					<span class="metadata-pill">
						<span class="pill-label">via</span>
						{{if eq (print $album.MetadataSource) "beets"}}
							<span class="pill-beets">beets</span>
						{{else if eq (print $album.MetadataSource) "musicbrainz"}}
							<span class="pill-musicbrainz">MusicBrainz</span>
						{{else if eq (print $album.MetadataSource) "file_tags"}}
							<span class="pill-file_tags">file tags</span>
						{{else}}
							<span class="pill-unknown">unknown</span>
						{{end}}
					</span>
					{{end}}
				</div>
				{{end}}

				<div class="info-grid">
					<div class="info-card">
						<div class="info-card-label">Tracks</div>
						<div class="info-card-value">{{.TrackCount}}</div>
					</div>

					<div class="info-card">
						<div class="info-card-label">Lyrics</div>
						{{if eq .LyricsStats.Total 0}}
							<div class="info-card-value info-dim">n/a</div>
						{{else}}
							<div class="info-card-value {{if gt .LyricsStats.Downloaded 0}}info-ok{{else}}info-dim{{end}}">
								{{.LyricsStats.Downloaded}} / {{.LyricsStats.Total}}
							</div>
							<div class="info-card-sub">
								{{if gt .LyricsStats.Synced 0}}<span class="info-ok">{{.LyricsStats.Synced}} synced</span>{{end}}
								{{if and (gt .LyricsStats.Synced 0) (gt .LyricsStats.Plain 0)}} &middot; {{end}}
								{{if gt .LyricsStats.Plain 0}}<span class="info-warn">{{.LyricsStats.Plain}} plain</span>{{end}}
								{{if gt .LyricsStats.AlreadyHad 0}}<span class="info-dim"> {{.LyricsStats.AlreadyHad}} existing</span>{{end}}
								{{if gt .LyricsStats.NotFound 0}}<span class="info-dim"> {{.LyricsStats.NotFound}} missing</span>{{end}}
							</div>
						{{end}}
					</div>

					<div class="info-card">
						<div class="info-card-label">Cover Art</div>
						{{if .CoverArtStats.Found}}
							{{if .CoverArtStats.Embedded}}
								<div class="info-card-value info-ok">Embedded</div>
								<div class="info-card-sub info-dim">{{.CoverArtStats.Source}}</div>
							{{else}}
								<div class="info-card-value info-warn">Found, not embedded</div>
								<div class="info-card-sub info-dim">{{.CoverArtStats.Source}}</div>
							{{end}}
						{{else}}
							<div class="info-card-value info-dim">Not found</div>
						{{end}}
					</div>
				</div>

				<div class="steps-label">Pipeline</div>
				<div class="steps">
					{{stepCell "Clean Tags" .CleanTags  ""}}
					{{stepCell "Metadata"   .TagMetadata .FatalStep}}
					{{stepCell "Lyrics"     .Lyrics      ""}}
					{{stepCell "ReplayGain" .ReplayGain  .FatalStep}}
					{{stepCell "Cover Art"  .CoverArt    .FatalStep}}
					{{stepCell "Move"       .Move        ""}}
				</div>
			</article>
			{{end}}
		</div>
		{{end}}
	</section>

	<!-- ── Discover ───────────────────────────────────────────────────────── -->
	<section id="tab-discover" class="tab-pane">
		<div class="content-box">
			<div class="search-form">
				<div class="type-toggle">
					<button class="type-btn active" data-type="release">Release</button>
					<button class="type-btn" data-type="artist">Artist</button>
				</div>
				<input id="search-q" class="search-input" type="search"
					placeholder="Search MusicBrainz…" autocomplete="off">
				<button id="search-btn" class="search-btn">Search</button>
			</div>
			<div id="search-results"></div>
		</div>
		<div class="content-box fetch-list" id="fetch-list"></div>
	</section>

	<footer>{{.Version}}</footer>

	<script src="/static/app.js?v={{.Version}}" defer></script>
</body>
</html>
