component SoundTrack(track *arn.SoundTrack)
	.soundtrack.mountable(id=track.ID)
		SoundTrackContent(track)
		SoundTrackFooter(track)

component SoundTrackContent(track *arn.SoundTrack)
	.soundtrack-content
		if track.MainAnime() != nil
			a.soundtrack-anime-link(href="/anime/" + track.MainAnime().ID)
				img.soundtrack-anime-image.lazy(data-src=track.MainAnime().ImageLink("medium"), data-webp="true", data-color=track.MainAnime().AverageColor(), alt=track.MainAnime().Title.Canonical, title=track.MainAnime().Title.Canonical)

		SoundTrackMedia(track)

component SoundTrackMedia(track *arn.SoundTrack)
	if track.File != ""
		.soundtrack-media
			.soundtrack-play-area.action(data-action="toggleAudio", data-trigger="click", data-audio-src="https://notify.moe/audio/" + track.File, data-soundtrack-id=track.ID)
				img.soundtrack-image.lazy(data-src="https://img.youtube.com/vi/" + track.MediaByService("Youtube")[0].ServiceID + "/0.jpg", alt=track.Title)
				button.soundtrack-play-button
					RawIcon("play")
				
				.soundtrack-visualizer
					.visualizer-box.visualizer-box-1
					.visualizer-box.visualizer-box-2
					.visualizer-box.visualizer-box-3
	else
		ExternalMedia(track.Media[0])

component SoundTrackFooter(track *arn.SoundTrack)
	.soundtrack-footer
		if track.Title == ""
			a(href=track.Link() + "/edit") untitled
		else
			a(href=track.Link())= track.Title
		span  posted 
		span.utc-date(data-date=track.Created)
		span  by 
		a(href=track.Creator().Link())= track.Creator().Nick + " "

component ExternalMedia(media *arn.ExternalMedia)
	iframe.lazy(data-src=media.EmbedLink(), allowfullscreen="allowfullscreen")