package views

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

templ SearchPage(r data.SearchResults) {
	@layout("Search - dumb") {
		<div id="search-page" class="main">
			<form method="GET">
				<input type="text" name="q" id="search-input" placeholder="Search..." value={ r.Query }/>
			</form>
			<div id="search-results">
				for _, s := range r.Sections {
					if s.Type == "song" {
						<div id="search-section">
							<h2>Songs</h2>
							for _, s := range s.Hits {
								<a id="search-item" href={ templ.URL(s.Result.Path) }>
									<img
										src={ data.ExtractImageURL(s.Result.Thumbnail) }
										alt="Song image"
									/>
									<div>
										<span>{ s.Result.ArtistNames }</span>
										<h3>{ s.Result.Title }</h3>
									</div>
								</a>
							}
						</div>
					}
					if s.Type == "album" {
						<div id="search-section">
							<h2>Albums</h2>
							for _, a := range s.Hits {
								<a id="search-item" href={ templ.URL(utils.TrimURL(a.Result.URL)) }>
									<img
										src={ data.ExtractImageURL(a.Result.AlbumImage) }
										alt="Album image"
									/>
									<div>
										<h3>{ a.Result.AlbumName }</h3>
									</div>
								</a>
							}
						</div>
					}
					if s.Type == "artist" {
						<div id="search-section">
							<h2>Artists</h2>
							for _, a := range s.Hits {
								<a id="search-item" href={ templ.URL(utils.TrimURL(a.Result.URL)) }>
									<img
										src={ data.ExtractImageURL(a.Result.ArtistImage) }
										alt="Artist image"
									/>
									<div>
										<h3>{ a.Result.ArtistName }</h3>
									</div>
								</a>
							}
						</div>
					}
				}
			</div>
		</div>
	}
}