component QuotePage(quote *arn.Quote, character *arn.Character, user *arn.User)
	QuoteTabs(quote, user)

	.quote-full-page
		.quote-main-column
			QuoteMainColumn(quote, user)
		.quote-side-column
			QuoteSideColumn(quote, user)

component QuoteMainColumn(quote *arn.Quote, user *arn.User)
	.widget-form.mountable
		QuoteContent(quote)

	.footer.mountable
		if quote.EditedBy != ""
			span Edited 
			span.utc-date(data-date=quote.Edited)
			span  by 
			a(href=quote.EditedByUser().Link())= quote.EditedByUser().Nick
		else
			span Posted 
			span.utc-date(data-date=quote.Created)
			span  by 
			a(href=quote.Creator().Link())= quote.Creator().Nick
			span .

component QuoteSideColumn(quote *arn.Quote, user *arn.User)
	QuoteInformation(quote, user)

component QuoteInformation(quote *arn.Quote, user *arn.User)
	section.quote-section.mountable
		h3.quote-section-name Information
		
		table.quote-info-table
			if quote.AnimeID != "" && quote.Anime() != nil
				tr.mountable(data-mountable-type="info")
					td.quote-info-key Anime:
					td.quote-info-value
						QuoteAnime(quote.Anime(), user)

			if quote.EpisodeNumber != -1
				tr.mountable(data-mountable-type="info")
					td.quote-info-key Episode:
					td.quote-info-value= quote.EpisodeNumber

			if quote.Time != -1
				tr.mountable(data-mountable-type="info")
					td.anime-info-key Time:
					td.anime-info-value= strconv.Itoa(quote.Time) + " min"

component QuoteTabs(quote *arn.Quote, user *arn.User)
	.tabs
		TabLike(strconv.Itoa(len(quote.Likes)), "heart", "quote", quote, user)
		Tab("Quote", "quote-left", quote.Link())
		if user != nil
			Tab("Edit", "pencil", quote.Link() + "/edit")
		Tab("History", "history", quote.Link() + "/history")

component QuoteAnime(anime *arn.Anime, user *arn.User)
	a.quote-anime-list-item(href=anime.Link(), title=anime.Title.ByUser(user))
		img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))