{{define "search"}}{{template "header" .}}
<form method="get" action="/search" class="mb-4">
  <input type="search" name="q" class="form-control" placeholder="Search artists, albums, songs..." value="{{.Data.Query}}" autofocus>
</form>

{{if .Data.Query}}
<h2 class="h6 text-secondary">Artists</h2>
{{if .Data.Artists}}<div class="vs-grid mb-4">{{range .Data.Artists}}{{template "artist_card" .}}{{end}}</div>{{else}}<p class="text-secondary small">No matching artists.</p>{{end}}

<h2 class="h6 text-secondary">Albums</h2>
{{if .Data.Albums}}<div class="vs-grid mb-4">{{range .Data.Albums}}{{template "album_card" .}}{{end}}</div>{{else}}<p class="text-secondary small">No matching albums.</p>{{end}}

<h2 class="h6 text-secondary">Songs</h2>
{{if .Data.Songs}}{{template "song_rows" .Data.Songs}}{{else}}<p class="text-secondary small">No matching songs.</p>{{end}}
{{end}}
{{template "footer" .}}{{end}}