component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
	AnimeTabs(anime)
	
	.anime-header(data-id=anime.ID)
		if anime.Image.Small != ""
			.anime-image-container
				img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.ByUser(user))

				if anime.StartDate != ""
					.anime-start-date
						span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
						if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
							span  - 
							span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
		
		.space

		.anime-info
			h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)

			//- if user && user.titleLanguage === "japanese"
			//- 	span.second-title(title=anime.Title.English !== anime.Title.Romaji ? anime.Title.English : null)= anime.Title.Romaji
			//- else
			if anime.Title.Japanese != anime.Title.Canonical
				h2.anime-alternative-title
					Japanese(anime.Title.Japanese)

			//- h3.anime-section-name.anime-summary-header Summary
			p.anime-summary= anime.Summary
	
	if user != nil
		.buttons.anime-actions
			if user.Role == "editor" || user.Role == "admin"
				a.button.ajax(href=anime.Link() + "/edit")
					Icon("pencil-square-o")
					span Edit anime

			if user.AnimeList().Contains(anime.ID)
				a.button.ajax(href="/+" + user.Nick + "/animelist/anime/" + anime.ID)
					Icon("pencil")
					span Edit in collection
			else
				button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID)
					Icon("plus")
					span Add to collection

	h3.anime-section-name Ratings
	.anime-rating-categories
		.anime-rating-category(title=toString(anime.Rating.Overall))
			if anime.Status == "upcoming"
				.anime-rating-category-name Hype
			else
				.anime-rating-category-name Overall
			Rating(anime.Rating.Overall, user)
		.anime-rating-category(title=toString(anime.Rating.Story))
			.anime-rating-category-name Story
			Rating(anime.Rating.Story, user)
		.anime-rating-category(title=toString(anime.Rating.Visuals))
			.anime-rating-category-name Visuals
			Rating(anime.Rating.Visuals, user)
		.anime-rating-category(title=toString(anime.Rating.Soundtrack))
			.anime-rating-category-name Soundtrack
			Rating(anime.Rating.Soundtrack, user)

	if len(friends) > 0
		h3.anime-section-name Friends
		
		.anime-friends
			.user-avatars
				each friend in friends
					if friend.Nick != ""
						if friend.IsActive()
							.mountable
								FriendEntry(friend, listItems)
						else
							.mountable
								.inactive-user
									FriendEntry(friend, listItems)

	if anime.Relations() != nil && len(anime.Relations().Items) > 0
		h3.anime-section-name Relations
		.anime-relations
			each relation in anime.Relations().Items
				a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
					img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
					.anime-relation-type= relation.HumanReadableType()
					.anime-relation-year
						if relation.Anime().StartDate != ""
							span= relation.Anime().StartDate[:4]

	if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
		h3.anime-section-name Video
		.anime-trailer.video-container
			iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")

	//- if anime.Tracks != nil && anime.Tracks.Opening != nil
	//- 	h3.anime-section-name Tracks
	//- 	iframe.anime-track(src="https://w.soundcloud.com/player/?url=" + anime.Tracks.Opening.URI + "?auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true")

	//- if user && friendsWatching && friendsWatching.length > 0
	//- 	include ../messages/avatar.pug
		
	//- 	h3.anime-section-name Watching
	//- 	.user-list
	//- 		each watcher in friendsWatching
	//- 			+avatar(watcher)

	//- if len(anime.Relations) > 0
	//- 	h3.anime-section-name Relations
	//- 	.relations
	//- 		each relation in anime.Relations
	//- 			a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji)
	//- 				img.anime-image.relation-image(src=relation.Anime().Image, alt=relation.Anime().Title.Romaji)
	//- 				.relation-type= arn.Capitalize(relation.Type)

	//- if len(anime.Genres) > 0
	//- 	h3.anime-section-name Genres
	//- 	.light-button-group
	//- 		each genre in anime.Genres
	//- 			if genre != ""
	//- 				a.light-button.ajax(href="/genres/" + arn.GetGenreIDByName(genre))
	//- 					Icon(arn.GetGenreIcon(genre))
	//- 					span= genre
	
	//- if len(anime.Studios) > 0
	//- 	h3.anime-section-name Studios
	//- 	.light-button-group
	//- 		each studio in anime.Studios
	//- 			a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank")
	//- 				Icon("building")
	//- 				span= studio.Name

	//- //-if crunchy
	//- //-	h3.anime-section-name Episodes

	//- if canEdit
	//- 	#staff-info
	//- 		h3.anime-section-name Links
	//- 		table
	//- 			tbody
	//- 				tr
	//- 					td MyAnimeList
	//- 					td
	//- 						input.save-on-change(id="MyAnimeList", type="text", value=providers.MyAnimeList ? providers.MyAnimeList.providerId : ", disabled=(providers.MyAnimeList && providers.MyAnimeList.similarity === 1) ? true : false)
	//- 					td
	//- 						a(href="https://www.google.co.jp/search?q=site:myanimelist.net/anime+" + anime.title.romaji.replace(/ /g, "+"), target="_blank")
	//- 							.fa.fa-search
	//- 					td
	//- 				tr
	//- 					td HummingBird
	//- 					td
	//- 						input.save-on-change(id="HummingBird", type="text", value=providers.HummingBird ? providers.HummingBird.providerId : ", disabled=(providers.HummingBird && providers.HummingBird.similarity === 1) ? true : false)
	//- 					td
	//- 						a(href="https://www.google.co.jp/search?q=site:hummingbird.me/anime+" + anime.title.romaji.replace(/ /g, "+"), target="_blank")
	//- 							.fa.fa-search
	//- 					td
	//- 				tr
	//- 					td AnimePlanet
	//- 					td
	//- 						input.save-on-change(id="AnimePlanet", type="text", value=providers.AnimePlanet ? providers.AnimePlanet.providerId : ", disabled=(providers.AnimePlanet && providers.AnimePlanet.similarity === 1) ? true : false)
	//- 					td
	//- 						a(href="https://www.google.co.jp/search?q=site:anime-planet.com/anime+" + anime.title.english.replace(/ /g, "+"), target="_blank")
	//- 							.fa.fa-search
	//- 					td

	//- 				- var title = providers.Nyaa ? providers.Nyaa.title : "
	//- 				- var proposedTitle = nyaa.buildNyaaTitle(anime.title.romaji)
	//- 				tr
	//- 					td Nyaa
	//- 					td
	//- 						input.save-on-change(id="Nyaa", type="text", value=title, placeholder=proposedTitle)
	//- 					td
	//- 						a(href="https://www.nyaa.se/?page=search&cats=1_37&filter=0&sort=2&term=" + (title ? title.replace(/ /g, "+") : proposedTitle), target="_blank")
	//- 							.fa.fa-search
	//- 					td
	//- 						if providers.Nyaa && providers.Nyaa.episodes !== undefined
	//- 							span(class=providers.Nyaa.episodes === 0 ? "entry-error" : "entry-ok")= providers.Nyaa.episodes + " eps"

	h3.anime-section-name Popularity
	.anime-rating-categories
		.anime-rating-category
			.anime-rating-category-name Watching
			.anime-rating= anime.Popularity.Watching
		.anime-rating-category
			.anime-rating-category-name Completed
			.anime-rating= anime.Popularity.Completed
		.anime-rating-category
			.anime-rating-category-name Planned
			.anime-rating= anime.Popularity.Planned
		.anime-rating-category
			.anime-rating-category-name Hold
			.anime-rating= anime.Popularity.Hold
		.anime-rating-category
			.anime-rating-category-name Dropped
			.anime-rating= anime.Popularity.Dropped
	
	//- h3.anime-section-name Reviews
	//- p Coming soon.

	h3.anime-section-name Links
	.light-button-group
		//- if anime.Links != nil
		//- 	each link in anime.Links
		//- 		a.light-button(href=link.URL, target="_blank")
		//- 			Icon("external-link")
		//- 			span= link.Title
		a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
			Icon("external-link")
			span Kitsu
		
		each mapping in anime.Mappings
			a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
				Icon("external-link")
				span= mapping.Name()

			//- if providers.HummingBird
			//- 	a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird

			//- if providers.MyAnimeList
			//- 	a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList

			//- if providers.AnimePlanet
			//- 	a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet

	.footer
		//- if user != nil && user.Role == "admin"
		//- 	a(href="/api/anime/" + anime.ID) Anime API
		//- 	span  | 
		span Powered by Kitsu.
	//- 		if descriptionSource
	//- 			span= " Summary by " + summarySource + "."
	//- //-
	//- 	h3.anime-section-name Synonyms
	//- 	if anime.title.synonyms
	//- 		ul.anime-synonyms
	//- 			li.anime-japanese-title= anime.title.japanese
	//- 			each synonym in anime.title.synonyms
	//- 				li= synonym

component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem)
	CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating")