package views

import (
	"fmt"
	"github.com/rramiachraf/dumb/data"
)

templ LyricsPage(s data.Song) {
	@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
		<div id="container" class="trio-split">
			<div id="metadata">
				<img
					id="album-artwork"
					src={ data.ExtractImageURL(s.Image) }
					alt="Song image"
				/>
				<div id="metadata-info">
					<h2>{ s.Artist }</h2>
					<h1>{ s.Title }</h1>
				</div>
			</div>
			<div id="lyrics">
				@templ.Raw(s.Lyrics)
			</div>
			<div id="info">
				if s.About[0] != "?" {
					<div id="description" dir="auto">
						<h1 id="title">About</h1>
						<p class="hidden" id="full">{ s.About[0] }</p>
						<p id="summary">{ s.About[1] }</p>
					</div>
				}
				if len(s.Credits) > 0 {
					<div id="credits">
						<h1 id="title">Credits</h1>
						for key, val := range s.Credits {
							<details>
								<summary>{ key }</summary>
								<p>{ val }</p>
							</details>
						}
					</div>
				}
				if s.Album.Name != "" {
					<div id="lyrics-album-container">
						<h1 id="title">{ s.Album.Name }</h1>
						<a href={ templ.URL(s.Album.URL) }>
							<img
								title={ "Album: " + s.Album.Name }
								id="album-artwork"
								src={ s.Album.Image }
								alt="Album image"
							/>
						</a>
					</div>
				}
			</div>
		</div>
	}
}