component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser *arn.User, user *arn.User)
	#load-more-target.anime-list
		AnimeListScrollable(animeListItems, viewUser, user)
	
	if nextIndex != -1
		.buttons
			LoadMore(nextIndex)

component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User)
	each item in animeListItems
		.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
			.anime-list-item-image-container
				a.anime-list-item-image-link(href=item.Anime().Link())
					img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user))

			.anime-list-item-name
				a(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user)

			.anime-list-item-actions
				if user != nil && item.Status != arn.AnimeListStatusCompleted && user.Location.CountryName != "Japan"
					//- if user.ID == "KpdWUlPzR"
					//- 	a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener")
					//- 		RawIcon("download")
					//- else
					if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil
						for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links
							a.tip(href=link, aria-label="Watch episode " + fmt.Sprint(item.Episodes + 1), target="_blank", rel="noopener")
								RawIcon("eye")

			.anime-list-item-airing-date
				if (item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusPlanned) && item.Anime().UpcomingEpisode() != nil
					span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)

			if item.Status != arn.AnimeListStatusCompleted
				.anime-list-item-episodes
					.anime-list-item-episodes-watched
						.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes
						
						if item.Status == arn.AnimeListStatusWatching && user != nil && user.ID == viewUser.ID
							.plus-episode.action(data-action="increaseEpisode", data-trigger="click") +
						else
							.plus-episode-dummy +

					.anime-list-item-episodes-separator /
					.anime-list-item-episodes-max= item.Anime().EpisodeCountString()

			.anime-list-item-rating.tip(aria-label="O: " + utils.FormatRating(item.Rating.Overall) + " | S: " + utils.FormatRating(item.Rating.Story) + " | V: " + utils.FormatRating(item.Rating.Visuals) + " | M: " + utils.FormatRating(item.Rating.Soundtrack))
				.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall)
			
			//- if item.Status == arn.AnimeListStatusCompleted
			//- 	.anime-list-item-rating(title="Story rating")
			//- 		span.rating-label S:
			//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Story", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Story)
			//- 	.anime-list-item-rating(title="Visuals rating")
			//- 		span.rating-label V:
			//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Visuals", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Visuals)
			//- 	.anime-list-item-rating(title="Soundtrack rating")
			//- 		span.rating-label M:
			//- 		.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Soundtrack", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Soundtrack)