Implemented anime characters

pages/anime/anime.pixy

@@ -147,6 +147,13 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, epis
 			each track in tracks
 				SoundTrack(track)
 	
+	if anime.Characters() != nil && len(anime.Characters().Items) > 0
+		h3.anime-section-name Characters
+		.characters
+			each character in anime.Characters().Items
+				if character.Character() != nil
+					Character(character.Character())
+	
 	if len(anime.Episodes().Items) > 0
 		if episodesReversed
 			h3.anime-section-name Latest episodes

pages/anime/character.scarlet

@@ -0,0 +1,25 @@
+.characters
+	horizontal-wrap
+
+.character
+	vertical
+	align-items center
+	margin 0.5rem
+
+	:hover
+		.character-name
+			opacity 1
+
+.character-image
+	border-radius 3px
+	object-fit cover
+
+.character-name
+	font-size 0.8rem
+	color text-color
+	opacity 0.5
+	default-transition
+
+.character-image
+	width 112px
+	height 175px

pages/animelistitem/animelistitem.pixy

@@ -2,17 +2,19 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
 	.widget-form.mountable
 		.widget.anime-list-item-view(data-api="/api/animelist/" + viewUser.ID + "/update/" + anime.ID)
 			h1= anime.Title.Canonical
-
-			InputNumber("Episodes", float64(item.Episodes), "Episodes", "Number of episodes you watched", "0", arn.EpisodeCountMax(anime.EpisodeCount), "1")
 			
-			.widget-input
-				label(for="Status") Status:
-				select.widget-element.action(id="Status", data-field="Status", value=item.Status, data-action="save", data-trigger="change")
-					option(value=arn.AnimeListStatusWatching) Watching
-					option(value=arn.AnimeListStatusCompleted) Completed
-					option(value=arn.AnimeListStatusPlanned) Plan to watch
-					option(value=arn.AnimeListStatusHold) On hold
-					option(value=arn.AnimeListStatusDropped) Dropped
+			.anime-list-item-progress-edit
+				.anime-list-item-episodes-edit
+					InputNumber("Episodes", float64(item.Episodes), "Episodes", "Number of episodes you watched", "0", arn.EpisodeCountMax(anime.EpisodeCount), "1")
+				
+				.widget-input.anime-list-item-status-edit
+					label(for="Status") Status:
+					select.widget-element.action(id="Status", data-field="Status", value=item.Status, data-action="save", data-trigger="change")
+						option(value=arn.AnimeListStatusWatching) Watching
+						option(value=arn.AnimeListStatusCompleted) Completed
+						option(value=arn.AnimeListStatusPlanned) Plan to watch
+						option(value=arn.AnimeListStatusHold) On hold
+						option(value=arn.AnimeListStatusDropped) Dropped
 
 			.anime-list-item-rating-edit
 				InputNumber("Rating.Overall", item.Rating.Overall, arn.OverallRatingName(item.Episodes), "Overall rating on a scale of 0 to 10", "0", "10", "0.1")

pages/animelistitem/animelistitem.scarlet

@@ -1,3 +1,15 @@
+// .anime-list-item-progress-edit
+// 	horizontal-wrap
+// 	justify-content space-between
+// 	width 100%
+
+// .anime-list-item-episodes-edit
+// 	flex 1
+// 	margin-right content-padding
+
+// .anime-list-item-status-edit
+// 	flex-basis 50%
+
 .anime-list-item-rating-edit
 	horizontal-wrap
 	justify-content space-between