Refactoring, database structure changed

WatchIt.Website/Clients/IAccountsClient.cs

@@ -0,0 +1,118 @@
+using Refit;
+using WatchIt.Database.Model.Media;
+using WatchIt.DTO.Models.Controllers.Accounts.Account;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountBackgroundPicture;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountEmail;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountLogout;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountPassword;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountProfileInfo;
+using WatchIt.DTO.Models.Controllers.Accounts.AccountUsername;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Query;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.People.Person.Query;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IAccountsClient
+{
+    #region Main
+    
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<AccountResponse>>> GetAccounts([Query] AccountFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_profile_pictures")] bool includeProfilePictures = false);
+    
+    [Get("/{id}")]
+    Task<IApiResponse<AccountResponse>> GetAccount(long id, [Query][AliasAs("include_profile_pictures")] bool includeProfilePictures = false);
+
+    [Post("/")]
+    Task<IApiResponse<AccountResponse>> PostAccount([Body] AccountRequest body);
+    
+    #endregion
+    
+    #region Profile picture
+    
+    [Get("/{id}/profile_picture")]
+    Task<IApiResponse<ImageResponse>> GetAccountProfilePicture(long id);
+
+    [Put("/profile_picture")]
+    Task<IApiResponse<ImageResponse>> PutAccountProfilePicture([Authorize]string token, [Body] ImageRequest body);
+
+    [Delete("/profile_picture")]
+    Task<IApiResponse> DeleteAccountProfilePicture([Authorize]string token);
+
+    #endregion
+    
+    #region Background picture
+    
+    [Get("/{id}/background_picture")]
+    Task<IApiResponse<PhotoResponse>> GetAccountBackgroundPicture(long id);
+
+    [Put("/background_picture")]
+    Task<IApiResponse<PhotoResponse>> PutAccountBackgroundPicture([Authorize]string token, [Body] AccountBackgroundPictureRequest body);
+
+    [Delete("/background_picture")]
+    Task<IApiResponse> DeleteAccountBackgroundPicture([Authorize]string token);
+
+    #endregion
+    
+    #region Profile edit
+    
+    [Patch("/profile_info")]
+    Task<IApiResponse> PatchAccountProfileInfo([Authorize]string token, [Body] AccountProfileInfoRequest body);
+    
+    [Patch("/username")]
+    Task<IApiResponse> PatchAccountUsername([Authorize]string token, [Body] AccountUsernameRequest body);
+    
+    [Patch("/email")]
+    Task<IApiResponse> PatchAccountEmail([Authorize]string token, [Body] AccountEmailRequest body);
+    
+    [Patch("/password")]
+    Task<IApiResponse> PatchAccountPassword([Authorize]string token, [Body] AccountPasswordRequest body);
+    
+    #endregion
+
+    #region Log out
+    
+    [Delete("/logout")]
+    Task<IApiResponse> Logout([Body] AccountLogoutRequest body);
+
+    [Delete("/logout_all")]
+    Task<IApiResponse> LogoutAll([Authorize]string token);
+
+    #endregion
+    
+    #region Follows
+    
+    [Get("/{id}/follows")]
+    Task<IApiResponse<IEnumerable<AccountResponse>>> GetAccountFollows(long id, [Query] AccountFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+    
+    [Get("/{id}/followers")]
+    Task<IApiResponse<IEnumerable<AccountResponse>>> GetAccountFollowers(long id, [Query] AccountFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+    
+    [Post("/follows/{followed_account_id}")]
+    Task<IApiResponse> PostAccountFollow([Authorize]string token, [AliasAs("followed_account_id")] long followedAccountId);
+
+    [Delete("/follows/{followed_account_id}")]
+    Task<IApiResponse> DeleteAccountFollow([Authorize]string token, [AliasAs("followed_account_id")] long followedAccountId);
+
+    #endregion
+    
+    #region Ratings
+    
+    [Get("/{id}/media")]
+    Task<IApiResponse<IEnumerable<MediumUserRatedResponse>>> GetAccountRatedMedia(long id, [Query] MediumFilterQuery? filterQuery = null, [Query] MediumUserRatedFilterQuery<Medium>? userRatedFilterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+    
+    [Get("/{id}/media/movies")]
+    Task<IApiResponse<IEnumerable<MediumMovieUserRatedResponse>>> GetAccountRatedMediaMovies(long id, [Query] MediumMovieFilterQuery? filterQuery = null, [Query] MediumUserRatedFilterQuery<MediumMovie>? userRatedFilterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+    
+    [Get("/{id}/media/series")]
+    Task<IApiResponse<IEnumerable<MediumSeriesUserRatedResponse>>> GetAccountRatedMediaSeries(long id, [Query] MediumSeriesFilterQuery? filterQuery = null, [Query] MediumUserRatedFilterQuery<MediumSeries>? userRatedFilterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+    
+    [Get("/{id}/people")]
+    Task<IApiResponse<IEnumerable<PersonUserRatedResponse>>> GetAccountRatedPeople(long id, [Query] PersonFilterQuery? filterQuery = null, [Query] PersonUserRatedFilterQuery? userRatedFilterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+    
+    #endregion
+}

WatchIt.Website/Clients/IAuthenticationClient.cs

@@ -0,0 +1,13 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Authentication;
+
+namespace WatchIt.Website.Clients;
+
+public interface IAuthenticationClient
+{
+    [Post("/authenticate")]
+    Task<IApiResponse<AuthenticationResponse>> Authenticate([Body] AuthenticationRequest body);
+
+    [Post("/authenticate_refresh")]
+    Task<IApiResponse<AuthenticationResponse>> AuthenticateRefresh([Body] AuthenticationRefreshRequest body);
+}

WatchIt.Website/Clients/IGendersClient.cs

@@ -0,0 +1,20 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genders.Gender;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IGendersClient
+{
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<GenderResponse>>> GetGenders([Query] GenderFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/{id}")]
+    Task<IApiResponse<GenderResponse>> GetGender(short id);
+
+    [Post("/")]
+    Task<IApiResponse<GenderResponse>> PostGender([Authorize]string token, [Body] GenderRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeleteGender([Authorize]string token, short id);
+}

WatchIt.Website/Clients/IGenresClient.cs

@@ -0,0 +1,20 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genres.Genre;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IGenresClient
+{
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<GenreResponse>>> GetGenres([Query] GenreFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/{id}")]
+    Task<IApiResponse<GenreResponse>> GetGenre(short id);
+
+    [Post("/")]
+    Task<IApiResponse<GenreResponse>> PostGenre([Authorize]string token, [Body] GenreRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeleteGenre([Authorize]string token, short id);
+}

WatchIt.Website/Clients/IMediaClient.cs

@@ -0,0 +1,107 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genres.Genre;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Query;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Request;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IMediaClient
+{
+    #region Main
+
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<MediumResponse>>> GetMedia([Query(CollectionFormat.Multi)] MediumFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/{id}")]
+    Task<IApiResponse<MediumResponse>> GetMedium(long id, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/movies")]
+    Task<IApiResponse<IEnumerable<MediumMovieResponse>>> GetMediumMovies([Query(CollectionFormat.Multi)] MediumMovieFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/movies/{id}")]
+    Task<IApiResponse<MediumMovieResponse>> GetMediumMovie(long id, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/series")]
+    Task<IApiResponse<IEnumerable<MediumSeriesResponse>>> GetMediumSeries([Query(CollectionFormat.Multi)] MediumSeriesFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/series/{id}")]
+    Task<IApiResponse<MediumSeriesResponse>> GetMediumSeries(long id, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Post("/movies")]
+    Task<IApiResponse<MediumMovieResponse>> PostMediumMovie([Authorize]string token, [Body] MediumMovieRequest body);
+
+    [Post("/series")]
+    Task<IApiResponse<MediumSeriesResponse>> PostMediumSeries([Authorize]string token, [Body] MediumSeriesRequest body);
+
+    [Put("/movies/{id}")]
+    Task<IApiResponse<MediumMovieResponse>> PutMediumMovie([Authorize]string token, long id, [Body] MediumMovieRequest body);
+
+    [Put("/series/{id}")]
+    Task<IApiResponse<MediumSeriesResponse>> PutMediumSeries([Authorize]string token, long id, [Body] MediumSeriesRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeleteMedium([Authorize]string token, long id);
+
+    #endregion
+
+    #region Genres
+
+    [Get("/{id}/genres")]
+    Task<IApiResponse<IEnumerable<GenreResponse>>> GetMediumGenres(long id, [Query] GenreFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Post("/{id}/genres/{genre_id}")]
+    Task<IApiResponse> PostMediumGenre([Authorize]string token, long id, [AliasAs("genre_id")] short genreId);
+
+    [Delete("/{id}/genres/{genre_id}")]
+    Task<IApiResponse> DeleteMediumGenre([Authorize]string token, long id, [AliasAs("genre_id")] short genreId);
+
+    #endregion
+
+    #region Rating
+
+    [Get("/{id}/rating")]
+    Task<IApiResponse<RatingOverallResponse>> GetMediumRating(long id);
+
+    [Get("/{id}/rating/{account_id}")]
+    Task<IApiResponse<RatingUserResponse>> GetMediumUserRating(long id, [AliasAs("account_id")] long accountId);
+
+    [Put("/{id}/rating")]
+    Task<IApiResponse> PutMediumRating([Authorize]string token, long id, [Body] RatingRequest body);
+
+    [Delete("/{id}/rating")]
+    Task<IApiResponse> DeleteMediumRating([Authorize]string token, long id);
+
+    #endregion
+
+    #region View Count
+
+    [Put("/{id}/view_count")]
+    Task<IApiResponse> PutMediumViewCount(long id);
+
+    #endregion
+
+    #region Picture
+
+    [Get("/{id}/picture")]
+    Task<IApiResponse<ImageResponse>> GetMediumPicture(long id);
+
+    [Put("/{id}/picture")]
+    Task<IApiResponse<ImageResponse>> PutMediumPicture([Authorize]string token, long id, [Body] ImageRequest body);
+
+    [Delete("/{id}/picture")]
+    Task<IApiResponse> DeleteMediumPicture([Authorize]string token, long id);
+
+    #endregion
+
+    #region Photos
+
+    [Get("/{id}/photos/background")]
+    Task<IApiResponse<PhotoResponse?>> GetMediumBackgroundPhoto(long id);
+
+    #endregion
+}

WatchIt.Website/Clients/IPeopleClient.cs

@@ -0,0 +1,60 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.People.Person.Query;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IPeopleClient
+{
+    #region Main
+
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<PersonResponse>>> GetPeople([Query] PersonFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Get("/{id}")]
+    Task<IApiResponse<PersonResponse>> GetPerson(long id, [Query][AliasAs("include_pictures")] bool includePictures = false);
+
+    [Post("/")]
+    Task<IApiResponse<PersonResponse>> PostPerson([Authorize]string token, [Body] PersonRequest body);
+
+    [Put("/{id}")]
+    Task<IApiResponse<PersonResponse>> PutPerson([Authorize]string token, long id, [Body] PersonRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeletePerson([Authorize]string token, long id);
+
+    #endregion
+
+    #region Rating
+
+    [Get("/{id}/rating")]
+    Task<IApiResponse<RatingOverallResponse>> GetPersonRating(long id);
+
+    [Get("/{id}/rating/{account_id}")]
+    Task<IApiResponse<RatingUserOverallResponse>> GetPersonUserRating(long id, [AliasAs("account_id")] long accountId);
+
+    #endregion
+
+    #region View Count
+
+    [Put("/{id}/view_count")]
+    Task<IApiResponse> PutPeopleViewCount(long id);
+
+    #endregion
+
+    #region Picture
+
+    [Get("/{id}/picture")]
+    Task<IApiResponse<ImageResponse>> GetPersonPicture(long id);
+
+    [Put("/{id}/picture")]
+    Task<IApiResponse<ImageResponse>> PutPersonPicture([Authorize]string token, long id, [Body] ImageRequest body);
+
+    [Delete("/{id}/picture")]
+    Task<IApiResponse> DeletePersonPicture([Authorize]string token, long id);
+
+    #endregion
+}

WatchIt.Website/Clients/IPhotosClient.cs

@@ -0,0 +1,41 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Controllers.Photos.PhotoBackground;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IPhotosClient
+{
+    #region Main
+
+    [Get("/{id}")]
+    Task<IApiResponse<PhotoResponse>> GetPhoto(Guid id);
+
+    [Get("/")]
+    Task<IApiResponse<IEnumerable<PhotoResponse>>> GetPhotos([Query] PhotoFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Post("/")]
+    Task<IApiResponse<PhotoResponse>> PostPhoto([Authorize]string token, [Body] PhotoRequest body);
+
+    [Put("/{id}")]
+    Task<IApiResponse> PutPhoto([Authorize]string token, Guid id, [Body] PhotoRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeletePhoto([Authorize]string token, Guid id);
+
+    #endregion
+
+    #region Background
+
+    [Get("/background")]
+    Task<IApiResponse<PhotoResponse>> GetPhotoBackground();
+
+    [Put("/{photo_id}/background")]
+    Task<IApiResponse<PhotoBackgroundResponse>> PutPhotoBackground([Authorize]string token, [AliasAs("photo_id")] Guid photoId, [Body] PhotoBackgroundRequest body);
+
+    [Delete("/{photo_id}/background")]
+    Task<IApiResponse> DeletePhotoBackground([Authorize]string token, [AliasAs("photo_id")] Guid photoId);
+
+    #endregion
+}

WatchIt.Website/Clients/IRolesClient.cs

@@ -0,0 +1,92 @@
+using Refit;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Request;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Controllers.Roles.RoleActorType;
+using WatchIt.DTO.Models.Controllers.Roles.RoleCreatorType;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Clients;
+
+public interface IRolesClient
+{
+    #region Main - CRUD
+
+    [Get("/actors")]
+    Task<IApiResponse<IEnumerable<RoleActorResponse>>> GetRoleActors([Query] RoleActorFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/actors/{id}")]
+    Task<IApiResponse<RoleActorResponse>> GetRoleActor(Guid id);
+
+    [Get("/creators")]
+    Task<IApiResponse<IEnumerable<RoleCreatorResponse>>> GetRoleCreators([Query] RoleCreatorFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/creators/{id}")]
+    Task<IApiResponse<RoleCreatorResponse>> GetRoleCreator(Guid id);
+
+    [Post("/actors")]
+    Task<IApiResponse<RoleActorResponse>> PostRoleActor([Authorize]string token, [Body] RoleActorRequest body);
+
+    [Post("/creators")]
+    Task<IApiResponse<RoleCreatorResponse>> PostRoleCreator([Authorize]string token, [Body] RoleCreatorRequest body);
+
+    [Put("/actors/{id}")]
+    Task<IApiResponse<RoleActorResponse>> PutRoleActor([Authorize]string token, Guid id, [Body] RoleActorRequest body);
+
+    [Put("/creators/{id}")]
+    Task<IApiResponse<RoleCreatorResponse>> PutRoleCreator([Authorize]string token, Guid id, [Body] RoleCreatorRequest body);
+
+    [Delete("/{id}")]
+    Task<IApiResponse> DeleteRole([Authorize]string token, Guid id);
+
+    #endregion
+
+    #region Main - Rating
+
+    [Get("/{id}/rating")]
+    Task<IApiResponse<RatingOverallResponse>> GetRoleRating(Guid id);
+
+    [Get("/{id}/rating/{account_id}")]
+    Task<IApiResponse<RatingUserResponse>> GetRoleUserRating(Guid id, [AliasAs("account_id")] long accountId);
+
+    [Put("/{id}/rating")]
+    Task<IApiResponse> PutRoleRating([Authorize]string token, Guid id, [Body] RatingRequest body);
+
+    [Delete("/{id}/rating")]
+    Task<IApiResponse> DeleteRoleRating([Authorize]string token, Guid id);
+
+    #endregion
+
+    #region ActorTypes
+
+    [Get("/actors/types")]
+    Task<IApiResponse<IEnumerable<RoleActorTypeResponse>>> GetRoleActorTypes([Query] RoleActorTypeFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/actors/types/{role_actor_type_id}")]
+    Task<IApiResponse<RoleActorTypeResponse>> GetRoleActorType([AliasAs("role_actor_type_id")] short roleActorTypeId);
+
+    [Post("/actors/types")]
+    Task<IApiResponse<RoleActorTypeResponse>> PostRoleActorType([Authorize]string token, [Body] RoleActorTypeRequest body);
+
+    [Delete("/actors/types/{role_actor_type_id}")]
+    Task<IApiResponse> DeleteRoleActorType([Authorize]string token, [AliasAs("role_actor_type_id")] short roleActorTypeId);
+
+    #endregion
+
+    #region CreatorTypes
+
+    [Get("/creators/types")]
+    Task<IApiResponse<IEnumerable<RoleCreatorTypeResponse>>> GetRoleCreatorTypes([Query] RoleCreatorTypeFilterQuery? filterQuery = null, [Query] OrderQuery? orderQuery = null, [Query] PagingQuery? pagingQuery = null);
+
+    [Get("/creators/types/{role_creator_type_id}")]
+    Task<IApiResponse<RoleCreatorTypeResponse>> GetRoleCreatorType([AliasAs("role_creator_type_id")] short roleCreatorTypeId);
+
+    [Post("/creators/types")]
+    Task<IApiResponse<RoleCreatorTypeResponse>> PostRoleCreatorType([Authorize]string token, [Body] RoleCreatorTypeRequest body);
+
+    [Delete("/creators/types/{role_creator_type_id}")]
+    Task<IApiResponse> DeleteRoleCreatorType([Authorize]string token, [AliasAs("role_creator_type_id")] short roleCreatorTypeId);
+
+    #endregion
+}

WatchIt.Website/Components/App.razor

@@ -9,13 +9,16 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="css/general.css?version=0.5.0.0"/>
-    <link rel="stylesheet" href="css/panel.css?version=0.3.0.5"/>
-    <link rel="stylesheet" href="css/main_button.css?version=0.3.0.0"/>
-    <link rel="stylesheet" href="css/gaps.css?version=0.3.0.1"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.4.0.17"/>
+    <link rel="stylesheet" type="text/css" href="css/general.css?version=0.5.0.4"/>
+    <link rel="stylesheet" type="text/css" href="css/panel.css?version=0.5.0.2"/>
+    <link rel="stylesheet" type="text/css" href="css/main_button.css?version=0.5.0.2"/>
+    <link rel="stylesheet" type="text/css" href="css/gaps.css?version=0.5.0.2"/>
+    <link rel="stylesheet" type="text/css" href="css/blazor.css?version=0.5.0.6"/>
+    <link rel="stylesheet" type="text/css" href="WatchIt.Website.styles.css?version=0.5.0.2"/>
+
+    <!-- FONT AWESOME -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    
+
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -24,12 +27,14 @@
     <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
     <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
     <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
-    
+    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
+
     <!-- FONTS -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-    
+
+    <ImportMap/>
     <HeadOutlet @rendermode="InteractiveServer"/>
 </head>
 

WatchIt.Website/Components/Component.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Components.Layout;
+
+namespace WatchIt.Website.Components;
+
+public abstract class Component : ComponentBase
+{
+    #region PARAMETERS
+
+    [CascadingParameter] public required BaseLayout Base { get; set; }
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if (firstRender)
+        {
+            await OnFirstRenderAsync();
+        }
+    }
+
+    protected virtual async Task OnFirstRenderAsync()
+    {
+        await Task.CompletedTask;
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Layout/BaseLayout.razor

@@ -0,0 +1,16 @@
+@using Blazorise.Snackbar
+
+@inherits LayoutComponentBase
+
+<CascadingValue Value="@(this)">
+    @(Body)
+
+    <SnackbarStack @ref="SnackbarStack" Location="SnackbarStackLocation.Bottom" />
+    
+    <style>
+        /* TAGS */
+        body {
+            background-image: url('@(Background?.ToString() ?? "assets/placeholders/background.jpg")');
+        }
+    </style>
+</CascadingValue>

WatchIt.Website/Components/Layout/BaseLayout.razor.cs

@@ -0,0 +1,123 @@
+using System.Drawing;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Accounts.Account;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Controllers.Photos.PhotoBackground;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Layout;
+
+public partial class BaseLayout : LayoutComponentBase
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPhotosClient PhotosClient { get; set; } = null!;
+    [Inject] private IAccountsClient AccountsClient { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private static readonly PhotoBackgroundResponse StaticBackgroundSettings = new PhotoBackgroundResponse()
+    {
+        IsUniversal = true,
+        FirstGradientColor = Color.FromArgb(0xc6, 0x72, 0x1c),
+        SecondGradientColor = Color.FromArgb(0x85, 0x20, 0x0c),
+    };
+    
+    private PhotoResponse? _defaultBackground;
+    
+    #endregion
+
+
+
+    #region PROPERTIES
+
+    private PhotoResponse? _customBackground;
+    public PhotoResponse? CustomBackground
+    {
+        get => _customBackground;
+        set
+        {
+            _customBackground = value;
+            StateHasChanged();
+        }
+    }
+    public PhotoResponse? Background
+    {
+        get
+        {
+            if (CustomBackground?.Background is not null)
+            {
+                return CustomBackground;
+            }
+            return _defaultBackground?.Background is not null ? _defaultBackground : null;
+        }
+    }
+    public PhotoBackgroundResponse BackgroundSettings => Background is null ? StaticBackgroundSettings : Background.Background!;
+
+    public AccountResponse? AuthorizedAccount { get; private set; }
+    public bool AuthorizationLoaded { get; private set; }
+    
+    public SnackbarStack SnackbarStack { get; set; } = null!;
+        
+    #endregion
+
+
+
+    #region PUBLIC METHODS
+
+    public async Task RefreshAuthorization()
+    {
+        long? accountId = await AuthenticationService.GetAccountIdAsync();
+        if (accountId.HasValue)
+        {
+            IApiResponse<AccountResponse> accountResponse = await AccountsClient.GetAccount(accountId.Value, true);
+            if (accountResponse.IsSuccessful)
+            {
+                AuthorizedAccount = accountResponse.Content;
+            }
+        }
+        AuthorizationLoaded = true;
+        StateHasChanged();
+    }
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if (firstRender)
+        {
+            await OnFirstRenderAsync();
+        }
+    }
+
+    protected async Task OnFirstRenderAsync() => await Task.WhenAll(
+    [
+        GetBackground(),
+        RefreshAuthorization(),
+    ]);
+
+    protected async Task GetBackground()
+    {
+        IApiResponse<PhotoResponse?> response = await PhotosClient.GetPhotoBackground();
+        if (response.IsSuccessStatusCode)
+        {
+            _defaultBackground = response.Content;
+        }
+        StateHasChanged();
+    }
+    
+    #endregion
+}

WatchIt.Website/Components/Layout/EmptyLayout.razor

@@ -0,0 +1,7 @@
+@inherits LayoutComponentBase
+
+@layout BaseLayout
+
+
+
+@(Body)

WatchIt.Website/Components/Layout/MainLayout.razor

@@ -0,0 +1,110 @@
+@using System.Drawing
+@using System.Net
+@using WatchIt.Website.Components.Subcomponents.Common
+@using Blazorise
+@using Microsoft.AspNetCore.Components.Authorization
+@using WatchIt.DTO.Models.Controllers.Genres.Genre
+@using Size = Blazorise.Size
+@using Color = Blazorise.Color
+
+@inherits LayoutComponentBase
+
+@layout BaseLayout
+
+
+
+<div class="container-xl">
+    <div class="row sticky-top top-3 mb-2rem">
+        <div class="col">
+            <div class="panel panel-header">
+                <div class="container-grid">
+                    <div class="row align-items-center">
+                        <div class="col">
+                            <a id="logo" class="logo default-gradient" href="/">
+                                WatchIt
+                            </a>
+                        </div>
+                        <div class="col-auto">
+                            @if (_searchbarVisible)
+                            {
+                                <Searchbar OnCloseButtonClicked="@(() => _searchbarVisible = false)"/>
+                            }
+                            else
+                            {
+                                <div class="d-flex gap-2 align-items-center">
+                                    <Dropdown>
+                                        <DropdownToggle Color="Color.Default" Size="Size.Small" ToggleIconVisible="false">Database</DropdownToggle>
+                                        <DropdownMenu>
+                                            <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/media/movies"))">Movies</DropdownItem>
+                                            <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/media/series"))">TV Series</DropdownItem>
+                                            <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/people"))">People</DropdownItem>
+                                        </DropdownMenu>
+                                    </Dropdown>
+                                    @if (_genres.Any())
+                                    {
+                                        <Dropdown>
+                                            <DropdownToggle Color="Color.Default" Size="Size.Small" ToggleIconVisible="false">Genres</DropdownToggle>
+                                            <DropdownMenu MaxMenuHeight="250px">
+                                                @foreach (GenreResponse genre in _genres)
+                                                {
+                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo($"/genres/{genre.Id}/media", true))">@(genre.Name)</DropdownItem>
+                                                }
+                                            </DropdownMenu>
+                                        </Dropdown>
+                                    }
+                                    <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>
+                                </div>
+                            }
+                        </div>
+                        <div class="col">
+                            <div class="float-end">
+                                <Authorization>
+                                    <Authorized>
+                                        <Dropdown RightAligned>
+                                            <Button Color="Color.Default" Clicked="@(() => NavigationManager.NavigateTo($"/users/{BaseLayout.AuthorizedAccount!.Id}"))">
+                                                <div class="d-flex gap-2 align-items-center">
+                                                    <AccountPicture Item="@(BaseLayout.AuthorizedAccount!)" Size="30"/>
+                                                    <span>@(BaseLayout.AuthorizedAccount!.Username)</span>
+                                                </div>
+                                            </Button>
+                                            <DropdownToggle Color="Color.Default" Split />
+                                            <DropdownMenu>
+                                                <DropdownItem Clicked="@(() => NavigationManager.NavigateTo($"/users/{BaseLayout.AuthorizedAccount!.Id}"))">Your profile</DropdownItem>
+                                                <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/user_settings"))">User settings</DropdownItem>
+                                                @if (BaseLayout.AuthorizedAccount!.IsAdmin)
+                                                {
+                                                    <DropdownDivider/>
+                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/admin"))">Administrator panel</DropdownItem>
+                                                }
+                                                <DropdownDivider/>
+                                                <DropdownItem TextColor="TextColor.Danger" Clicked="@(Logout)">Log out</DropdownItem>
+                                            </DropdownMenu>
+                                        </Dropdown>
+                                    </Authorized>
+                                    <NotAuthorized>
+                                        <a class="main-button default-gradient" href="/auth?redirect_to=@(WebUtility.UrlEncode(NavigationManager.Uri))">Sign in</a>
+                                    </NotAuthorized>
+                                    <Loading>
+                                        <LoadingInline/>
+                                    </Loading>
+                                </Authorization>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row pt-3 pb-3">
+        <div class="col">
+            @Body
+        </div>
+    </div>
+</div>
+
+<style>
+    /* CLASS */
+    .default-gradient {
+        background-image: linear-gradient(45deg, @($"{ColorTranslator.ToHtml(BaseLayout.BackgroundSettings.FirstGradientColor)}, {ColorTranslator.ToHtml(BaseLayout.BackgroundSettings.SecondGradientColor)}"));
+    }
+</style>

WatchIt.Website/Components/Layout/MainLayout.razor.cs

@@ -0,0 +1,68 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genres.Genre;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Layout;
+
+public partial class MainLayout : LayoutComponentBase
+{
+    #region SERVICES
+
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IGenresClient GenresClient { get; set; } = null!;
+
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _searchbarVisible;
+
+    private IEnumerable<GenreResponse> _genres = [];
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [CascadingParameter] public required BaseLayout BaseLayout { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+    
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await OnFirstRenderAsync();
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    protected async Task OnFirstRenderAsync()
+    {
+        IApiResponse<IEnumerable<GenreResponse>> genresResponse = await GenresClient.GetGenres();
+        switch (genresResponse.IsSuccessful)
+        {
+            case true: _genres = genresResponse.Content; break;
+            case false: await BaseLayout.SnackbarStack.PushAsync("An error occured. Genres could not be loaded", SnackbarColor.Danger); break;
+        }
+    }
+
+    private async Task Logout()
+    {
+        await AuthenticationService.Logout();
+        NavigationManager.Refresh(true);
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,5 @@
+/* IDS */
+
+#logo {
+    font-size: 40px;
+}

WatchIt.Website/Components/List/Filter.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Components.List;
+
+public class Filter<TItem, TEntity, TQuery> : Component where TEntity : class where TQuery : IFilterQuery<TEntity>
+{
+    #region PARAMETERS
+    
+    [CascadingParameter]
+    public required List<TItem, TEntity, TQuery> Parent { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    protected TQuery? Query => Parent.Query;
+    
+    #endregion
+}

WatchIt.Website/Components/List/List.razor

@@ -1,15 +1,22 @@
-@typeparam TItem where TItem : WatchIt.Common.Query.IQueryOrderable<TItem>
-@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TItem>
+@using Blazorise
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+
+@typeparam TItem
+@typeparam TEntity where TEntity : class        
+@typeparam TQuery where TQuery : WatchIt.DTO.Query.IFilterQuery<TEntity>
+
+@inherits Component
 
 
            
 <CascadingValue Value="this">
     <div class="vstack gap-3">
-        <div class="rounded-3 panel panel-regular p-2 px-3 z-3">
+        <div class="panel panel-section-header z-3">
             <div class="container-grid">
                 <div class="row gx-3">
                     <div class="col">
-                        <h2 class="m-0">@(Title)</h2>
+                        <h3 class="fw-bold m-0">@(Title)</h3>
                     </div>
                     <div class="col-auto align-self-center">
                         <div class="input-group input-group-sm">
@@ -52,22 +59,21 @@
                 {
                     foreach (TItem item in _items)
                     {
-                        long id = IdSource(item);
+                        long id = IdFunc(item);
                         string url = string.Format(UrlIdTemplate, id);
                         <div class="panel p-2">
-                            <ListItemComponent Name="@(NameSource(item))"
-                                               AdditionalInfo="@(AdditionalNameInfoSource(item))"
-                                               PosterPlaceholder="@(PosterPlaceholder)"
-                                               PosterDownloadingTask="@(action => PictureDownloadingTask(id, action))"
-                                               GlobalRating="@(RatingSource(item))"
-                                               SecondaryRatingSingle="@(SecondaryRatingSingleSource?.Invoke(item))"
-                                               SecondaryRatingMultiple="@(SecondaryRatingMultipleSource?.Invoke(item))"
-                                               SecondaryRatingTitle="@(SecondaryRatingTitle)"
-                                               GetGlobalRatingMethod="@(action => GetGlobalRatingMethod(id, action))"
-                                               GetUserRatingMethod="@(GetUserRatingMethod is not null ? (user, actionSuccess, actionNotFound) => GetUserRatingMethod(id, user, actionSuccess, actionNotFound) : null)"
-                                               PutRatingMethod="@(PutRatingMethod is not null ? (request) => PutRatingMethod(id, request) : null)"
-                                               DeleteRatingMethod="@(DeleteRatingMethod is not null ? () => DeleteRatingMethod(id) : null)"
-                                               ItemUrl="@(url)"/>
+                            <VerticalListItem Name="@(NameFunc(item))"
+                                              AdditionalInfo="@(AdditionalNameInfoFunc(item))"
+                                              PicturePlaceholder="@(PicturePlaceholder)"
+                                              PictureFunc="@(() => PictureFunc(item))"
+                                              GlobalRating="@(GlobalRatingFunc(item))"
+                                              SecondaryRatingTitle="@(SecondaryRatingTitle)"
+                                              GetGlobalRatingMethod="@(() => GetGlobalRatingMethod(item))"
+                                              GetSecondaryRatingMethod="@(GetSecondaryRatingMethod is not null ? () => GetSecondaryRatingMethod(item) : null)"
+                                              GetYourRatingMethod="@(GetYourRatingMethod is not null ? async userId => (int?)(await GetYourRatingMethod(item, userId))?.Rating : null)"
+                                              PutYourRatingMethod="@(PutYourRatingMethod is not null ? request => PutYourRatingMethod(item, request) : null)"
+                                              DeleteYourRatingMethod="@(DeleteYourRatingMethod is not null ? () => DeleteYourRatingMethod(item) : null)"
+                                              ItemUrl="@(url)"/>
                         </div>
                     }
                     if (!_allItemsLoaded)
@@ -98,13 +104,13 @@
             }
             else
             {
-                <ErrorPanelComponent ErrorMessage="@_error"/>
+                <ErrorPanel ErrorMessage="@_error"/>
             }
         }
         else
         {
             <div class="m-5">
-                <LoadingComponent/>
+                <Loading/>
             </div>
         }
     </div>

WatchIt.Website/Components/List/List.razor.cs

@@ -0,0 +1,124 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.DTO.Query;
+
+namespace WatchIt.Website.Components.List;
+
+public partial class List<TItem, TEntity, TQuery> : Component where TEntity : class where TQuery : IFilterQuery<TEntity>
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required string Title { get; set; }
+    
+    [Parameter] public required Func<TQuery, OrderQuery, PagingQuery, Task<IEnumerable<TItem>>> GetItemsMethod { get; set; }
+    
+    [Parameter] public required Func<TItem, long> IdFunc { get; set; }
+    [Parameter] public required Func<TItem, string> NameFunc { get; set; }
+    [Parameter] public Func<TItem, string?> AdditionalNameInfoFunc { get; set; } = _ => null;
+    [Parameter] public required Func<TItem, Task<ImageResponse?>> PictureFunc { get; set; }
+    [Parameter] public required Func<TItem, RatingOverallResponse> GlobalRatingFunc { get; set; }
+    
+    [Parameter] public required string UrlIdTemplate { get; set; }
+    [Parameter] public required string PicturePlaceholder { get; set; }
+    
+    [Parameter] public string? SecondaryRatingTitle { get; set; }
+    
+    [Parameter] public required Func<TItem, Task<RatingOverallResponse?>> GetGlobalRatingMethod { get; set; }
+    [Parameter] public Func<TItem, Task<IRatingResponse?>>? GetSecondaryRatingMethod { get; set; }
+    [Parameter] public Func<TItem, long, Task<IRatingUserResponse?>>? GetYourRatingMethod { get; set; }
+    [Parameter] public Func<TItem, RatingRequest, Task>? PutYourRatingMethod { get; set; }
+    [Parameter] public Func<TItem, Task>? DeleteYourRatingMethod { get; set; }
+    
+    [Parameter] public required RenderFragment ChildContent { get; set; }
+    
+    [Parameter] public TQuery Query { get; set; } = Activator.CreateInstance<TQuery>()!;
+    [Parameter] public required Dictionary<string, string> SortingOptions { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private OrderQuery _orderQuery = new OrderQuery();
+    private PagingQuery _pagingQuery = new PagingQuery
+    {
+        First = 100,
+    };
+
+    private bool _loaded;
+    private string? _error;
+
+    private List<TItem> _items = new List<TItem>();
+    private bool _allItemsLoaded;
+    private bool _itemsLoading;
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        _orderQuery.OrderBy = SortingOptions.Keys.First();
+        await DownloadItems();
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+    
+    private async Task DownloadItems()
+    {
+        _itemsLoading = true;
+        IEnumerable<TItem> items = await GetItemsMethod(Query, _orderQuery, _pagingQuery);
+        _items.AddRange(items);
+        if (items.Count() < 100)
+        {
+            _allItemsLoaded = true;
+        }
+        else
+        {
+            _pagingQuery.After ??= 0;
+            _pagingQuery.After += 100;
+        }
+        _itemsLoading = false;
+    }
+
+    private async Task UpdateItems()
+    {
+        _loaded = false;
+        _pagingQuery.First = 100;
+        _pagingQuery.After = null;
+        _items.Clear();
+        await DownloadItems();
+        _loaded = true;
+    }
+    
+    private async Task SortingAscendingChanged(ChangeEventArgs args)
+    {
+        _orderQuery.OrderAscending = (bool)args.Value!;
+        await UpdateItems();
+    }
+    
+    private async Task SortingOptionChanged(ChangeEventArgs args)
+    {
+        _orderQuery.OrderBy = args.Value!.ToString();
+        await UpdateItems();
+    }
+
+    private async Task FilterApplied() => await UpdateItems();
+
+    #endregion
+}

WatchIt.Website/Components/List/MediaFilter.razor

@@ -1,4 +1,7 @@
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Media.MediaResponse, WatchIt.Common.Model.Media.MediaQueryParameters>
+@using WatchIt.Database.Model.Media
+@using Blazorise
+
+@inherits Filter<WatchIt.DTO.Models.Controllers.Media.Medium.Response.MediumResponse, WatchIt.Database.Model.Media.Medium, WatchIt.DTO.Models.Controllers.Media.Medium.Query.MediumFilterQuery>
 
 
 
@@ -7,10 +10,10 @@
         <div class="row mb-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Type</span>
-                <InputSelect TValue="MediaType?" class="col form-control" @bind-Value="@(Query.Type)">
+                <InputSelect TValue="MediumType?" class="col form-control" @bind-Value="@(Query.Type)">
                     <option @onclick="() => Query.Type = null">No choice</option>
-                    <option value="@(MediaType.Movie)">Movies</option>
-                    <option value="@(MediaType.Series)">TV series</option>
+                    <option value="@(MediumType.Movie)">Movies</option>
+                    <option value="@(MediumType.Series)">TV series</option>
                 </InputSelect>
             </div>
         </div>
@@ -40,14 +43,6 @@
                 <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
             </div>
         </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">Length</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
-            </div>
-        </div>
         <div class="row my-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Rating (count)</span>

WatchIt.Website/Components/List/MediumMoviesFilter.razor

@@ -1,4 +1,5 @@
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Movies.MovieResponse, WatchIt.Common.Model.Movies.MovieQueryParameters>
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.Media.Medium.Response.MediumMovieResponse, WatchIt.Database.Model.Media.MediumMovie, WatchIt.DTO.Models.Controllers.Media.Medium.Query.MediumMovieFilterQuery>
 
 
 
@@ -30,14 +31,6 @@
                 <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
             </div>
         </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">Length</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
-            </div>
-        </div>
         <div class="row my-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Budget</span>

WatchIt.Website/Components/List/MediumMoviesUserRatedFilter.razor

@@ -1,4 +1,5 @@
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Movies.MovieRatedResponse, WatchIt.Common.Model.Movies.MovieRatedQueryParameters>
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.Media.Medium.Response.MediumMovieUserRatedResponse, WatchIt.Database.Model.Media.MediumMovie, WatchIt.DTO.Models.Controllers.Media.Medium.Query.MediumMovieFilterQuery>
 
 
 
@@ -30,14 +31,6 @@
                 <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
             </div>
         </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">Length</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
-            </div>
-        </div>
         <div class="row my-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Budget</span>
@@ -62,21 +55,5 @@
                 <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
             </div>
         </div>
-        <div class="row mt-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">User rating</span>
-                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingTo)"/>
-            </div>
-        </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">User rating date</span>
-                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateTo)"/>
-            </div>
-        </div>
     </div>
 </EditForm>

WatchIt.Website/Components/List/MediumSeriesFilter.razor

@@ -1,4 +1,7 @@
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Series.SeriesResponse, WatchIt.Common.Model.Series.SeriesQueryParameters>
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.Media.Medium.Response.MediumSeriesResponse, WatchIt.Database.Model.Media.MediumSeries, WatchIt.DTO.Models.Controllers.Media.Medium.Query.MediumSeriesFilterQuery>
+
+
 
 <EditForm Model="@(Query)">
     <div class="container-grid">
@@ -28,14 +31,6 @@
                 <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
             </div>
         </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">Length</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
-            </div>
-        </div>
         <div class="row my-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Has ended</span>

WatchIt.Website/Components/List/MediumSeriesUserRatedFilter.razor

@@ -1,4 +1,7 @@
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Series.SeriesRatedResponse, WatchIt.Common.Model.Series.SeriesRatedQueryParameters>
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.Media.Medium.Response.MediumSeriesUserRatedResponse, WatchIt.Database.Model.Media.MediumSeries, WatchIt.DTO.Models.Controllers.Media.Medium.Query.MediumSeriesFilterQuery>
+
+
 
 <EditForm Model="@(Query)">
     <div class="container-grid">
@@ -28,14 +31,6 @@
                 <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
             </div>
         </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">Length</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
-            </div>
-        </div>
         <div class="row my-1">
             <div class="input-group input-group-sm">
                 <span class="col-3 input-group-text">Has ended</span>
@@ -65,21 +60,5 @@
                 <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
             </div>
         </div>
-        <div class="row mt-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">User rating</span>
-                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingTo)"/>
-            </div>
-        </div>
-        <div class="row my-1">
-            <div class="input-group input-group-sm">
-                <span class="col-3 input-group-text">User rating date</span>
-                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateFrom)"/>
-                <span class="col-auto input-group-text">-</span>
-                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateTo)"/>
-            </div>
-        </div>
     </div>
 </EditForm>

WatchIt.Website/Components/List/PeopleFilter.razor

@@ -1,5 +1,6 @@
-@using WatchIt.Common.Model.Genders
-@inherits WatchIt.Website.Components.Common.ListComponent.FilterFormComponent<WatchIt.Common.Model.Persons.PersonResponse, WatchIt.Common.Model.Persons.PersonQueryParameters>
+@using WatchIt.DTO.Models.Controllers.Genders.Gender
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.People.Person.PersonResponse, WatchIt.Database.Model.People.Person, WatchIt.DTO.Models.Controllers.People.Person.Query.PersonFilterQuery>
 
 
 

WatchIt.Website/Components/List/PeopleFilter.razor.cs

@@ -0,0 +1,50 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.Database.Model.People;
+using WatchIt.DTO.Models.Controllers.Genders.Gender;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.People.Person.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+
+namespace WatchIt.Website.Components.List;
+
+public partial class PeopleFilter : Filter<PersonResponse, Person, PersonFilterQuery>
+{
+    #region SERVICES
+
+    [Inject] private IGendersClient GendersClient { get; set; } = default!;
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private IEnumerable<GenderResponse> _genders = [];
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        IApiResponse<IEnumerable<GenderResponse>> response = await GendersClient.GetGenders();
+        if (response.IsSuccessful)
+        {
+            _genders = response.Content;
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured. List of genders could not be obtained.", SnackbarColor.Danger);
+        }
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/Components/List/PeopleUserRatedFilter.razor

@@ -0,0 +1,72 @@
+@using WatchIt.DTO.Models.Controllers.Genders.Gender
+@using Blazorise
+@inherits Filter<WatchIt.DTO.Models.Controllers.People.Person.PersonUserRatedResponse, WatchIt.Database.Model.People.Person, WatchIt.DTO.Models.Controllers.People.Person.Query.PersonFilterQuery>
+
+
+
+<EditForm Model="@(Query)">
+    <div class="container-grid">
+        <div class="row mb-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Name</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Name)"></InputText>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Full name</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.FullName)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Description</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Description)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Birth date</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.BirthDateFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.BirthDateTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Death date</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.DeathDateFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.DeathDateTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Gender</span>
+                <InputSelect TValue="short?" class="col form-control" @bind-Value="@(Query.GenderId)">
+                    <option @onclick="() => Query.GenderId = null">No choice</option>
+                    @foreach (GenderResponse gender in _genders)
+                    {
+                        <option value="@(gender.Id)">@(gender.Name)</option>
+                    }
+                </InputSelect>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (count)</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountTo)"/>
+            </div>
+        </div>
+        <div class="row mt-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (average)</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
+            </div>
+        </div>
+    </div>
+</EditForm>

WatchIt.Website/Components/List/PeopleUserRatedFilter.razor.cs

@@ -0,0 +1,50 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.Database.Model.People;
+using WatchIt.DTO.Models.Controllers.Genders.Gender;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.People.Person.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+
+namespace WatchIt.Website.Components.List;
+
+public partial class PeopleUserRatedFilter : Filter<PersonUserRatedResponse, Person, PersonFilterQuery>
+{
+    #region SERVICES
+
+    [Inject] private IGendersClient GendersClient { get; set; } = default!;
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private IEnumerable<GenderResponse> _genders = [];
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        IApiResponse<IEnumerable<GenderResponse>> response = await GendersClient.GetGenders();
+        if (response.IsSuccessful)
+        {
+            _genders = response.Content;
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured. List of genders could not be obtained.", SnackbarColor.Danger);
+        }
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/AdminPage.razor

@@ -0,0 +1,64 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+
+@inherits Page
+
+@page "/admin"
+
+<PageTitle>Administrator panel - WatchIt</PageTitle>
+
+
+
+<Authorization Admin="true">
+    <Loading>
+        <div class="m-5">
+            <Loading/>
+        </div>
+    </Loading>
+    <Authorized>
+        <div class="vstack gap-default">
+            <div class="panel panel-section-header">
+                <h3 class="fw-bold m-0">Add new content</h3>
+            </div>
+            <div class="container-grid">
+                <div class="row gx-default">
+                    <div class="col">
+                        <a class="text-reset text-decoration-none" href="/media/new/movies">
+                            <div class="panel">
+                                <div class="d-flex flex-column align-items-center p-5">
+                                    <img src="assets/icons/movie.png" width="100%" alt="movie"/>
+                                    <span class="text-reset">New movie</span>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="text-reset text-decoration-none" href="/media/new/series">
+                            <div class="panel">
+                                <div class="d-flex flex-column align-items-center p-5">
+                                    <img src="assets/icons/series.png" width="100%" alt="movie"/>
+                                    <span class="text-center">New TV series</span>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col">
+                        <a class="text-reset text-decoration-none" href="/people/new">
+                            <div class="panel">
+                                <div class="d-flex flex-column align-items-center p-5">
+                                    <img src="assets/icons/person.png" width="100%" alt="movie"/>
+                                    <span class="text-center">New person</span>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Authorized>
+    <NotAuthorized>
+        <div class="vstack">
+            <ErrorPanel ErrorMessage="You do not have permission to view this site"/>
+        </div>
+    </NotAuthorized>
+</Authorization>

WatchIt.Website/Components/Pages/AdminPage.razor.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class AdminPage : Page
+{
+    #region PARAMETERS
+    
+    [CascadingParameter] public required BaseLayout Layout { get; set; }
+    
+    #endregion
+}

WatchIt.Website/Components/Pages/AuthPage.razor

@@ -0,0 +1,54 @@
+@using System.Drawing
+@using System.Text
+@using WatchIt.Website.Components.Layout
+@using Blazorise.Snackbar
+@using WatchIt.Website.Components.Subcomponents.Pages.AuthPage
+
+@inherits Page
+
+@layout EmptyLayout
+
+@page "/auth"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+
+    if (_isSingUp)      sb.Insert(0, $"Sing up");
+    else                sb.Insert(0, $"Sing in");
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+<CascadingValue Value="this">
+    <div class="h-100 d-flex align-items-center justify-content-center">
+        <div class="panel panel-auth">
+            <div class="d-flex flex-column align-items-center gap-3">
+                <a id="logo" class="logo m-0" href="/">WatchIt</a>
+                @if (_isSingUp)
+                {
+                    <RegisterForm RegisteredSuccessfully="@(() => _isSingUp = false)"/>
+                }
+                else
+                {
+                    <LoginForm RedirectTo="@(RedirectTo)"/>
+                }
+                <div class="btn-group w-100">
+                    <input type="radio" class="btn-check" name="signtype" id="signin" autocomplete="off" checked="@(!_isSingUp)" @onclick="() => { _isSingUp = false; }">
+                    <label class="btn btn-outline-secondary btn-sm" for="signin">Sign in</label>
+                    <input type="radio" class="btn-check" name="signtype" id="signup" autocomplete="off" checked="@(_isSingUp)" @onclick="() => { _isSingUp = true; }">
+                    <label class="btn btn-outline-secondary btn-sm" for="signup">Sign up</label>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        /* IDS */
+
+        #logo {
+            background-image: linear-gradient(45deg, @($"{ColorTranslator.ToHtml(Base.BackgroundSettings.FirstGradientColor)}, {ColorTranslator.ToHtml(Base.BackgroundSettings.SecondGradientColor)}"));
+        }
+    </style>
+</CascadingValue>

WatchIt.Website/Components/Pages/AuthPage.razor.cs

@@ -0,0 +1,50 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+using WatchIt.Website.Services.Tokens;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class AuthPage
+{
+    #region SERVICES
+
+    [Inject] public NavigationManager NavigationManager { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+
+    [SupplyParameterFromQuery(Name = "redirect_to")]
+    private string RedirectTo { get; set; } = "/";
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _isSingUp;
+    
+    #endregion
+
+    
+    
+    #region METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        Base.CustomBackground = null;
+        if (Base.AuthorizedAccount is not null)
+        {
+            NavigationManager.NavigateTo(WebUtility.UrlDecode(RedirectTo));
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/AuthPage.razor.css

@@ -0,0 +1,18 @@
+/* TAGS */
+
+html {
+    height: 100%;
+}
+
+
+
+/* CLASSES */
+
+.logo {
+    font-size: 60px;
+    margin: 10px;
+}
+
+.panel-auth {
+    background-color: rgba(0, 0, 0, 0.8);
+}

WatchIt.Website/Components/Pages/GenreMediaListPage.razor

@@ -0,0 +1,99 @@
+@using System.Net
+@using System.Text
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.Database.Model.Media
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.List
+
+@inherits Page
+
+@page "/genres/{id:int}/media"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+
+    if (!_loaded)           sb.Insert(0, "Loading...");
+    else if (_data is null) sb.Insert(0, "Error");
+    else                    sb.Insert(0, $"\"{_data.Name}\" genre");
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (!_loaded)
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}
+else if (_data is null)
+{
+    <ErrorPanel ErrorMessage="@($"Genre with ID {Id} was not found")"/>
+}
+else
+{
+    <List TItem="MediumResponse"
+          TEntity="Medium"
+          TQuery="MediumFilterQuery"
+          Title="@(_data.Name)"
+          IdFunc="@(item => item.Id)"
+          NameFunc="@(item => item.Title)"
+          AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+          GlobalRatingFunc="@(item => item.Rating)"
+          PictureFunc="@(item => Task.FromResult(item.Picture))"
+          UrlIdTemplate="/media/{0}"
+          PicturePlaceholder="/assets/placeholders/medium.png"
+          GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                          {
+                              filterQuery.Genres = [(short)Id];
+                              IApiResponse<IEnumerable<MediumResponse>> response = await MediaClient.GetMedia(filterQuery, orderQuery, pagingQuery, true);
+                              if (!response.IsSuccessful)
+                              {
+                                  await Base.SnackbarStack.PushAsync($"An error occured. Media for genre with id {Id} could not be obtained.", SnackbarColor.Danger);
+                              }
+                              return response.Content ?? [];
+                          })"
+          SortingOptions="@(new Dictionary<string, string>
+                          {
+                              { "rating.count", "Number of ratings" },
+                              { "rating.average", "Average rating" },
+                              { "title", "Title" },
+                              { "release_date", "Release date" },
+                          })"
+          GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+          GetYourRatingMethod="@(async (item, userId) =>
+                               {
+                                   IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                                   if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                   {
+                                       await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for medium with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                   }
+                                   return response.Content;
+                               })"
+          PutYourRatingMethod="@(async (item, request) =>
+                               {
+                                   string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                   IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                                   if (!response.IsSuccessful)
+                                   {
+                                       await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate media", SnackbarColor.Danger);
+                                   }
+                               })"
+          DeleteYourRatingMethod="@(async item =>
+                                  {
+                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                      IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                      if (!response.IsSuccessful)
+                                      {
+                                          await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate media", SnackbarColor.Danger);
+                                      }
+                                  })">
+        <MediaFilter/>
+    </List>
+}

WatchIt.Website/Components/Pages/GenreMediaListPage.razor.cs

@@ -0,0 +1,56 @@
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genres.Genre;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class GenreMediaListPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private IGenresClient GenresClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+
+    [Parameter] public int Id { get; set; }
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    private GenreResponse? _data;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        IApiResponse<GenreResponse> response = await GenresClient.GetGenre((short)Id);
+        if (response.IsSuccessful)
+        {
+            _data = response.Content;
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/HomePage.razor

@@ -0,0 +1,65 @@
+@using Refit
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.People.Person
+@using WatchIt.DTO.Models.Generics.Image
+@using WatchIt.DTO.Query
+@using WatchIt.Website.Components.Panels.Common
+@inherits Page
+
+@page "/"
+
+<PageTitle>WatchIt</PageTitle>
+
+
+
+<div class="vstack gap-default">
+    <HorizontalListPanel TItem="MediumMovieResponse"
+                         Title="Top 5 movies this week by popularity"
+                         GetItemsAction="@(() => MediaClient.GetMediumMovies(orderQuery: new OrderQuery 
+                                                                             {
+                                                                                 OrderBy = "view_count.last_week",
+                                                                             },
+                                                                             pagingQuery: new PagingQuery
+                                                                             {
+                                                                                 First = 5,
+                                                                             },
+                                                                             includePictures: true))"
+                         ItemUrlFormatString="/media/{0}"
+                         IdSource="@(item => item.Id)"
+                         NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                         PosterPlaceholder="/assets/placeholders/medium.png"
+                         GetPictureAction="@(item => Task.FromResult(item.Picture))"/>
+    <HorizontalListPanel TItem="MediumSeriesResponse"
+                         Title="Top 5 TV series this week by popularity"
+                         GetItemsAction="@(() => MediaClient.GetMediumSeries(orderQuery: new OrderQuery 
+                                                                             {
+                                                                                 OrderBy = "view_count.last_week",
+                                                                             },
+                                                                             pagingQuery: new PagingQuery
+                                                                             {
+                                                                                 First = 5,
+                                                                             },
+                                                                             includePictures: true))"
+                         ItemUrlFormatString="/media/{0}"
+                         IdSource="@(item => item.Id)"
+                         NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                         PosterPlaceholder="/assets/placeholders/medium.png"
+                         GetPictureAction="@(item => Task.FromResult(item.Picture))"/>
+    <HorizontalListPanel TItem="PersonResponse"
+                         Title="Top 5 people this week by popularity"
+                         GetItemsAction="@(() => PeopleClient.GetPeople(orderQuery: new OrderQuery 
+                                                                        {
+                                                                            OrderBy = "view_count.last_week",
+                                                                        },
+                                                                        pagingQuery: new PagingQuery
+                                                                        {
+                                                                            First = 5,
+                                                                        },
+                                                                        includePictures: true))"
+                         ItemUrlFormatString="/people/{0}"
+                         IdSource="@(item => item.Id)"
+                         NameSource="@(item => item.Name)"
+                         PosterPlaceholder="/assets/placeholders/person.png"
+                         GetPictureAction="@(item => Task.FromResult(item.Picture))"/>
+</div>

WatchIt.Website/Components/Pages/HomePage.razor.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Clients;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class HomePage : Page
+{
+    #region SERVICES
+
+    [Inject] public NavigationManager NavigationManager { get; set; } = default!;
+    [Inject] public IMediaClient MediaClient { get; set; } = default!;
+    [Inject] public IPeopleClient PeopleClient { get; set; } = default!;
+    
+    #endregion
+}

WatchIt.Website/Components/Pages/MediumEditPage.razor

@@ -0,0 +1,154 @@
+@using System.Net
+@using System.Text
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Generics.Image
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.Panels.Pages.MediumEditPage
+@using Authorization = WatchIt.Website.Components.Subcomponents.Common.Authorization
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using Blazorise
+
+@inherits Page
+
+@page "/media/{id:long}/edit"
+@page "/media/new/{type?}"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+    
+    if (!_loaded)                                       sb.Insert(0, "Loading...");
+    else if (Base.AuthorizedAccount?.IsAdmin != true)   sb.Insert(0, "Error");
+    else
+    {
+        if (_data is not null)      sb.Insert(0, $"Edit \"{_data.Title}\"");
+        else
+        {
+            if (Type == "series")   sb.Insert(0, "TV series");
+            else                    sb.Insert(0, "movie");
+            sb.Insert(0, "New ");
+        }
+    }
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (_loaded)
+{
+    <Authorization Admin="true">
+        <Authorized>
+            <div class="vstack gap-default">
+                <HeaderPanel Data=@(_data)
+                             TypeIfNull="@(Type == "series" ? NullType.Series : NullType.Movie)"/>
+                <div class="container-grid">
+                    <div class="row gx-default">
+                        <div class="col-auto">
+                            <ImageEditorPanel Disabled="@(_data is null)"
+                                              Image="@(_data?.Picture)"
+                                              OnImageChanged="@(pic => _data!.Picture = pic)"
+                                              ImageGetMethod="@(async () =>
+                                                              {
+                                                                  if (_data is not null)
+                                                                  {
+                                                                      IApiResponse<ImageResponse> response = await MediaClient.GetMediumPicture(_data.Id);
+                                                                      if (response.IsSuccessful || response.StatusCode == HttpStatusCode.NotFound)
+                                                                      {
+                                                                          return response.Content;
+                                                                      }
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. Picture of edited medium could not be obtained", SnackbarColor.Danger);
+                                                                  }
+                                                                  return null;
+                                                              })"
+                                              ImagePutMethod="@(async image =>
+                                                              {
+                                                                  if (_data is not null)
+                                                                  {
+                                                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                      IApiResponse<ImageResponse> response = await MediaClient.PutMediumPicture(token, _data.Id, image);
+                                                                      if (response.IsSuccessful)
+                                                                      {
+                                                                          return response.Content;
+                                                                      }
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. Picture of medium could not be changed", SnackbarColor.Danger);
+                                                                  }
+                                                                  else
+                                                                  {
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. There is no medium data, needed for picture saving", SnackbarColor.Danger);
+                                                                  }
+                                                                  return null;
+                                                              })"
+                                              ImageDeleteMethod="@(async () =>
+                                                                 {
+                                                                     if (_data is not null)
+                                                                     {
+                                                                         string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                         IApiResponse response = await MediaClient.DeleteMediumPicture(token, _data.Id);
+                                                                         if (!response.IsSuccessful)
+                                                                         {
+                                                                             await Base.SnackbarStack.PushAsync("An error occured. Picture of medium could not be deleted", SnackbarColor.Danger);
+                                                                         }
+                                                                         return response.IsSuccessful;
+                                                                     }
+                                                                     await Base.SnackbarStack.PushAsync("An error occured. There is no medium data, needed for picture saving", SnackbarColor.Danger);
+                                                                     return false;
+                                                                 })"
+                                              ImagePlaceholder="/assets/placeholders/medium.png"
+                                              Class="h-100"/>
+                        </div>
+                        <div class="col">
+                            <EditFormPanel Data="@(_data)"
+                                           TypeIfNull="@(Type == "series" ? NullType.Series : NullType.Movie)"
+                                           Class="h-100"/>
+                        </div>
+                    </div>
+                </div>
+                <Tabs Pills
+                      RenderMode="TabsRenderMode.LazyLoad"
+                      Class="panel panel-menu panel-background-menu justify-content-center"
+                      SelectedTab="genres">
+                    <Items>
+                        <Tab Name="genres">Genres</Tab>
+                        <Tab Name="actors">Actors</Tab>
+                        <Tab Name="creators">Creators</Tab>
+                        <Tab Name="photos">Photos</Tab>
+                    </Items>
+                    <Content>
+                        <TabPanel Name="genres">
+                            <GenresEditPanel Data="@(_data)"/>
+                        </TabPanel>
+                        <TabPanel Name="actors">
+                            <ActorRolesEditPanel Data="@(_data)"
+                                                 Disabled="@(_data is null)"
+                                                 People="@(_people)"/>
+                        </TabPanel>
+                        <TabPanel Name="creators">
+                            <CreatorRolesEditPanel Data="@(_data)"
+                                                   Disabled="@(_data is null)"
+                                                   People="@(_people)"/>
+                        </TabPanel>
+                        <TabPanel Name="photos">
+                            <PhotosEditPanel Id="@(_data?.Id)"/>
+                        </TabPanel>
+                    </Content>
+                </Tabs>
+            </div>
+        </Authorized>
+        <NotAuthorized>
+            <ErrorPanel ErrorMessage="You do not have permission to view this site"/>
+        </NotAuthorized>
+        <Loading>
+            <div class="m-5">
+                <Loading/>
+            </div>
+        </Loading>
+    </Authorization>
+}
+else
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}

WatchIt.Website/Components/Pages/MediumEditPage.razor.cs

@@ -0,0 +1,114 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class MediumEditPage : Page
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long? Id { get; set; }
+    [Parameter] public string? Type { get; set; }
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private BaseMediumResponse? _data;
+    private List<PersonResponse>? _people;
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        await Task.WhenAll(
+        [
+            LoadData(),
+            LoadPeople(),
+            LoadBackground(),
+        ]);
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadData()
+    {
+        if (Id.HasValue)
+        {
+            IApiResponse<MediumResponse> response = await MediaClient.GetMedium(Id.Value);
+            if (response.IsSuccessful)
+            {
+                switch (response.Content.Type)
+                {
+                    case MediumResponseType.Movie:
+                        IApiResponse<MediumMovieResponse> responseMovie = await MediaClient.GetMediumMovie(Id.Value, true);
+                        _data = responseMovie.Content;
+                        break;
+                    case MediumResponseType.Series:
+                        IApiResponse<MediumSeriesResponse> responseSeries = await MediaClient.GetMediumSeries(Id.Value, true);
+                        _data = responseSeries.Content;
+                        break;
+                }
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Medium data could not be obtained.", SnackbarColor.Danger);
+            }
+        }
+    }
+
+    private async Task LoadPeople()
+    {
+        IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople();
+        if (response.IsSuccessful)
+        {
+            _people = response.Content.ToList();
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured during loading people.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadBackground()
+    {
+        if (Id.HasValue)
+        {
+            IApiResponse<PhotoResponse?> response = await MediaClient.GetMediumBackgroundPhoto(Id.Value);
+            if (response.IsSuccessful && response.Content is not null)
+            {
+                Base.CustomBackground = response.Content;
+            }
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/MediumPage.razor

@@ -0,0 +1,137 @@
+@using System.Text
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.Panels.Pages.MediumPage
+@using Blazorise
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Controllers.People.Person
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Query
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.DTO.Models.Controllers.Roles.RoleActorType
+@using WatchIt.DTO.Models.Controllers.Roles.RoleCreatorType
+
+@inherits Page
+
+@page "/media/{id:long}"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+    
+    if (!_loaded)               sb.Insert(0, "Loading...");
+    else if (_data is null)     sb.Insert(0, "Error");
+    else
+    {
+        if (_data.ReleaseDate.HasValue) sb.Insert(0, $" ({_data.ReleaseDate.Value.Year})");
+        sb.Insert(0, _data.Title);
+    }
+    
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (!_loaded)
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}
+else if (_data is null)
+{
+    <ErrorPanel ErrorMessage="@($"Medium with ID {Id} was not found")"/>
+}
+else
+{
+    <div class="vstack gap-default">
+        <ItemPageHeaderPanel Name="@(_data.Title)"
+                             Description="@(_data.Description)"
+                             Subname="@(_data.OriginalTitle)"
+                             Poster="@(_data.Picture)"
+                             PosterPlaceholder="/assets/placeholders/medium.png"/>
+        <div class="container-grid">
+            <div class="row gx-default">
+                <div class="col">
+                    <MetadataPanel Data="@(_data)"/>
+                </div>
+                <div class="col-auto">
+                    <RatingPanel Data="@(_data)"/>
+                </div>
+            </div>
+        </div>
+        <Tabs Pills
+              RenderMode="TabsRenderMode.LazyLoad"
+              SelectedTab="actors"
+              Class="panel panel-menu panel-background-menu justify-content-center">
+            <Items>
+                <Tab Name="actors">Actors</Tab>
+                <Tab Name="creators">Creators</Tab>
+            </Items>
+            <Content>
+                <TabPanel Name="actors">
+                    <RolesPanel TRole="RoleActorResponse"
+                                TRoleParent="PersonResponse"
+                                Title="Actors"
+                                RoleParents="@(_people)"
+                                ParentName="People"
+                                ParentFunc="@((role, parents) => parents.First(x => x.Id == role.PersonId))"
+                                NameFunc="@((_, parent) => parent.Name)"
+                                AdditionalInfoFunc="@((role, _) => $" as {role.Name}")"
+                                PicturePlaceholder="/assets/placeholders/person.png"
+                                PictureFunc="@((_, parent) => Task.FromResult(parent.Picture))"
+                                UrlFunc="@((_, parent) => $"people/{parent.Id}")"
+                                GlobalRatingFunc="@((_, parent) => parent.Rating)"
+                                GetRoleTypesMethod="@(async () =>
+                                                    {
+                                                        IApiResponse<IEnumerable<RoleActorTypeResponse>> response = await RolesClient.GetRoleActorTypes();
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error occured. Actor role types could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                                GetRolesMethod="@(async () =>
+                                                {
+                                                    IApiResponse<IEnumerable<RoleActorResponse>> response = await RolesClient.GetRoleActors(new RoleActorFilterQuery { MediumId = _data.Id });
+                                                    if (!response.IsSuccessful)
+                                                    {
+                                                        await Base.SnackbarStack.PushAsync("An error occured. Actor roles could not be loaded.", SnackbarColor.Danger);
+                                                    }
+                                                    return response.Content;
+                                                })"/>
+                </TabPanel>
+                <TabPanel Name="creators">
+                    <RolesPanel TRole="RoleCreatorResponse"
+                                TRoleParent="PersonResponse"
+                                Title="Creators"
+                                RoleParents="@(_people)"
+                                ParentName="People"
+                                ParentFunc="@((role, parents) => parents.First(x => x.Id == role.PersonId))"
+                                NameFunc="@((_, parent) => parent.Name)"
+                                PicturePlaceholder="/assets/placeholders/person.png"
+                                PictureFunc="@((_, parent) => Task.FromResult(parent.Picture))"
+                                UrlFunc="@((_, parent) => $"people/{parent.Id}")"
+                                GlobalRatingFunc="@((_, parent) => parent.Rating)"
+                                GetRoleTypesMethod="@(async () =>
+                                                    {
+                                                        IApiResponse<IEnumerable<RoleCreatorTypeResponse>> response = await RolesClient.GetRoleCreatorTypes();
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error occured. Creator role types could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                                GetRolesMethod="@(async () =>
+                                                {
+                                                    IApiResponse<IEnumerable<RoleCreatorResponse>> response = await RolesClient.GetRoleCreators(new RoleCreatorFilterQuery { MediumId = _data.Id });
+                                                    if (!response.IsSuccessful)
+                                                    {
+                                                        await Base.SnackbarStack.PushAsync("An error occured. Creator roles could not be loaded.", SnackbarColor.Danger);
+                                                    }
+                                                    return response.Content;
+                                                })"/>
+                </TabPanel>
+            </Content>
+        </Tabs>
+    </div>
+}

WatchIt.Website/Components/Pages/MediumPage.razor.cs

@@ -0,0 +1,96 @@
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class MediumPage : Page
+{
+    #region SERVICES
+
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IPhotosClient PhotosClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long Id { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    //private RatingPanel _ratingPanel = null!;
+
+    private bool _loaded;
+    
+    private MediumResponse? _data;
+    private IEnumerable<PersonResponse>? _people;
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        await Task.WhenAll(
+        [
+            LoadData(),
+            LoadPeople(),
+            IncrementViewCounter(),
+            LoadBackground(),
+        ]);
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadData()
+    {
+        IApiResponse<MediumResponse> response = await MediaClient.GetMedium(Id, true);
+        if (response.IsSuccessful)
+        {
+            _data = response.Content;
+        }
+    }
+
+    private async Task LoadPeople()
+    {
+        IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople(includePictures: true);
+        if (response.IsSuccessful)
+        {
+            _people = response.Content;
+        }
+    }
+
+    private async Task IncrementViewCounter()
+    {
+        await MediaClient.PutMediumViewCount(Id);
+    }
+
+    private async Task LoadBackground()
+    {
+        IApiResponse<PhotoResponse?> response = await MediaClient.GetMediumBackgroundPhoto(Id);
+        if (response.IsSuccessful)
+        {
+            Base.CustomBackground = response.Content;
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/MoviesListPage.razor

@@ -0,0 +1,74 @@
+@using System.Net
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.Database.Model.Media
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.Website.Components.List
+
+@inherits Page
+
+@page "/media/movies"
+
+<PageTitle>Movies - WatchIt</PageTitle>
+
+
+
+<List TItem="MediumMovieResponse"
+      TEntity="MediumMovie"
+      TQuery="MediumMovieFilterQuery"
+      Title="Movies database"
+      IdFunc="@(item => item.Id)"
+      NameFunc="@(item => item.Title)"
+      AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+      GlobalRatingFunc="@(item => item.Rating)"
+      PictureFunc="@(item => Task.FromResult(item.Picture))"
+      UrlIdTemplate="/media/{0}"
+      PicturePlaceholder="/assets/placeholders/medium.png"
+      GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                      {
+                          IApiResponse<IEnumerable<MediumMovieResponse>> response = await MediaClient.GetMediumMovies(filterQuery, orderQuery, pagingQuery, true);
+                          if (!response.IsSuccessful)
+                          {
+                              await Base.SnackbarStack.PushAsync($"An error occured. Movies could not be obtained.", SnackbarColor.Danger);
+                          }
+                          return response.Content ?? [];
+                      })"
+      SortingOptions="@(new Dictionary<string, string>
+                      {
+                          { "rating.count", "Number of ratings" },
+                          { "rating.average", "Average rating" },
+                          { "title", "Title" },
+                          { "release_date", "Release date" },
+                      })"
+      GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+      GetYourRatingMethod="@(async (item, userId) =>
+                           {
+                               IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                               if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                               {
+                                   await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for movie with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                               }
+                               return response.Content;
+                           })"
+      PutYourRatingMethod="@(async (item, request) =>
+                           {
+                               string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                               IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                               if (!response.IsSuccessful)
+                               {
+                                   await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                               }
+                           })"
+      DeleteYourRatingMethod="@(async item =>
+                              {
+                                  string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                  IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                  if (!response.IsSuccessful)
+                                  {
+                                      await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                                  }
+                              })">
+    <MediumMoviesFilter/>
+</List>

WatchIt.Website/Components/Pages/MoviesListPage.razor.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class MoviesListPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    
+    #endregion
+}

WatchIt.Website/Components/Pages/Page.cs

@@ -0,0 +1,16 @@
+namespace WatchIt.Website.Components.Pages;
+
+public abstract class Page : Component
+{
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        Base.CustomBackground = null;
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/PeopleListPage.razor

@@ -0,0 +1,57 @@
+@using System.Net
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.Database.Model.People
+@using WatchIt.DTO.Models.Controllers.People.Person
+@using WatchIt.DTO.Models.Controllers.People.Person.Query
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.Website.Components.List
+
+@inherits Page
+
+@page "/people"
+
+<PageTitle>People - WatchIt</PageTitle>
+
+
+
+<List TItem="PersonResponse"
+      TEntity="Person"
+      TQuery="PersonFilterQuery"
+      Title="People database"
+      IdFunc="@(item => item.Id)"
+      NameFunc="@(item => item.Name)"
+      GlobalRatingFunc="@(item => item.Rating)"
+      PictureFunc="@(item => Task.FromResult(item.Picture))"
+      UrlIdTemplate="/people/{0}"
+      PicturePlaceholder="/assets/placeholders/person.png"
+      GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                      {
+                          IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople(filterQuery, orderQuery, pagingQuery, true);
+                          if (!response.IsSuccessful)
+                          {
+                              await Base.SnackbarStack.PushAsync("An error occured. People could not be obtained.", SnackbarColor.Danger);
+                          }
+                          return response.Content ?? [];
+                      })"
+      SortingOptions="@(new Dictionary<string, string>
+                      {
+                          { "rating.count", "Number of ratings" },
+                          { "rating.average", "Average rating" },
+                          { "name", "Name" },
+                          { "birth_date", "Birth date" },
+                          { "death_date", "Death date" },
+                      })"
+      GetGlobalRatingMethod="@(async x => (await PeopleClient.GetPersonRating(x.Id)).Content)"
+      SecondaryRatingTitle="Your rating"
+      GetSecondaryRatingMethod="@(Base.AuthorizedAccount is null ? null : async (item) =>
+                                {
+                                    IApiResponse<RatingUserOverallResponse> response = await PeopleClient.GetPersonUserRating(item.Id, Base.AuthorizedAccount.Id);
+                                    if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                    {
+                                        await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for person with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                    }
+                                    return response.Content;
+                                })">
+    <PeopleFilter/>
+</List>

WatchIt.Website/Components/Pages/PeopleListPage.razor.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class PeopleListPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    
+    #endregion
+}

WatchIt.Website/Components/Pages/PersonEditPage.razor

@@ -0,0 +1,138 @@
+@using System.Net
+@using System.Text
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Generics.Image
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.Panels.Pages.PersonEditPage
+@using Authorization = WatchIt.Website.Components.Subcomponents.Common.Authorization
+@using Blazorise
+
+@inherits Page
+
+@page "/people/{id:long}/edit"
+@page "/people/new"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+
+    if (!_loaded)                                       sb.Insert(0, "Loading...");
+    else if (Base.AuthorizedAccount?.IsAdmin == true)   sb.Insert(0, "Error");
+    else
+    {
+        if (_data is null)  sb.Insert(0, "Create new person");
+        else                sb.Insert(0, $"Edit \"{_data.Name}\"");
+    }
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (_loaded)
+{
+    <Authorization Admin="true">
+        <Authorized>
+            <div class="vstack gap-default">
+                <HeaderPanel Data=@(_data)/>
+                <div class="container-grid">
+                    <div class="row gx-default">
+                        <div class="col-auto">
+                            <ImageEditorPanel Disabled="@(_data is null)"
+                                              Image="@(_data?.Picture)"
+                                              OnImageChanged="@(pic => _data!.Picture = pic)"
+                                              ImageGetMethod="@(async () =>
+                                                              {
+                                                                  if (_data is not null)
+                                                                  {
+                                                                      IApiResponse<ImageResponse> response = await PeopleClient.GetPersonPicture(_data.Id);
+                                                                      if (response.IsSuccessful || response.StatusCode == HttpStatusCode.NotFound)
+                                                                      {
+                                                                          return response.Content;
+                                                                      }
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. Picture of edited person could not be obtained", SnackbarColor.Danger);
+                                                                  }
+                                                                  return null;
+                                                              })"
+                                              ImagePutMethod="@(async image =>
+                                                              {
+                                                                  if (_data is not null)
+                                                                  {
+                                                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                      IApiResponse<ImageResponse> response = await PeopleClient.PutPersonPicture(token, _data.Id, image);
+                                                                      if (response.IsSuccessful)
+                                                                      {
+                                                                          return response.Content;
+                                                                      }
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. Picture of person could not be changed", SnackbarColor.Danger);
+                                                                  }
+                                                                  else
+                                                                  {
+                                                                      await Base.SnackbarStack.PushAsync("An error occured. There is no person data, needed for picture saving", SnackbarColor.Danger);
+                                                                  }
+                                                                  return null;
+                                                              })"
+                                              ImageDeleteMethod="@(async () =>
+                                                                 {
+                                                                     if (_data is not null)
+                                                                     {
+                                                                         string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                         IApiResponse response = await PeopleClient.DeletePersonPicture(token, _data.Id);
+                                                                         if (!response.IsSuccessful)
+                                                                         {
+                                                                             await Base.SnackbarStack.PushAsync("An error occured. Picture of person could not be deleted", SnackbarColor.Danger);
+                                                                         }
+                                                                         return response.IsSuccessful;
+                                                                     }
+                                                                     await Base.SnackbarStack.PushAsync("An error occured. There is no person data, needed for picture saving", SnackbarColor.Danger);
+                                                                     return false;
+                                                                 })"
+                                              ImagePlaceholder="/assets/placeholders/person.png"
+                                              Class="h-100"/>
+                        </div>
+                        <div class="col">
+                            <EditFormPanel Data="@(_data)"
+                                           Class="h-100"/>
+                        </div>
+                    </div>
+                </div>
+                <Tabs Pills
+                      RenderMode="TabsRenderMode.LazyLoad"
+                      Class="panel panel-menu panel-background-menu justify-content-center"
+                      SelectedTab="actor">
+                    <Items>
+                        <Tab Name="actor">Actor</Tab>
+                        <Tab Name="creator">Creator</Tab>
+                    </Items>
+                    <Content>
+                        <TabPanel Name="actor">
+                            <ActorRolesEditPanel Data="@(_data)"
+                                                 Disabled="@(_data is null)"
+                                                 Media="@(_media)"/>
+                        </TabPanel>
+                        <TabPanel Name="creator">
+                            <CreatorRolesEditPanel Data="@(_data)"
+                                                   Disabled="@(_data is null)"
+                                                   Media="@(_media)"/>
+                        </TabPanel>
+                    </Content>
+                </Tabs>
+            </div>
+        </Authorized>
+        <NotAuthorized>
+            <ErrorPanel ErrorMessage="You do not have permission to view this site"/>
+        </NotAuthorized>
+        <Loading>
+            <div class="m-5">
+                <Loading/>
+            </div>
+        </Loading>
+    </Authorization>
+}
+else
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}

WatchIt.Website/Components/Pages/PersonEditPage.razor.cs

@@ -0,0 +1,93 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class PersonEditPage : Page
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long? Id { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+
+    private PersonResponse? _data;
+    private List<MediumResponse>? _media;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        await Task.WhenAll(
+        [
+            LoadData(),
+            LoadMedia(),
+        ]);
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task<bool> LoadData()
+    {
+        if (!Id.HasValue)
+        {
+            return true;
+        }
+        
+        IApiResponse<PersonResponse> response = await PeopleClient.GetPerson(Id.Value, true);
+        if (response.IsSuccessful)
+        {
+            _data = response.Content;
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured during loading person data.", SnackbarColor.Danger);
+        }
+        
+        return response.IsSuccessful;
+    }
+
+    private async Task LoadMedia()
+    {
+        IApiResponse<IEnumerable<MediumResponse>> response = await MediaClient.GetMedia();
+        if (response.IsSuccessful)
+        {
+            _media = response.Content.ToList();
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured during loading media.", SnackbarColor.Danger);
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/PersonPage.razor

@@ -0,0 +1,135 @@
+@using System.Text
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.Panels.Pages.PersonPage
+@using Blazorise
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Query
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.DTO.Models.Controllers.Roles.RoleActorType
+@using WatchIt.DTO.Models.Controllers.Roles.RoleCreatorType
+
+@inherits Page
+
+@page "/people/{id:long}"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+    
+    if (!_loaded)               sb.Insert(0, "Loading...");
+    else if (_data is null)     sb.Insert(0, "Error");
+    else                        sb.Insert(0, _data.Name);
+    
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (!_loaded)
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}
+else if (_data is null)
+{
+    <ErrorPanel ErrorMessage="@($"Person with ID {Id} was not found")"/>
+}
+else
+{
+    <div class="vstack gap-default">
+        <ItemPageHeaderPanel Name="@(_data.Name)"
+                             Description="@(_data.Description)"
+                             Subname="@(_data.FullName)"
+                             Poster="@(_data.Picture)"
+                             PosterPlaceholder="/assets/placeholders/person.png"/>
+        <div class="container-grid">
+            <div class="row gx-default">
+                <div class="col">
+                    <MetadataPanel Data="@(_data)"/>
+                </div>
+                <div class="col-auto">
+                    <RatingPanel @ref="@(_ratingPanel)" Data="@(_data)"/>
+                </div>
+            </div>
+        </div>
+        <Tabs Pills
+              RenderMode="TabsRenderMode.LazyLoad"
+              SelectedTab="actor"
+              Class="panel panel-menu panel-background-menu justify-content-center">
+            <Items>
+                <Tab Name="actor">Actor</Tab>
+                <Tab Name="creator">Creator</Tab>
+            </Items>
+            <Content>
+                <TabPanel Name="actor">
+                    <RolesPanel TRole="RoleActorResponse"
+                                TRoleParent="MediumResponse"
+                                Title="Actors"
+                                RoleParents="@(_media)"
+                                ParentName="Media"
+                                ParentFunc="@((role, parents) => parents.First(x => x.Id == role.MediumId))"
+                                NameFunc="@((_, parent) => parent.Title)"
+                                AdditionalInfoFunc="@((role, _) => $" as {role.Name}")"
+                                PicturePlaceholder="/assets/placeholders/medium.png"
+                                PictureFunc="@((_, parent) => Task.FromResult(parent.Picture))"
+                                UrlFunc="@((_, parent) => $"media/{parent.Id}")"
+                                GlobalRatingFunc="@((_, parent) => parent.Rating)"
+                                GetRoleTypesMethod="@(async () =>
+                                                    {
+                                                        IApiResponse<IEnumerable<RoleActorTypeResponse>> response = await RolesClient.GetRoleActorTypes();
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error occured. Actor role types could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                                GetRolesMethod="@(async () =>
+                                                {
+                                                    IApiResponse<IEnumerable<RoleActorResponse>> response = await RolesClient.GetRoleActors(new RoleActorFilterQuery { PersonId = _data.Id });
+                                                    if (!response.IsSuccessful)
+                                                    {
+                                                        await Base.SnackbarStack.PushAsync("An error occured. Actor roles could not be loaded.", SnackbarColor.Danger);
+                                                    }
+                                                    return response.Content;
+                                                })"
+                                OnRatingChanged="@(async () => await _ratingPanel.Update())"/>
+                </TabPanel>
+                <TabPanel Name="creator">
+                    <RolesPanel TRole="RoleCreatorResponse"
+                                TRoleParent="MediumResponse"
+                                Title="Creators"
+                                RoleParents="@(_media)"
+                                ParentName="Media"
+                                ParentFunc="@((role, parents) => parents.First(x => x.Id == role.MediumId))"
+                                NameFunc="@((_, parent) => parent.Title)"
+                                PicturePlaceholder="/assets/placeholders/medium.png"
+                                PictureFunc="@((_, parent) => Task.FromResult(parent.Picture))"
+                                UrlFunc="@((_, parent) => $"media/{parent.Id}")"
+                                GlobalRatingFunc="@((_, parent) => parent.Rating)"
+                                GetRoleTypesMethod="@(async () =>
+                                                    {
+                                                        IApiResponse<IEnumerable<RoleCreatorTypeResponse>> response = await RolesClient.GetRoleCreatorTypes();
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error occured. Creator role types could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                                GetRolesMethod="@(async () =>
+                                                {
+                                                    IApiResponse<IEnumerable<RoleCreatorResponse>> response = await RolesClient.GetRoleCreators(new RoleCreatorFilterQuery { PersonId = _data.Id });
+                                                    if (!response.IsSuccessful)
+                                                    {
+                                                        await Base.SnackbarStack.PushAsync("An error occured. Creator roles could not be loaded.", SnackbarColor.Danger);
+                                                    }
+                                                    return response.Content;
+                                                })"
+                                OnRatingChanged="@(async () => await _ratingPanel.Update())"/>
+                </TabPanel>
+            </Content>
+        </Tabs>
+    </div>
+}

WatchIt.Website/Components/Pages/PersonPage.razor.cs

@@ -0,0 +1,85 @@
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Components.Panels.Pages.PersonPage;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class PersonPage : Page
+{
+    #region SERVICES
+
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long Id { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private RatingPanel _ratingPanel = null!;
+
+    private bool _loaded;
+    
+    private PersonResponse? _data;
+    private IEnumerable<MediumResponse>? _media;
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        await Task.WhenAll(
+        [
+            LoadData(),
+            LoadMedia(),
+            IncrementViewCounter(),
+        ]);
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadData()
+    {
+        IApiResponse<PersonResponse> response = await PeopleClient.GetPerson(Id, true);
+        if (response.IsSuccessful)
+        {
+            _data = response.Content;
+        }
+    }
+
+    private async Task LoadMedia()
+    {
+        IApiResponse<IEnumerable<MediumResponse>> response = await MediaClient.GetMedia(includePictures: true);
+        if (response.IsSuccessful)
+        {
+            _media = response.Content;
+        }
+    }
+
+    private async Task IncrementViewCounter()
+    {
+        await PeopleClient.PutPeopleViewCount(Id);
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/SearchPage.razor

@@ -0,0 +1,154 @@
+@using System.Net
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.People.Person
+@using WatchIt.DTO.Models.Controllers.People.Person.Query
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.Website.Components.Panels.Pages.SearchPage
+
+@inherits Page
+
+@page "/search/{query}"
+
+<PageTitle>WatchIt - Searching "@(Query)"</PageTitle>
+
+
+
+<div class="vstack gap-default">
+    <div class="rounded-3 panel panel-regular p-3">
+        <div class="d-flex justify-content-center">
+            <h3 class="m-0">
+                <strong>Search results for phrase:</strong> "@(WebUtility.UrlDecode(Query))"
+            </h3>
+        </div>
+    </div>
+    <StandardSearchResultPanel TItem="MediumMovieResponse"
+                               TQuery="MediumMovieFilterQuery"
+                               Title="Movies"
+                               UrlIdTemplate="/media/{0}"
+                               IdFunc="@(item => item.Id)"
+                               NameFunc="@(item => item.Title)"
+                               AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                               GlobalRatingFunc="@(item => item.Rating)"
+                               Query="@(new MediumMovieFilterQuery { Title = WebUtility.UrlDecode(Query) })"
+                               GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                               {
+                                                   IApiResponse<IEnumerable<MediumMovieResponse>> response = await MediaClient.GetMediumMovies(filterQuery, orderQuery, pagingQuery, true);
+                                                   if (!response.IsSuccessful)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync("An error has occured. Movies could not be loaded", SnackbarColor.Danger);
+                                                   }
+                                                   return response.Content ?? [];
+                                               })"
+                               PictureFunc="@(x => Task.FromResult(x.Picture))"
+                               PicturePlaceholder="/assets/placeholders/medium.png"
+                               GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+                               GetYourRatingMethod="@(async (item, userId) =>
+                                                    {
+                                                        IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                                                        if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for movie with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                               PutYourRatingMethod="@(async (item, request) =>
+                                                    {
+                                                        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                        IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request); 
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                                                        }
+                                                    })"
+                               DeleteYourRatingMethod="@(async item =>
+                                                       {
+                                                           string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                           IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id); 
+                                                           if (!response.IsSuccessful)
+                                                           {
+                                                               await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                                                           }
+                                                       })"/>
+    <StandardSearchResultPanel TItem="MediumSeriesResponse"
+                               TQuery="MediumSeriesFilterQuery"
+                               Title="TV series"
+                               UrlIdTemplate="/media/{0}"
+                               IdFunc="@(item => item.Id)"
+                               NameFunc="@(item => item.Title)"
+                               AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                               GlobalRatingFunc="@(item => item.Rating)"
+                               Query="@(new MediumSeriesFilterQuery { Title = WebUtility.UrlDecode(Query) })"
+                               GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                               {
+                                                   IApiResponse<IEnumerable<MediumSeriesResponse>> response = await MediaClient.GetMediumSeries(filterQuery, orderQuery, pagingQuery, true);
+                                                   if (!response.IsSuccessful)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync("An error has occured. TV series could not be loaded", SnackbarColor.Danger);
+                                                   }
+                                                   return response.Content ?? [];
+                                               })"
+                               PictureFunc="@(x => Task.FromResult(x.Picture))"
+                               PicturePlaceholder="/assets/placeholders/medium.png"
+                               GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+                               GetYourRatingMethod="@(async (item, userId) =>
+                                                    {
+                                                        IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                                                        if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for TV series with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                                        }
+                                                        return response.Content;
+                                                    })"
+                               PutYourRatingMethod="@(async (item, request) =>
+                                                    {
+                                                        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                        IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                                                        if (!response.IsSuccessful)
+                                                        {
+                                                            await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                                                        }
+                                                    })"
+                               DeleteYourRatingMethod="@(async item =>
+                                                       {
+                                                           string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                           IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                                           if (!response.IsSuccessful)
+                                                           {
+                                                               await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                                                           }
+                                                       })"/>
+    <StandardSearchResultPanel TItem="PersonResponse"
+                               TQuery="PersonFilterQuery"
+                               Title="People"
+                               UrlIdTemplate="/people/{0}"
+                               IdFunc="@(item => item.Id)"
+                               NameFunc="@(item => item.Name)"
+                               GlobalRatingFunc="@(item => item.Rating)"
+                               Query="@(new PersonFilterQuery { Name = WebUtility.UrlDecode(Query) })"
+                               GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                               {
+                                                   IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople(filterQuery, orderQuery, pagingQuery, true);
+                                                   if (!response.IsSuccessful)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync("An error has occured. People could not be loaded", SnackbarColor.Danger);
+                                                   }
+                                                   return response.Content ?? [];
+                                               })"
+                               PictureFunc="@(x => Task.FromResult(x.Picture))"
+                               PicturePlaceholder="/assets/placeholders/person.png"
+                               GetGlobalRatingMethod="@(async x => (await PeopleClient.GetPersonRating(x.Id)).Content)"
+                               SecondaryRatingTitle="@(Base.AuthorizedAccount is null ? null : "Your rating")"
+                               GetSecondaryRatingMethod="@(Base.AuthorizedAccount is null ? null : async (item) =>
+                                                         {
+                                                             IApiResponse<RatingUserOverallResponse> response = await PeopleClient.GetPersonUserRating(item.Id, Base.AuthorizedAccount.Id);
+                                                             if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                             {
+                                                                 await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for person with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                                             }
+                                                             return response.Content;
+                                                         })"/>
+    <UserSearchResultPanel Query="@(WebUtility.UrlDecode(Query))"/>
+</div>

WatchIt.Website/Components/Pages/SearchPage.razor.cs

@@ -0,0 +1,35 @@
+using System.Net;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class SearchPage : Page
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required string Query { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    private string _decodedQuery => WebUtility.UrlDecode(Query);
+
+    #endregion
+}

WatchIt.Website/Components/Pages/SeriesListPage.razor

@@ -0,0 +1,74 @@
+@using System.Net
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.Database.Model.Media
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.Website.Components.List
+
+@inherits Page
+
+@page "/media/series"
+
+<PageTitle>TV series - WatchIt</PageTitle>
+
+
+
+<List TItem="MediumSeriesResponse"
+      TEntity="MediumSeries"
+      TQuery="MediumSeriesFilterQuery"
+      Title="TV series database"
+      IdFunc="@(item => item.Id)"
+      NameFunc="@(item => item.Title)"
+      AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+      GlobalRatingFunc="@(item => item.Rating)"
+      PictureFunc="@(item => Task.FromResult(item.Picture))"
+      UrlIdTemplate="/media/{0}"
+      PicturePlaceholder="/assets/placeholders/medium.png"
+      GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                      {
+                          IApiResponse<IEnumerable<MediumSeriesResponse>> response = await MediaClient.GetMediumSeries(filterQuery, orderQuery, pagingQuery, true);
+                          if (!response.IsSuccessful)
+                          {
+                              await Base.SnackbarStack.PushAsync($"An error occured. TV series could not be obtained.", SnackbarColor.Danger);
+                          }
+                          return response.Content ?? [];
+                      })"
+      SortingOptions="@(new Dictionary<string, string>
+                      {
+                          { "rating.count", "Number of ratings" },
+                          { "rating.average", "Average rating" },
+                          { "title", "Title" },
+                          { "release_date", "Release date" },
+                      })"
+      GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+      GetYourRatingMethod="@(async (item, userId) =>
+                           {
+                               IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                               if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                               {
+                                   await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for TV series with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                               }
+                               return response.Content;
+                           })"
+      PutYourRatingMethod="@(async (item, request) =>
+                           {
+                               string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                               IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                               if (!response.IsSuccessful)
+                               {
+                                   await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                               }
+                           })"
+      DeleteYourRatingMethod="@(async item =>
+                              {
+                                  string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                  IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                  if (!response.IsSuccessful)
+                                  {
+                                      await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                                  }
+                              })">
+    <MediumSeriesFilter/>
+</List>

WatchIt.Website/Components/Pages/SeriesListPage.razor.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class SeriesListPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    
+    #endregion
+}

WatchIt.Website/Components/Pages/UserEditPage.razor

@@ -0,0 +1,120 @@
+@using System.Net
+@using System.Text
+@using WatchIt.Website.Components.Panels.Pages.UserEditPage
+@using Blazorise
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Generics.Image
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using Authorization = WatchIt.Website.Components.Subcomponents.Common.Authorization
+
+@inherits Page
+
+@page "/user_settings"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+
+    if (_data is null)  sb.Insert(0, "Loading...");
+    else                sb.Insert(0, "User settings");
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+<Authorization>
+    <Authorized>
+        <div class="vstack gap-default">
+            <HeaderPanel Data="@(Base.AuthorizedAccount)"/>
+            <Tabs Pills
+                  RenderMode="TabsRenderMode.LazyLoad"
+                  Class="panel panel-menu panel-background-menu justify-content-center"
+                  SelectedTab="profile">
+                <Items>
+                    <Tab Name="profile">Profile</Tab>
+                    <Tab Name="account">Account</Tab>
+                </Items>
+                <Content>
+                    <TabPanel Name="profile">
+                        <div class="vstack gap-default">
+                            <div class="container-grid">
+                                <div class="row gx-default">
+                                    <div class="col-auto">
+                                        <ImageEditorPanel Image="@(Base.AuthorizedAccount.ProfilePicture)"
+                                                          Class="h-100"
+                                                          ImagePlaceholder="assets/placeholders/user.png"
+                                                          Circle="true"
+                                                          ImageGetMethod="@(async () =>
+                                                                          {
+                                                                              IApiResponse<ImageResponse> response = await AccountsClient.GetAccountProfilePicture(Base.AuthorizedAccount.Id);
+                                                                              if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                                              {
+                                                                                  await Base.SnackbarStack.PushAsync("An error occured. Profile picture could not be obtained.", SnackbarColor.Danger);
+                                                                              }
+
+                                                                              return response.Content;
+                                                                          })"
+                                                          ImagePutMethod="@(async request =>
+                                                                          {
+                                                                              string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                              IApiResponse<ImageResponse> response = await AccountsClient.PutAccountProfilePicture(token, request);
+                                                                              if (response.IsSuccessful)
+                                                                              {
+                                                                                  Base.AuthorizedAccount.ProfilePicture = response.Content;
+                                                                                  NavigationManager.Refresh(true);
+                                                                              }
+                                                                              else
+                                                                              {
+                                                                                  await Base.SnackbarStack.PushAsync("An error occured. Profile picture could not be saved.", SnackbarColor.Danger);
+                                                                              }
+
+                                                                              return response.Content;
+                                                                          })"
+                                                          ImageDeleteMethod="@(async () =>
+                                                                             {
+                                                                                 string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                                 IApiResponse response = await AccountsClient.DeleteAccountProfilePicture(token);
+                                                                                 if (response.IsSuccessful)
+                                                                                 {
+                                                                                     Base.AuthorizedAccount.ProfilePicture = null;
+                                                                                     NavigationManager.Refresh(true);
+                                                                                 }
+                                                                                 else
+                                                                                 {
+                                                                                     await Base.SnackbarStack.PushAsync("An error occured. Profile picture could not be removed.", SnackbarColor.Danger);
+                                                                                 }
+
+                                                                                 return response.IsSuccessful;
+                                                                             })"/>
+                                    </div>
+                                    <div class="col">
+                                        <EditFormPanel Data="@(Base.AuthorizedAccount)"
+                                                       Class="h-100"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <ProfileBackgroundEditorPanel Id="@(Base.AuthorizedAccount.Id)"/>
+                        </div>
+                    </TabPanel>
+                    <TabPanel Name="account">
+                        <div class="vstack gap-default">
+                            <NewEmailPanel Data="@(Base.AuthorizedAccount)"/>
+                            <NewUsernamePanel Data="@(Base.AuthorizedAccount)"/>
+                            <NewPasswordPanel Data="@(Base.AuthorizedAccount)"/>
+                        </div>
+                    </TabPanel>
+                </Content>
+            </Tabs>
+        </div>
+    </Authorized>
+    <NotAuthorized>
+        <ErrorPanel ErrorMessage="You must be logged in to access this site."/>
+    </NotAuthorized>
+    <Loading>
+        <div class="m-5">
+            <Loading/>
+        </div>
+    </Loading>
+</Authorization>

WatchIt.Website/Components/Pages/UserEditPage.razor.cs

@@ -0,0 +1,62 @@
+using System.Net;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Accounts.Account;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class UserEditPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IAccountsClient AccountsClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private AccountResponse? _data;
+
+    //private HeaderPanel _header = default!;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        while (!Base.AuthorizationLoaded)
+        {
+            await Task.Delay(10);
+        }
+        
+        if (Base.AuthorizedAccount is null)
+        {
+            NavigationManager.NavigateTo($"/auth?redirect_to={WebUtility.UrlEncode("/user_settings")}");
+            return;
+        }
+        StateHasChanged();
+        
+        IApiResponse<PhotoResponse> backgroundResponse = await AccountsClient.GetAccountBackgroundPicture(Base.AuthorizedAccount.Id);
+        if (backgroundResponse.IsSuccessful)
+        {
+            Base.CustomBackground = backgroundResponse.Content;
+        }
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Pages/UserPage.razor

@@ -0,0 +1,313 @@
+@using System.Net
+@using System.Text
+@using WatchIt.Website.Components.Subcomponents.Common
+@using WatchIt.Website.Components.Panels.Common
+@using WatchIt.Website.Components.Panels.Pages.UserPage
+@using Blazorise
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.Database.Model.Media
+@using WatchIt.Database.Model.People
+@using WatchIt.DTO.Models.Controllers.Accounts.Account
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Query
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.People.Person
+@using WatchIt.DTO.Models.Controllers.People.Person.Query
+@using WatchIt.DTO.Models.Generics.Rating
+@using WatchIt.DTO.Query
+@using WatchIt.Website.Components.List
+
+@inherits Page
+
+@page "/users/{id:long?}"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+
+    if (!_loaded)               sb.Insert(0, "Loading...");
+    else if (_data is null)     sb.Insert(0, "Error");
+    else
+    {
+        if (_owner) sb.Insert(0, "Your profile");
+        else        sb.Insert(0, $"\"{_data.Username}\" profile");
+    }
+
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+@if (!_loaded)
+{
+    <div class="m-5">
+        <Loading/>
+    </div>
+}
+else if (_data is null)
+{
+    <ErrorPanel ErrorMessage="@($"User with ID {Id!.Value} was not found")"/>
+}
+else
+{
+    <div class="vstack mt-header gap-default">
+        <HeaderPanel Data="@(_data)"
+                     Followers="@(_followers)"
+                     LoggedUserData="@(Base.AuthorizedAccount)"/>
+        <Tabs Pills
+              RenderMode="TabsRenderMode.LazyLoad"
+              SelectedTab="summary"
+              Class="panel panel-menu panel-background-menu justify-content-center">
+            <Items>
+                <Tab Name="summary">Summary</Tab>
+                <Tab Name="movies">Movies</Tab>
+                <Tab Name="series">TV Series</Tab>
+                <Tab Name="people">People</Tab>
+                <Tab Name="follows">Follows</Tab>
+                <Tab Name="followers">Followers</Tab>
+            </Items>
+            <Content>
+                <TabPanel Name="summary">
+                    <div class="vstack gap-default">
+                        <HorizontalListPanel TItem="MediumMovieUserRatedResponse"
+                                             Title="Recently rated movies"
+                                             Count="6"
+                                             GetItemsAction="@(() => AccountsClient.GetAccountRatedMediaMovies(_data.Id, orderQuery: new OrderQuery
+                                                                 {
+                                                                     OrderBy = "rating_user.date",
+                                                                 },
+                                                                 pagingQuery: new PagingQuery
+                                                                 {
+                                                                     First = 6,
+                                                                 },
+                                                                 includePictures: true))"
+                                             ItemUrlFormatString="/media/{0}"
+                                             IdSource="@(item => item.Id)"
+                                             NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                                             PosterPlaceholder="/assets/placeholders/medium.png"
+                                             GetPictureAction="@(item => Task.FromResult(item.Picture))"
+                                             HidePlace="@(true)"
+                                             EmptyListMessage="No items"/>
+                        <HorizontalListPanel TItem="MediumSeriesUserRatedResponse"
+                                             Title="Recently rated TV series"
+                                             Count="6"
+                                             GetItemsAction="@(() => AccountsClient.GetAccountRatedMediaSeries(_data.Id, orderQuery: new OrderQuery
+                                                                 {
+                                                                     OrderBy = "rating_user.date",
+                                                                 },
+                                                                 pagingQuery: new PagingQuery
+                                                                 {
+                                                                     First = 6,
+                                                                 },
+                                                                 includePictures: true))"
+                                             ItemUrlFormatString="/media/{0}"
+                                             IdSource="@(item => item.Id)"
+                                             NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
+                                             PosterPlaceholder="/assets/placeholders/medium.png"
+                                             GetPictureAction="@(item => Task.FromResult(item.Picture))"
+                                             HidePlace="@(true)"
+                                             EmptyListMessage="No items"/>
+                        <HorizontalListPanel TItem="PersonUserRatedResponse"
+                                             Title="Recently rated people"
+                                             Count="6"
+                                             GetItemsAction="@(() => AccountsClient.GetAccountRatedPeople(_data.Id, orderQuery: new OrderQuery
+                                                                 {
+                                                                     OrderBy = "rating_user.last_date",
+                                                                 },
+                                                                 pagingQuery: new PagingQuery
+                                                                 {
+                                                                     First = 6,
+                                                                 },
+                                                                 includePictures: true))"
+                                             ItemUrlFormatString="/people/{0}"
+                                             IdSource="@(item => item.Id)"
+                                             NameSource="@(item => item.Name)"
+                                             PosterPlaceholder="/assets/placeholders/person.png"
+                                             GetPictureAction="@(item => Task.FromResult(item.Picture))"
+                                             HidePlace="@(true)"
+                                             EmptyListMessage="No items"/>
+                    </div>
+                </TabPanel>
+                <TabPanel Name="movies">
+                    <List TItem="MediumMovieUserRatedResponse"
+                          TEntity="MediumMovie"
+                          TQuery="MediumMovieFilterQuery"
+                          Title="Rated movies"
+                          IdFunc="@(item => item.Id)"
+                          NameFunc="@(item => item.Title)"
+                          AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                          GlobalRatingFunc="@(item => item.Rating)"
+                          PictureFunc="@(item => Task.FromResult(item.Picture))"
+                          UrlIdTemplate="/media/{0}"
+                          PicturePlaceholder="/assets/placeholders/medium.png"
+                          GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                          {
+                                              IApiResponse<IEnumerable<MediumMovieUserRatedResponse>> response = await AccountsClient.GetAccountRatedMediaMovies(_data.Id, filterQuery, null, orderQuery, pagingQuery, true);
+                                              if (!response.IsSuccessful)
+                                              {
+                                                  await Base.SnackbarStack.PushAsync($"An error occured. Movies could not be obtained.", SnackbarColor.Danger);
+                                              }
+                                              return response.Content ?? [];
+                                          })"
+                          SortingOptions="@(new Dictionary<string, string>
+                                          {
+                                              { "rating_user.date", "User rating date" },
+                                              { "rating_user.rating", "User rating" },
+                                              { "rating.count", "Number of ratings" },
+                                              { "rating.average", "Average rating" },
+                                              { "title", "Title" },
+                                              { "release_date", "Release date" },
+                                          })"
+                          GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+                          GetYourRatingMethod="@(async (item, userId) =>
+                                               {
+                                                   IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                                                   if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for movie with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                                   }
+                                                   return response.Content;
+                                               })"
+                          PutYourRatingMethod="@(async (item, request) =>
+                                               {
+                                                   string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                   IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                                                   if (!response.IsSuccessful)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                                                   }
+                                               })"
+                          DeleteYourRatingMethod="@(async item =>
+                                                  {
+                                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                      IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                                      if (!response.IsSuccessful)
+                                                      {
+                                                          await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate movies", SnackbarColor.Danger);
+                                                      }
+                                                  })">
+                        <MediumMoviesUserRatedFilter/>
+                    </List>
+                </TabPanel>
+                <TabPanel Name="series">
+                    <List TItem="MediumSeriesUserRatedResponse"
+                          TEntity="MediumSeries"
+                          TQuery="MediumSeriesFilterQuery"
+                          Title="Rated TV series"
+                          IdFunc="@(item => item.Id)"
+                          NameFunc="@(item => item.Title)"
+                          AdditionalNameInfoFunc="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                          GlobalRatingFunc="@(item => item.Rating)"
+                          PictureFunc="@(item => Task.FromResult(item.Picture))"
+                          UrlIdTemplate="/media/{0}"
+                          PicturePlaceholder="/assets/placeholders/medium.png"
+                          GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                          {
+                                              IApiResponse<IEnumerable<MediumSeriesUserRatedResponse>> response = await AccountsClient.GetAccountRatedMediaSeries(_data.Id, filterQuery, null, orderQuery, pagingQuery, true);
+                                              if (!response.IsSuccessful)
+                                              {
+                                                  await Base.SnackbarStack.PushAsync($"An error occured. TV series could not be obtained.", SnackbarColor.Danger);
+                                              }
+                                              return response.Content ?? [];
+                                          })"
+                          SortingOptions="@(new Dictionary<string, string>
+                                          {
+                                              { "rating_user.date", "User rating date" },
+                                              { "rating_user.rating", "User rating" },
+                                              { "rating.count", "Number of ratings" },
+                                              { "rating.average", "Average rating" },
+                                              { "title", "Title" },
+                                              { "release_date", "Release date" },
+                                          })"
+                          GetGlobalRatingMethod="@(async x => (await MediaClient.GetMediumRating(x.Id)).Content)"
+                          GetYourRatingMethod="@(async (item, userId) =>
+                                               {
+                                                   IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(item.Id, userId);
+                                                   if (!response.IsSuccessful && response.StatusCode != HttpStatusCode.NotFound)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync($"An error has occured. Your rating for TV series with id {item.Id} could not be loaded.", SnackbarColor.Danger);
+                                                   }
+                                                   return response.Content;
+                                               })"
+                          PutYourRatingMethod="@(async (item, request) =>
+                                               {
+                                                   string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                   IApiResponse response = await MediaClient.PutMediumRating(token, item.Id, request);
+                                                   if (!response.IsSuccessful)
+                                                   {
+                                                       await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                                                   }
+                                               })"
+                          DeleteYourRatingMethod="@(async item =>
+                                                  {
+                                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                      IApiResponse response = await MediaClient.DeleteMediumRating(token, item.Id);
+                                                      if (!response.IsSuccessful)
+                                                      {
+                                                          await Base.SnackbarStack.PushAsync("An error has occured. You are not authorized to rate TV series", SnackbarColor.Danger);
+                                                      }
+                                                  })">
+                        <MediumSeriesUserRatedFilter/>
+                    </List>
+                </TabPanel>
+                <TabPanel Name="people">
+                    <List TItem="PersonUserRatedResponse"
+                          TEntity="Person"
+                          TQuery="PersonFilterQuery"
+                          Title="Rated people"
+                          IdFunc="@(item => item.Id)"
+                          NameFunc="@(item => item.Name)"
+                          GlobalRatingFunc="@(item => item.Rating)"
+                          PictureFunc="@(item => Task.FromResult(item.Picture))"
+                          UrlIdTemplate="/people/{0}"
+                          PicturePlaceholder="/assets/placeholders/person.png"
+                          GetItemsMethod="@(async (filterQuery, orderQuery, pagingQuery) =>
+                                          {
+                                              IApiResponse<IEnumerable<PersonUserRatedResponse>> response = await AccountsClient.GetAccountRatedPeople(_data.Id, filterQuery, null, orderQuery, pagingQuery, true);
+                                              if (!response.IsSuccessful)
+                                              {
+                                                  await Base.SnackbarStack.PushAsync($"An error occured. People could not be obtained.", SnackbarColor.Danger);
+                                              }
+                                              return response.Content ?? [];
+                                          })"
+                          SortingOptions="@(new Dictionary<string, string>
+                                          {
+                                              { "rating_user.last_date", "Last user rating date" },
+                                              { "rating_user.count", "Number of roles user ratings" },
+                                              { "rating_user.average", "User rating" },
+                                              { "rating.count", "Number of ratings" },
+                                              { "rating.average", "Average rating" },
+                                              { "name", "Name" },
+                                              { "birth_date", "Birth date" },
+                                          })"
+                          GetGlobalRatingMethod="@(async x => (await PeopleClient.GetPersonRating(x.Id)).Content)">
+                        <PeopleUserRatedFilter/>
+                    </List>
+                </TabPanel>
+                <TabPanel Name="follows">
+                    <FollowListPanel Title="Follows"
+                                     GetItemsMethod="@(async () =>
+                                                     {
+                                                         IApiResponse<IEnumerable<AccountResponse>> response = await AccountsClient.GetAccountFollows(_data.Id);
+                                                         if (!response.IsSuccessful)
+                                                         {
+                                                             await Base.SnackbarStack.PushAsync($"An error occured. Follows could not be obtained.", SnackbarColor.Danger);
+                                                         }
+                                                         return response.Content ?? [];
+                                                     })"/>
+                </TabPanel>
+                <TabPanel Name="followers">
+                    <FollowListPanel Title="Followers"
+                                     GetItemsMethod="@(async () =>
+                                                     {
+                                                         IApiResponse<IEnumerable<AccountResponse>> response = await AccountsClient.GetAccountFollowers(_data.Id);
+                                                         if (!response.IsSuccessful)
+                                                         {
+                                                             await Base.SnackbarStack.PushAsync($"An error occured. Followers could not be obtained.", SnackbarColor.Danger);
+                                                         }
+                                                         return response.Content ?? [];
+                                                     })"/>
+                </TabPanel>
+            </Content>
+        </Tabs>
+    </div>
+}

WatchIt.Website/Components/Pages/UserPage.razor.cs

@@ -0,0 +1,127 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Accounts.Account;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Pages;
+
+public partial class UserPage : Page
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IAccountsClient AccountsClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long? Id { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    private bool _redirection;
+    private bool _owner;
+
+    private AccountResponse? _data;
+    private List<AccountResponse> _followers;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await LoadUserData();
+        if (_data is not null)
+        {
+            await Task.WhenAll(
+            [
+                LoadProfileBackground(),
+                LoadFollowers()
+            ]);
+        }
+        
+        _loaded = !_redirection;
+        StateHasChanged();
+    }
+    
+    private async Task LoadUserData()
+    {
+        if (Id.HasValue)
+        {
+            IApiResponse<AccountResponse> response = await AccountsClient.GetAccount(Id.Value);
+            if (!response.IsSuccessful)
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Account info could not be obtained.", SnackbarColor.Danger);
+            }
+            else
+            {
+                _data = response.Content;
+            }
+        }
+        else
+        {
+            while (!Base.AuthorizationLoaded)
+            {
+                await Task.Delay(10);
+            }
+            
+            if (Base.AuthorizedAccount is null)
+            {
+                NavigationManager.NavigateTo($"/auth?redirect_to={WebUtility.UrlEncode("/user")}");
+                _redirection = true;
+                return;
+            }
+            
+            Id = Base.AuthorizedAccount.Id;
+            _data = Base.AuthorizedAccount;
+        }
+        _owner = Id.Value == Base.AuthorizedAccount?.Id;
+    }
+
+    private async Task LoadProfileBackground()
+    {
+        IApiResponse<PhotoResponse> response = await AccountsClient.GetAccountBackgroundPicture(_data!.Id);
+        if (response.IsSuccessful)
+        {
+            Base.CustomBackground = response.Content;
+        }
+        else if (response.StatusCode != HttpStatusCode.NotFound)
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Profile background loading failed.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadFollowers()
+    {
+        IApiResponse<IEnumerable<AccountResponse>> response = await AccountsClient.GetAccountFollowers(_data!.Id);
+        if (response.IsSuccessful)
+        {
+            _followers = response.Content.ToList();
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Followers could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Common/ErrorPanel.razor

@@ -1,3 +1,7 @@
+@inherits Component
+
+
+
 <div class="panel">
     <div class="vstack">
         <div class="d-flex justify-content-center">

WatchIt.Website/Components/Panels/Common/ErrorPanel.razor.cs

@@ -1,8 +1,8 @@
 using Microsoft.AspNetCore.Components;
 
-namespace WatchIt.Website.Components.Common.Panels;
+namespace WatchIt.Website.Components.Panels.Common;
 
-public partial class ErrorPanelComponent : ComponentBase
+public partial class ErrorPanel : Component
 {
     #region PARAMETERS
     

WatchIt.Website/Components/Panels/Common/HorizontalListPanel.razor

@@ -0,0 +1,49 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+@typeparam TItem
+
+
+
+<div class="panel">
+    <div class="vstack gap-3">
+        <span class="panel-text-title">@(Title)</span>
+        @if (_loaded)
+        {
+            <div class="container-grid">
+                <div class="row">
+                    @if (_items.Count() > 0)
+                    {
+                        for (int i = 0; i < Count; i++)
+                        {
+                            <div class="col">
+                                @if (_items.Count() > i)
+                                {
+                                    <a class="text-reset text-decoration-none" href="@(string.Format(ItemUrlFormatString, IdSource(_items.ElementAt(i))))">
+                                        @{ int iCopy = i; }
+                                        <HorizontalListItem Place="@(HidePlace ? null : i + 1)"
+                                                            Name="@(NameSource(_items.ElementAt(iCopy)))"
+                                                            PosterPlaceholder="@(PosterPlaceholder)"
+                                                            GetPosterAction="@(() => GetPictureAction(_items.ElementAt(iCopy)))"/>
+                                    </a>
+                                }
+                            </div>
+                        }
+                    }
+                    else if (!string.IsNullOrWhiteSpace(EmptyListMessage))
+                    {
+                        <div class="col">
+                            <div class="d-flex justify-content-center">
+                                @(EmptyListMessage)
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+        else
+        {
+            <Loading Color="@(Loading.Colors.Light)"/>
+        }
+    </div>
+</div>

WatchIt.Website/Components/Panels/Common/HorizontalListPanel.razor.cs

@@ -0,0 +1,50 @@
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Generics.Image;
+
+namespace WatchIt.Website.Components.Panels.Common;
+
+public partial class HorizontalListPanel<TItem> : Component
+{
+    #region PARAMETERS
+
+    [Parameter] public int Count { get; set; } = 5;
+    [Parameter] public required string Title {get; set; }
+    [Parameter] public required Func<Task<IApiResponse<IEnumerable<TItem>>>> GetItemsAction { get; set; }
+    [Parameter] public required string ItemUrlFormatString { get; set; }
+    [Parameter] public required Func<TItem, long> IdSource { get; set; }
+    [Parameter] public required Func<TItem, string> NameSource { get; set; }
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public required Func<TItem, Task<ImageResponse?>> GetPictureAction { get; set; }
+    [Parameter] public bool HidePlace { get; set; }
+    [Parameter] public string? EmptyListMessage { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private IEnumerable<TItem> _items = default!;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+    
+    protected override async Task OnFirstRenderAsync()
+    {
+        IApiResponse<IEnumerable<TItem>> response = await GetItemsAction();
+        if (response.IsSuccessful)
+        {
+            _items = response.Content;
+        }
+        _loaded = true;
+        StateHasChanged();
+    }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Common/ImageEditorPanel.razor

@@ -1,19 +1,25 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+
+
+
 <div class="panel @(Class)">
     @if (_loaded)
     {
         <div class="vstack gap-3">
-            <PictureComponent Picture="@(_pictureSelected)" Placeholder="@(PicturePlaceholder)" AlternativeText="loaded_picture" Circle="@(Circle)" Width="@(ContentWidth)"/>
-            <InputFile class="form-control content-width" OnChange="Load" disabled="@(!Id.HasValue)" autocomplete="off"/>
-            @if (_pictureChanged || _pictureSaved is not null)
+            <Image Content="@(_imageSelected)" Placeholder="@(ImagePlaceholder)" AlternativeText="loaded_image" Circle="@(Circle)" Width="@(ContentWidth)"/>
+            <Blazorise.FileEdit Width="@(Blazorise.Width.Px(ContentWidth - 100))" Changed="@(LoadImageFromFile)" Filter="image/jpeg, image/png, image/webp" Disabled="@(Disabled)"/>
+            @if (_imageChanged || _imageSaved is not null)
             {
                 <div class="content-width">
-                    @if (_pictureChanged)
+                    @if (_imageChanged)
                     {
                         <div class="container-grid">
                             <div class="row gx-1">
                                 <div class="col">
-                                    <button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="Save" disabled=@(!Id.HasValue || _pictureSaving || _pictureDeleting) autocomplete="off">
-                                        @if (!_pictureSaving)
+                                    <button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="@(SaveImage)" disabled=@(Disabled || _imageSaving || _imageDeleting) autocomplete="off">
+                                        @if (!_imageSaving)
                                         {
                                             <span>Save</span>
                                         }
@@ -25,15 +31,15 @@
                                     </button>
                                 </div>
                                 <div class="col">
-                                    <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="Cancel" disabled=@(!Id.HasValue || _pictureSaving || _pictureDeleting) autocomplete="off">Drop changes</button>
+                                    <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="@(CancelImage)" disabled=@(Disabled || _imageSaving || _imageDeleting) autocomplete="off">Drop changes</button>
                                 </div>
                             </div>
                         </div>
                     }
-                    else if (_pictureSaved is not null)
+                    else if (_imageSaved is not null)
                     {
-                        <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="Delete" disabled=@(!Id.HasValue || _pictureSaving || _pictureDeleting) autocomplete="off">
-                            @if (!_pictureSaving)
+                        <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="@(DeleteImage)" disabled=@(Disabled || _imageSaving || _imageDeleting) autocomplete="off">
+                            @if (!_imageSaving)
                             {
                                 <span>Delete</span>
                             }
@@ -51,13 +57,12 @@
     else
     {
         <div class="d-flex align-items-center justify-content-center h-100 content-width">
-            <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+            <Loading Color="@(Loading.Colors.Light)"/>
         </div>
     }
 </div>
 
 
-
 <style>
     /* CLASSES */
     

WatchIt.Website/Components/Panels/Common/ImageEditorPanel.razor.cs

@@ -0,0 +1,138 @@
+using System.Reflection.Metadata;
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using WatchIt.DTO.Models.Generics.Image;
+
+namespace WatchIt.Website.Components.Panels.Common;
+
+public partial class ImageEditorPanel : Component
+{
+    #region PARAMETERS
+    
+    [Parameter] public int ContentWidth { get; set; } = 300;
+    [Parameter] public required string ImagePlaceholder { get; set; }
+    [Parameter] public bool Circle { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    [Parameter]
+    public required ImageBase? Image
+    {
+        get => _imageSaved;
+        set
+        {
+            _imageSet = true;
+            _imageSaved = value;
+            _imageSelected = ImageToRequest(value);
+        }
+    }
+
+    [Parameter] public required Func<Task<ImageResponse?>> ImageGetMethod { get; set; }
+    [Parameter] public required Func<ImageRequest, Task<ImageResponse?>> ImagePutMethod { get; set; }
+    [Parameter] public required Func<Task<bool>> ImageDeleteMethod { get; set; }
+    
+    [Parameter] public Action<ImageResponse?>? OnImageChanged { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private ImageBase? _imageSaved;
+    private bool _imageSet;
+    private ImageRequest? _imageSelected;
+    private bool _imageChanged;
+    private bool _imageSaving;
+    private bool _imageDeleting;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        if (!_imageSet)
+        {
+            _imageSaved = await ImageGetMethod();
+            _imageSelected = ImageToRequest(_imageSaved);
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadImageFromFile(FileChangedEventArgs args)
+    {
+        IFileEntry file = args.Files.First();
+        Stream stream = file.OpenReadStream(5242880);
+        byte[] array;
+        using (MemoryStream ms = new MemoryStream())
+        {
+            await stream.CopyToAsync(ms);
+            array = ms.ToArray();
+        }
+        _imageSelected = new ImageRequest
+        {
+            Image = array,
+            MimeType = file.Type,
+        };
+        _imageChanged = true;
+    }
+
+    private async Task SaveImage()
+    {
+        _imageSaving = true;
+        if (_imageSelected is not null)
+        {
+            ImageResponse? response = await ImagePutMethod(_imageSelected);
+            if (response is not null)
+            {
+                _imageSaved = response;
+                _imageSelected = ImageToRequest(_imageSaved);
+                _imageChanged = false;
+                OnImageChanged?.Invoke(response);
+            }
+        }
+        _imageSaving = false;
+    }
+
+    private void CancelImage()
+    {
+        _imageSelected = ImageToRequest(_imageSaved);
+        _imageChanged = false;
+    }
+
+    private async Task DeleteImage()
+    {
+        _imageDeleting = true;
+        if (_imageSaved is not null)
+        {
+            bool response = await ImageDeleteMethod();
+            if (response)
+            {
+                _imageSaved = null;
+                _imageSelected = null;
+                _imageChanged = false;
+                OnImageChanged?.Invoke(null);
+            }
+        }
+        _imageDeleting = false;
+    }
+
+    public static ImageRequest? ImageToRequest(ImageBase? image) => image is null ? null : new ImageRequest
+    {
+        Image = image.Image,
+        MimeType = image.MimeType,
+    };
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Common/ItemPageHeaderPanel.razor

@@ -1,7 +1,12 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+@inherits Component
+
+
+
 <div class="container-grid mt-header">
     <div class="row">
         <div class="col-auto">
-            <PictureComponent Picture="@(_poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster" Height="350"/>
+            <Image Content="@(Poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster" Height="350"/>
         </div>
         <div class="col">
             <div class="d-flex flex-column justify-content-end h-100">

WatchIt.Website/Components/Panels/Common/ItemPageHeaderPanel.razor.cs

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Models.Generics.Image;
+
+namespace WatchIt.Website.Components.Panels.Common;
+
+public partial class ItemPageHeaderPanel : Component
+{
+    #region PARAMETERS
+    
+    [Parameter] public required string Name { get; set; }
+    [Parameter] public string? Subname { get; set; }
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public ImageResponse? Poster { get; set; }
+    
+    [Parameter] public required string PosterPlaceholder { get; set; }
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Common/RolesPanel.razor

@@ -0,0 +1,124 @@
+@using System.Net
+@using WatchIt.Website.Components.Subcomponents.Common
+@using Blazorise
+@using Blazorise.Snackbar
+@using Refit
+@using WatchIt.DTO.Models.Controllers.Roles
+@using WatchIt.DTO.Models.Generics.Rating
+
+@inherits Component
+
+@typeparam TRole where TRole : WatchIt.DTO.Models.Controllers.Roles.Role.Response.RoleResponse
+@typeparam TRoleParent
+
+
+
+<div class="panel @(Class)">
+    @if (_loaded)
+    {
+        <div class="vstack gap-3">
+            <span class="panel-text-title">@(Title)</span>
+            @if (RoleParents is null)
+            {
+                <span class="text-center">An error occured. @(ParentName) could not be obtained.</span>
+            }
+            else if (_roles is null)
+            {
+                <span class="text-center">An error occured. Roles could not be obtained.</span>
+            }
+            else if (!_roles.Any())
+            {
+                <span class="text-center">No items found.</span>
+            }
+            else if (_roleTypes is null)
+            {
+                <span class="text-center">An error occured. Role types could not be obtained.</span>
+            }
+            else
+            {
+                <div class="d-flex justify-content-center">
+                    <RadioGroup TValue="short" Color="Color.Default" Buttons Size="Size.Small" @bind-CheckedValue="@(_checkedType)">
+                        @foreach (IRoleTypeResponse roleType in _roleTypes)
+                        {
+                            <Radio Value="@(roleType.Id)">@roleType.Name</Radio>
+                        }
+                    </RadioGroup>
+                </div>
+                <div class="vstack">
+                    @{
+                        IEnumerable<TRole> roles = _roles.Where(x => x.TypeId == _checkedType);
+                    }
+                    @for (int i = 0; i < roles.Count(); i++)
+                    {
+                        TRole role = roles.ElementAt(i);
+                        TRoleParent parent = ParentFunc(role, RoleParents);
+                        if (i > 0)
+                        {
+                            <hr/>
+                        }
+
+                        <VerticalListItem @key="@(role)" 
+                                          Name="@(NameFunc(role, parent))"
+                                          AdditionalInfo="@(AdditionalInfoFunc is not null ? AdditionalInfoFunc(role, parent) : null)"
+                                          PicturePlaceholder="@(PicturePlaceholder)"
+                                          PictureFunc="@(() => PictureFunc(role, parent))"
+                                          GetGlobalRatingMethod="@(async () =>
+                                                                 {
+                                                                     IApiResponse<RatingOverallResponse> response = await RolesClient.GetRoleRating(role.Id);
+                                                                     if (!response.IsSuccessful)
+                                                                     {
+                                                                         await Base.SnackbarStack.PushAsync($"An error occured. Rating for role with id {role.Id} could not be obtained.", SnackbarColor.Danger);
+                                                                     }
+
+                                                                     return response.Content;
+                                                                 })"
+                                          GetYourRatingMethod="@(async userId =>
+                                                               {
+                                                                   IApiResponse<RatingUserResponse> response = await RolesClient.GetRoleUserRating(role.Id, userId);
+                                                                   if (!response.IsSuccessful)
+                                                                   {
+                                                                       if (response.StatusCode != HttpStatusCode.NotFound)
+                                                                       {
+                                                                           await Base.SnackbarStack.PushAsync($"An error occured. User rating for role with id {role.Id} could not be obtained.", SnackbarColor.Danger);
+                                                                       }
+
+                                                                       return null;
+                                                                   }
+                                                                   else
+                                                                   {
+                                                                       return Convert.ToInt32(response.Content.Rating);
+                                                                   }
+                                                               })"
+                                          PutYourRatingMethod="@(async request =>
+                                                               {
+                                                                   string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                   IApiResponse response = await RolesClient.PutRoleRating(token, role.Id, request);
+                                                                   if (!response.IsSuccessful)
+                                                                   {
+                                                                       await Base.SnackbarStack.PushAsync($"An error occured. Role could not be rated.", SnackbarColor.Danger);
+                                                                   }
+                                                               })"
+                                          DeleteYourRatingMethod="@(async () =>
+                                                                  {
+                                                                      string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+                                                                      IApiResponse response = await RolesClient.DeleteRoleRating(token, role.Id);
+                                                                      if (!response.IsSuccessful)
+                                                                      {
+                                                                          await Base.SnackbarStack.PushAsync($"An error occured. Role could not be rated.", SnackbarColor.Danger);
+                                                                      }
+                                                                  })"
+                                          ItemUrl="@(UrlFunc(role, parent))"
+                                          PictureHeight="110"
+                                          NameSize="20"
+                                          OnRatingChanged="@(OnRatingChanged)"/>
+                    }
+                </div>
+            }
+        </div>
+        
+    }
+    else
+    {
+        <Loading Color="@(Loading.Colors.Light)"/>
+    }
+</div>

WatchIt.Website/Components/Panels/Common/RolesPanel.razor.cs

@@ -0,0 +1,107 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Database.Model.Media;
+using WatchIt.Database.Model.People;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Roles;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Generics.Image;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Common;
+
+public partial class RolesPanel<TRole, TRoleParent> : Component where TRole : RoleResponse
+{
+    #region SERVICES
+
+    [Inject] protected IRolesClient RolesClient { get; set; } = null!;
+    [Inject] protected IAuthenticationService AuthenticationService { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required string Title { get; set; }
+    [Parameter] public IEnumerable<TRoleParent>? RoleParents { get; set; }
+    [Parameter] public required string ParentName { get; set; }
+    
+    [Parameter] public required Func<TRole, TRoleParent, string> NameFunc { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, string>? AdditionalInfoFunc { get; set; }
+    [Parameter] public required string PicturePlaceholder { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, Task<ImageResponse?>> PictureFunc { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, string> UrlFunc { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, RatingOverallResponse> GlobalRatingFunc { get; set; }
+    
+    [Parameter] public required Func<Task<IEnumerable<IRoleTypeResponse>?>> GetRoleTypesMethod { get; set; }
+    [Parameter] public required Func<Task<IEnumerable<TRole>?>> GetRolesMethod { get; set; }
+    [Parameter] public required Func<TRole, IEnumerable<TRoleParent>, TRoleParent> ParentFunc { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private IEnumerable<IRoleTypeResponse>? _roleTypes;
+    private IEnumerable<TRole>? _roles;
+
+    private short _checkedType;
+    private IEnumerable<TRole> _rolesVisible = [];
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        await LoadRoles();
+        if (_roles is not null && _roles.Any())
+        {
+            await LoadRoleTypes();
+        }
+
+        if (_roleTypes is not null && _roleTypes.Any())
+        {
+            _checkedType = _roleTypes.First().Id;
+            //_rolesVisible = _roles.Where(x => x.TypeId == _checkedType);
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadRoles()
+    {
+        _roles = await GetRolesMethod();
+    }
+
+    private async Task LoadRoleTypes()
+    {
+        IEnumerable<IRoleTypeResponse>? roleTypesOriginal = await GetRoleTypesMethod();
+        IEnumerable<short>? roleTypesId = _roles!.Select(x => x.TypeId).Distinct();
+        _roleTypes = roleTypesOriginal?.Where(x => roleTypesId.Contains(x.Id));
+    }
+    
+    private void CheckedTypeChanged(short value)
+    {
+        _checkedType = value;
+        _rolesVisible = _roles.Where(x => x.TypeId == value);
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/ActorRolesEditPanel.razor

@@ -1,7 +1,11 @@
 @using Blazorise.Extensions
-@using WatchIt.Common.Model.Roles
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.Website.Components.Subcomponents.Common
 @using Blazorise.Components
-@using WatchIt.Common.Model.Persons
+@using WatchIt.DTO.Models.Controllers.People.Person
+
+@inherits Component
 
 
 
@@ -17,31 +21,17 @@
                     @if (!_editingMode)
                     {
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue)" @onclick="@(() => ActivateEdit())">Add</button>
+                            <button type="button" class="btn btn-secondary" disabled="@(Disabled)" @onclick="@(() => ActivateEditData())">Add</button>
                         </div>
                     }
                     else
                     {
-                        if (!string.IsNullOrWhiteSpace(_error))
-                        {
-                            <div class="col-auto align-self-center">
-                                <span class="text-danger">@(_error)</span>
-                            </div>
-                        }
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEdit)">Cancel</button>
+                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEditData)">Cancel</button>
                         </div>
                         <div class="col-auto">
-                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveEdit)">
-                                @if (!_saving)
-                                {
-                                    <span>Save</span>
-                                }
-                                else
-                                {
-                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                    <span>Saving...</span>
-                                }
+                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                                <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                             </button>
                         </div>
                     }
@@ -75,20 +65,22 @@
                         <tbody class="table-group-divider">
                             @foreach (Guid roleId in _roles.Keys)
                             {
+                                RoleActorResponse role = _roles[roleId].Data;
+                                PersonResponse person = _peopleDict[role.PersonId];
                                 <tr>
                                     <td class="align-middle">
-                                        @(Persons[_roles[roleId].Data.PersonId].Name)
+                                        @(person.Name)
                                     </td>
                                     <td class="align-middle">
-                                        @(_roleTypes[_roles[roleId].Data.TypeId])
+                                        @(_roleTypes[role.TypeId])
                                     </td>
                                     <td class="align-middle">
-                                        @(_roles[roleId].Data.Name)
+                                        @(role.Name)
                                     </td>
                                     <td class="align-middle table-cell-fit">
                                         <div class="hstack gap-1">
-                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => ActivateEdit(roleId))"><i class="fas fa-edit"></i></button>
-                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => Delete(roleId))">
+                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => ActivateEditData(roleId))"><i class="fas fa-edit"></i></button>
+                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => DeleteData(roleId))">
                                                 @if (_roles[roleId].Deleting)
                                                 {
                                                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -108,19 +100,19 @@
             }
             else
             {
-                <EditForm Model="@(_editedModel)">
+                <EditForm Model="@(_roleRequest)">
                     <AntiforgeryToken/>
                     <div class="container-grid">
                         <div class="row form-group mb-1">
-                            <label for="actorFormPerson" class="col-1 col-form-label">Person:</label>
+                            <label for="actorFormPeople" class="col-1 col-form-label">People:</label>
                             <div class="col">
-                                <Autocomplete ElementId="actorFormPerson" 
+                                <Autocomplete ElementId="actorFormPeople" 
                                               TItem="PersonResponse"
                                               TValue="long"
-                                              Data="@(Persons.Values)"
+                                              Data="@(_peopleDict.Values)"
                                               TextField="@(item => item.Name)"
                                               ValueField="@(item => item.Id)"
-                                              @bind-SelectedValue="@(_editedModel.PersonId)"
+                                              @bind-SelectedValue="@(_roleRequest.PersonId)"
                                               Placeholder="Search..."
                                               Filter="AutocompleteFilter.Contains">
                                     <NotFoundContent Context="not_found_context"> Sorry... @not_found_context was not found</NotFoundContent>
@@ -130,7 +122,7 @@
                         <div class="row form-group my-1">
                             <label for="actorFormType" class="col-1 col-form-label">Type:</label>
                             <div class="col">
-                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_editedModel.TypeId)">
+                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_roleRequest.TypeId)">
                                     @foreach (KeyValuePair<short, string> type in _roleTypes)
                                     {
                                         <option value="@(type.Key)">@(type.Value)</option>
@@ -141,7 +133,7 @@
                         <div class="row form-group my-1">
                             <label for="actorFormName" class="col-1 col-form-label">Name:</label>
                             <div class="col">
-                                <InputText id="actorFormName" class="form-control" @bind-Value="@(_editedModel.Name)"/>
+                                <InputText id="actorFormName" class="form-control" @bind-Value="@(_roleRequest.Name)"/>
                             </div>
                         </div>
                     </div>
@@ -151,6 +143,6 @@
     }
     else
     {
-        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        <Loading Color="@(Loading.Colors.Light)"/>
     }
 </div>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/ActorRolesEditPanel.razor.cs

@@ -0,0 +1,217 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Request;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Controllers.Roles.RoleActorType;
+using WatchIt.DTO.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class ActorRolesEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+
+
+
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse Data { get; set; }
+    [Parameter] public List<PersonResponse>? People { get; set; }
+    
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private bool _editingMode;
+    private Guid? _editedId;
+    private RoleActorRequest _roleRequest = null!;
+    private bool _saving;
+    
+    private Dictionary<long, PersonResponse> _peopleDict = new Dictionary<long, PersonResponse>();
+    private Dictionary<short, string> _roleTypes = new Dictionary<short, string>();
+    private Dictionary<Guid, (RoleActorResponse Data, bool Deleting)> _roles = new Dictionary<Guid, (RoleActorResponse Data, bool Deleting)>();
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        ResetRequest();
+
+        await Task.WhenAll(
+        [
+            LoadRoleTypes(),
+            LoadMedia()
+        ]);
+        if (Data is not null)
+        {
+            await LoadRoles();
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadRoleTypes()
+    {
+        IApiResponse<IEnumerable<RoleActorTypeResponse>> response = await RolesClient.GetRoleActorTypes();
+        if (response.IsSuccessful)
+        {
+            _roleTypes = response.Content.ToDictionary(x => x.Id, x => x.Name);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Actor role types list could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadMedia()
+    {
+        IEnumerable<PersonResponse>? people = People;
+        if (people is null)
+        {
+            IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople(includePictures: true);
+            if (response.IsSuccessful)
+            {
+                people = response.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. People list could not be obtained.", SnackbarColor.Danger);
+                return;
+            }
+        }
+        _peopleDict = people.ToDictionary(x => x.Id, x => x);
+    }
+
+    private async Task LoadRoles()
+    {
+        RoleActorFilterQuery filter = new RoleActorFilterQuery
+        {
+            MediumId = Data.Id
+        };
+        IApiResponse<IEnumerable<RoleActorResponse>> response = await RolesClient.GetRoleActors(filter);
+        if (response.IsSuccessful)
+        {
+            _roles = response.Content.ToDictionary(x => x.Id, x => (x, false));
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Actor roles could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+    
+    
+    private void CancelEditData()
+    {
+        _editingMode = false;
+    }
+
+    private async Task SaveData()
+    {
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        _saving = true;
+
+        IApiResponse<RoleActorResponse> response = await (_editedId.HasValue switch
+        {
+            true => RolesClient.PutRoleActor(token, _editedId.Value, _roleRequest),
+            false => RolesClient.PostRoleActor(token, _roleRequest),
+        });
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                _roles[response.Content.Id] = (response.Content, false);
+                await Base.SnackbarStack.PushAsync("Role saved successfully.", SnackbarColor.Success); 
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit roles data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        
+        _saving = false;
+        _editingMode = false;
+    }
+    
+    private void ActivateEditData(Guid? id = null)
+    {
+        _editedId = id;
+        ResetRequest();
+        if (id is not null && _roles.TryGetValue(id.Value, out (RoleActorResponse Data, bool Deleting) role))
+        {
+            _roleRequest.Name = role.Data.Name;
+            _roleRequest.PersonId = role.Data.PersonId;
+            _roleRequest.TypeId = role.Data.TypeId;
+        }
+        _editingMode = true;
+    }
+    
+    private async Task DeleteData(Guid id)
+    {
+        _roles[id] = (_roles[id].Data, true);
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        IApiResponse response = await RolesClient.DeleteRole(token, id);
+        switch (response)
+        {
+            case {IsSuccessful: true}:
+                _roles.Remove(id);
+                await Base.SnackbarStack.PushAsync("Role removed successfully.", SnackbarColor.Success);
+                break;
+            case {StatusCode: HttpStatusCode.Forbidden} or {StatusCode: HttpStatusCode.Unauthorized}:
+                await Base.SnackbarStack.PushAsync("You are not authorized to remove roles.", SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+    }
+
+    private void ResetRequest() => _roleRequest = Data is null ? new RoleActorRequest() : new RoleActorRequest
+    {
+        MediumId = Data.Id,
+    };
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/CreatorRolesEditPanel.razor

@@ -1,6 +1,13 @@
-@using Blazorise.Extensions
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.Website.Components.Subcomponents.Common
 @using Blazorise.Components
-@using WatchIt.Common.Model.Persons
+@using WatchIt.DTO.Models.Controllers.People.Person
+
+@using Blazorise.Extensions
+
+@inherits Component
+
 
 
 <div class="panel @(Class)">
@@ -15,31 +22,17 @@
                     @if (!_editingMode)
                     {
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue)" @onclick="@(() => ActivateEdit())">Add</button>
+                            <button type="button" class="btn btn-secondary" disabled="@(Disabled)" @onclick="@(() => ActivateEditData())">Add</button>
                         </div>
                     }
                     else
                     {
-                        if (!string.IsNullOrWhiteSpace(_error))
-                        {
-                            <div class="col-auto align-self-center">
-                                <span class="text-danger">@(_error)</span>
-                            </div>
-                        }
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEdit)">Cancel</button>
+                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEditData)">Cancel</button>
                         </div>
                         <div class="col-auto">
-                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveEdit)">
-                                @if (!_saving)
-                                {
-                                    <span>Save</span>
-                                }
-                                else
-                                {
-                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                    <span>Saving...</span>
-                                }
+                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                                <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                             </button>
                         </div>
                     }
@@ -70,17 +63,19 @@
                         <tbody class="table-group-divider">
                             @foreach (Guid roleId in _roles.Keys)
                             {
+                                RoleCreatorResponse role = _roles[roleId].Data;
+                                PersonResponse person = _peopleDict[role.PersonId];
                                 <tr>
                                     <td class="align-middle">
-                                        @(Persons[_roles[roleId].Data.PersonId].Name)
+                                        @(person.Name)
                                     </td>
                                     <td class="align-middle">
-                                        @(_roleTypes[_roles[roleId].Data.TypeId])
+                                        @(_roleTypes[role.TypeId])
                                     </td>
                                     <td class="align-middle table-cell-fit">
                                         <div class="hstack gap-1">
-                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => ActivateEdit(roleId))"><i class="fas fa-edit"></i></button>
-                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => Delete(roleId))">
+                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => ActivateEditData(roleId))"><i class="fas fa-edit"></i></button>
+                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => DeleteData(roleId))">
                                                 @if (_roles[roleId].Deleting)
                                                 {
                                                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -100,19 +95,19 @@
             }
             else
             {
-                <EditForm Model="@(_editedModel)">
+                <EditForm Model="@(_roleRequest)">
                     <AntiforgeryToken/>
                     <div class="container-grid">
                         <div class="row form-group mb-1">
-                            <label for="creatorFormPerson" class="col-1 col-form-label">Media:</label>
+                            <label for="actorFormPeople" class="col-1 col-form-label">People:</label>
                             <div class="col">
-                                <Autocomplete ElementId="creatorFormPerson" 
+                                <Autocomplete ElementId="actorFormPeople" 
                                               TItem="PersonResponse"
                                               TValue="long"
-                                              Data="@(Persons.Values)"
+                                              Data="@(_peopleDict.Values)"
                                               TextField="@(item => item.Name)"
                                               ValueField="@(item => item.Id)"
-                                              @bind-SelectedValue="@(_editedModel.PersonId)"
+                                              @bind-SelectedValue="@(_roleRequest.PersonId)"
                                               Placeholder="Search..."
                                               Filter="AutocompleteFilter.Contains">
                                     <NotFoundContent Context="not_found_context"> Sorry... @not_found_context was not found</NotFoundContent>
@@ -120,9 +115,9 @@
                             </div>
                         </div>
                         <div class="row form-group my-1">
-                            <label for="creatorFormType" class="col-1 col-form-label">Type:</label>
+                            <label for="actorFormType" class="col-1 col-form-label">Type:</label>
                             <div class="col">
-                                <InputSelect id="creatorFormType" class="form-control" TValue="short" @bind-Value="@(_editedModel.TypeId)">
+                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_roleRequest.TypeId)">
                                     @foreach (KeyValuePair<short, string> type in _roleTypes)
                                     {
                                         <option value="@(type.Key)">@(type.Value)</option>
@@ -137,6 +132,6 @@
     }
     else
     {
-        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        <Loading Color="@(Loading.Colors.Light)"/>
     }
 </div>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/CreatorRolesEditPanel.razor.cs

@@ -0,0 +1,214 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Request;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Controllers.Roles.RoleCreatorType;
+using WatchIt.DTO.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class CreatorRolesEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+
+
+
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse Data { get; set; }
+    [Parameter] public List<PersonResponse>? People { get; set; }
+    
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private bool _editingMode;
+    private Guid? _editedId;
+    private RoleCreatorRequest _roleRequest = null!;
+    private bool _saving;
+    
+    private Dictionary<long, PersonResponse> _peopleDict = new Dictionary<long, PersonResponse>();
+    private Dictionary<short, string> _roleTypes = new Dictionary<short, string>();
+    private Dictionary<Guid, (RoleCreatorResponse Data, bool Deleting)> _roles = new Dictionary<Guid, (RoleCreatorResponse Data, bool Deleting)>();
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        ResetRequest();
+        
+        await Task.WhenAll(
+        [
+            LoadRoleTypes(),
+            LoadMedia(),
+        ]);
+        if (Data is not null)
+        {
+            await LoadRoles();
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadRoleTypes()
+    {
+        IApiResponse<IEnumerable<RoleCreatorTypeResponse>> response = await RolesClient.GetRoleCreatorTypes();
+        if (response.IsSuccessful)
+        {
+            _roleTypes = response.Content.ToDictionary(x => x.Id, x => x.Name);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Creator role types list could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadMedia()
+    {
+        IEnumerable<PersonResponse>? people = People;
+        if (people is null)
+        {
+            IApiResponse<IEnumerable<PersonResponse>> response = await PeopleClient.GetPeople(includePictures: true);
+            if (response.IsSuccessful)
+            {
+                people = response.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. People list could not be obtained.", SnackbarColor.Danger);
+                return;
+            }
+        }
+        _peopleDict = people.ToDictionary(x => x.Id, x => x);
+    }
+
+    private async Task LoadRoles()
+    {
+        RoleCreatorFilterQuery filter = new RoleCreatorFilterQuery
+        {
+            MediumId = Data.Id
+        };
+        IApiResponse<IEnumerable<RoleCreatorResponse>> response = await RolesClient.GetRoleCreators(filter);
+        if (response.IsSuccessful)
+        {
+            _roles = response.Content.ToDictionary(x => x.Id, x => (x, false));
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Creator roles could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+    
+    private void CancelEditData()
+    {
+        _editingMode = false;
+    }
+
+    private async Task SaveData()
+    {
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        _saving = true;
+
+        IApiResponse<RoleCreatorResponse> response = await (_editedId.HasValue switch
+        {
+            true => RolesClient.PutRoleCreator(token, _editedId.Value, _roleRequest),
+            false => RolesClient.PostRoleCreator(token, _roleRequest),
+        });
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                _roles[response.Content.Id] = (response.Content, false);
+                await Base.SnackbarStack.PushAsync("Role saved successfully.", SnackbarColor.Success); 
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit roles data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        
+        _saving = false;
+        _editingMode = false;
+    }
+    
+    private void ActivateEditData(Guid? id = null)
+    {
+        _editedId = id;
+        ResetRequest();
+        if (id is not null && _roles.TryGetValue(id.Value, out (RoleCreatorResponse Data, bool Deleting) role))
+        {
+            _roleRequest.PersonId = role.Data.PersonId;
+            _roleRequest.TypeId = role.Data.TypeId;
+        }
+        _editingMode = true;
+    }
+    
+    private async Task DeleteData(Guid id)
+    {
+        _roles[id] = (_roles[id].Data, true);
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        IApiResponse response = await RolesClient.DeleteRole(token, id);
+        switch (response)
+        {
+            case {IsSuccessful: true}:
+                _roles.Remove(id);
+                await Base.SnackbarStack.PushAsync("Role removed successfully.", SnackbarColor.Success);
+                break;
+            case {StatusCode: HttpStatusCode.Forbidden} or {StatusCode: HttpStatusCode.Unauthorized}:
+                await Base.SnackbarStack.PushAsync("You are not authorized to remove roles.", SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+    }
+    
+    private void ResetRequest() => _roleRequest = Data is null ? new RoleCreatorRequest() : new RoleCreatorRequest
+    {
+        MediumId = Data.Id,
+    };
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/EditFormPanel.razor

@@ -0,0 +1,87 @@
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Request
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+
+
+
+<div class="panel @(Class)">
+    @if (_loaded)
+    {
+        <EditForm Model="@(_request)">
+            <AntiforgeryToken/>
+            <div class="container-grid">
+                <div class="row form-group mb-1">
+                    <label for="title" class="col-2 col-form-label">Title*</label>
+                    <div class="col-10">
+                        <InputText id="title" class="form-control" @bind-Value="_request!.Title"/>
+                    </div>
+                </div>
+                <div class="row form-group my-1">
+                    <label for="og-title" class="col-2 col-form-label">Original title</label>
+                    <div class="col-10">
+                        <InputText id="og-title" class="form-control" @bind-Value="_request!.OriginalTitle"/>
+                    </div>
+                </div>
+                <div class="row form-group my-1">
+                    <label for="desc" class="col-2 col-form-label">Description</label>
+                    <div class="col-10">
+                        <InputTextArea id="desc" class="form-control" @bind-Value="_request!.Description"/>
+                    </div>
+                </div>
+                <div class="row form-group my-1">
+                    <label for="rel-date" class="col-2 col-form-label">Release date</label>
+                    <div class="col-4">
+                        <InputDate TValue="DateOnly?" id="rel-date" class="form-control" @bind-Value="_request!.ReleaseDate"/>
+                    </div>
+                    <label for="length" class="col-2 col-form-label">Length</label>
+                    <div class="col-4">
+                        <InputNumber TValue="short?" id="length" class="form-control" @bind-Value="_request!.Duration"/>
+                    </div>
+                </div>
+                @switch (_request)
+                {
+                    case MediumMovieRequest movieRequest:
+                        <div class="row form-group mt-1">
+                            <label for="budget" class="col-2 col-form-label">Budget</label>
+                            <div class="col-10">
+                                <InputNumber TValue="decimal?" id="budget" class="form-control" @bind-Value="movieRequest!.Budget"/>
+                            </div>
+                        </div>
+                        break;
+                    case MediumSeriesRequest seriesRequest:
+                        <div class="row form-group mt-1">
+                            <label class="col-2 col-form-label">Has ended</label>
+                            <div class="col-10 col-form-label">
+                                <div class="d-flex gap-3">
+                                    <InputRadioGroup TValue="bool" @bind-Value="seriesRequest!.HasEnded">
+                                        <div class="d-flex gap-2">
+                                            <InputRadio TValue="bool" Value="true"/>
+                                            Yes
+                                        </div>
+                                        <div class="d-flex gap-2">
+                                            <InputRadio TValue="bool" Value="false"/>
+                                            No
+                                        </div>
+                                    </InputRadioGroup>
+                                </div>
+                            </div>
+                        </div>
+                        break;
+                }
+                <div class="row mt-2">
+                    <div class="col d-flex flex-column align-items-end">
+                        <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                            <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </EditForm>
+    }
+    else
+    {
+        <Loading Color="@(Loading.Colors.Light)"/>
+    }
+</div>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/EditFormPanel.razor.cs

@@ -0,0 +1,121 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Request;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class EditFormPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+
+    [Parameter] public BaseMediumResponse? Data { get; set; }
+    [Parameter] public required NullType TypeIfNull { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    private bool _saving;
+
+    private MediumRequest? _request;
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+        
+        LoadData();
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private void LoadData()
+    {
+        _request = Data switch
+        {
+            null => TypeIfNull switch
+            {
+                NullType.Movie => new MediumMovieRequest(),
+                NullType.Series => new MediumSeriesRequest(),
+            },
+            _ => Data.ToRequest()
+        };
+    }
+
+    private async Task SaveData()
+    {
+        _saving = true;
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+
+        IApiResponse<BaseMediumResponse> response = Data switch
+        {
+            null => TypeIfNull switch
+            {
+                NullType.Movie => await MediaClient.PostMediumMovie(token, _request as MediumMovieRequest ?? throw new InvalidOperationException()),
+                NullType.Series => await MediaClient.PostMediumSeries(token, _request as MediumSeriesRequest ?? throw new InvalidOperationException()),
+            },
+            MediumMovieResponse => await MediaClient.PutMediumMovie(token, Data.Id, _request as MediumMovieRequest ?? throw new InvalidOperationException()),
+            MediumSeriesResponse => await MediaClient.PutMediumSeries(token, Data.Id, _request as MediumSeriesRequest ?? throw new InvalidOperationException()),
+            _ => throw new InvalidOperationException()
+        };
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                switch (Data)
+                {
+                    case null: NavigationManager.NavigateTo($"media/{response.Content.Id}/edit", true); break;
+                    default: await Base.SnackbarStack.PushAsync("Data saved successfully.", SnackbarColor.Success); break;
+                }
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit media data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        _saving = false;
+    }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/GenresEditPanel.razor

@@ -1,20 +1,24 @@
 @using Blazorise.Extensions
-@using WatchIt.Common.Model.Genres
+@using WatchIt.DTO.Models.Controllers.Genres.Genre
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+
 
 
 <div class="panel">
     <div class="vstack gap-3">
         <h4 class="fw-bold">Genres</h4>
         <div class="d-flex gap-3">
-            <InputSelect class="w-100 form-control" TValue="short?" @bind-Value="@(_selectedGenre)">
+            <InputSelect class="w-100 form-control" TValue="short?" @bind-Value="@(_selectedGenre)" disabled="@(Data is null || _addLoading || _chosenGenres.Values.Any(x => x))">
                 <option value="@(default(short?))" selected hidden="hidden">Choose genre...</option>
                 @foreach (GenreResponse genre in _availableGenres)
                 {
                     <option value="@(genre.Id)">@(genre.Name)</option>
                 }
             </InputSelect>
-            <button class="btn btn-secondary" @onclick="AddGenre" disabled="@(_selectedGenre is null || _addLoading || _chosenGenres.Values.Any(x => x))">
-                <LoadingButtonContentComponent Content="Add" LoadingContent="Adding..." IsLoading="@(_addLoading)"/>
+            <button class="btn btn-secondary" @onclick="AddGenre" disabled="@(Data is null || _selectedGenre is null || _addLoading || _chosenGenres.Values.Any(x => x))">
+                <LoadingButtonContent Content="Add" LoadingContent="Adding..." IsLoading="@(_addLoading)"/>
             </button>
         </div>
         @if (_chosenGenres.IsNullOrEmpty())
@@ -33,9 +37,9 @@
                             </td>
                             <td class="align-middle table-cell-fit">
                                 <button class="btn btn-outline-danger btn-sm w-100" type="button" disabled="@(_addLoading || genre.Value)" @onclick="@(() => RemoveGenre(genre.Key))">
-                                    <LoadingButtonContentComponent IsLoading="@(genre.Value)">
+                                    <LoadingButtonContent IsLoading="@(genre.Value)">
                                         <i class="fa-solid fa-trash"></i>
-                                    </LoadingButtonContentComponent>
+                                    </LoadingButtonContent>
                                 </button>
                             </td>
                         </tr>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/GenresEditPanel.razor.cs

@@ -0,0 +1,117 @@
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genres.Genre;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class GenresEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IGenresClient GenresClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse? Data { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    private Dictionary<GenreResponse, bool> _chosenGenres = new Dictionary<GenreResponse, bool>();
+    private List<GenreResponse> _availableGenres = new List<GenreResponse>();
+    
+    private short? _selectedGenre;
+    private bool _addLoading;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await LoadData();
+        
+        StateHasChanged();
+    }
+
+    private async Task LoadData()
+    {
+        if (Data is not null)
+        {
+            foreach (GenreResponse genre in Data.Genres)
+            {
+                _chosenGenres[genre] = false;
+            }
+        }
+
+        IApiResponse<IEnumerable<GenreResponse>> response = await GenresClient.GetGenres();
+        if (response.IsSuccessful)
+        {
+            IEnumerable<short> tempSelected = _chosenGenres.Keys.Select(x => x.Id);
+            _availableGenres.AddRange(response.Content.Where(x => !tempSelected.Contains(x.Id)));
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Genres could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task AddGenre()
+    {
+        _addLoading = true;
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        
+        IApiResponse response = await MediaClient.PostMediumGenre(token, Data.Id, _selectedGenre!.Value);
+        
+        if (response.IsSuccessful)
+        {
+            GenreResponse selectedGenre = _availableGenres.First(x => x.Id == _selectedGenre);
+            _availableGenres.Remove(selectedGenre);
+            _chosenGenres[selectedGenre] = false;
+            _selectedGenre = null;
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Genre could not be added.", SnackbarColor.Danger);
+        }
+        _addLoading = false;
+    }
+
+    private async Task RemoveGenre(GenreResponse genre)
+    {
+        _chosenGenres[genre] = true;
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        
+        IApiResponse response = await MediaClient.DeleteMediumGenre(token, Data.Id, genre.Id);
+        
+        if (response.IsSuccessful)
+        {
+            _chosenGenres.Remove(genre);
+            _availableGenres.Add(genre);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Genre could not be removed.", SnackbarColor.Danger);
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/HeaderPanel.razor

@@ -0,0 +1,26 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+@inherits Component
+
+
+
+<div class="panel" role="button" @onclick="@(Data is not null ? () => NavigationManager.NavigateTo($"/media/{Data.Id}") : null)" style="cursor: @(Data is null ? "default" : "pointer")">
+    <div class="d-flex gap-3 align-items-center">
+        <Image Content="@(Data?.Picture)" Height="60" Placeholder="/assets/placeholders/medium.png" AlternativeText="poster"/>
+        <div class="d-flex-inline flex-column">
+            <h2 id="primaryText" class="m-0">
+                @if (Data is null)
+                {
+                    <span class="fw-bold">New @(TypeIfNull == NullType.Movie ? "movie" : "TV series")</span>
+                }
+                else
+                {
+                    <span class="fw-bold">@(Data.Title)</span>
+                }
+            </h2>
+            @if (Data is not null)
+            {
+                <span id="secondaryText" class="text-secondary">Medium settings</span>
+            }
+        </div>
+    </div>
+</div>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/HeaderPanel.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.Website.Clients;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class HeaderPanel : Component
+{
+    #region SERVICES
+
+    [Inject] public IMediaClient MediaClient { get; set; } = null!;
+    [Inject] public NavigationManager NavigationManager { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse? Data { get; set; }
+    [Parameter] public required NullType TypeIfNull { get; set; }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/NullType.cs

@@ -0,0 +1,7 @@
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public enum NullType
+{
+    Movie,
+    Series
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/PhotosEditPanel.razor

@@ -0,0 +1,160 @@
+@using System.Drawing
+@using Blazorise.Extensions
+@using WatchIt.DTO.Models.Controllers.Photos.Photo
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+
+
+
+<div class="panel">
+    <div class="container-grid">
+        <div class="row mb-3">
+            <div class="col">
+                <div class="d-flex align-items-center h-100">
+                    <h4 class="m-0"><strong>Photos</strong></h4>
+                </div>
+            </div>
+            <div class="col-auto">
+                @if (!_photoEditMode)
+                {
+                    <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue || !_loaded)" @onclick="() => InitEditPhoto(null)">Add new photo</button>
+                }
+                else
+                {
+                    <div class="d-flex gap-3 align-items-center">
+                        <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto">
+                            <LoadingButtonContent IsLoading="@(_photoEditSaving)" LoadingContent="Saving..." Content="Save"/>
+                        </button>
+                        <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button>
+                    </div>
+                }
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                @if (!_photoEditMode)
+                {
+                    if (_loaded)
+                    {
+                        if (!_photos.IsNullOrEmpty())
+                        {
+                            <div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0">
+                                @foreach (PhotoResponse photo in _photos)
+                                {
+                                    <div class="container-grid photo-container">
+                                        <div class="row">
+                                            <div class="col">
+                                                <Image Content="@(photo)" AlternativeText="photo" Width="350" Placeholder="/assets/placeholders/photo.png" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
+                                            </div>
+                                        </div>
+                                        <div class="row mt-2 gx-2">
+                                            @if (photo.Background is not null)
+                                            {
+                                                <div class="col-auto">
+                                                    <div class="d-flex align-items-center">
+                                                        <div id="backgroundIndicator" class="border rounded-circle circle-@(photo.Background.IsUniversal ? "blue" : "grey") p-1" data-toggle="tooltip" data-placement="top" title="@(photo.Background.IsUniversal ? "Universal" : "Media-only") background">
+                                                            <img class="no-vertical-align" src="assets/icons/background.png" alt="background_icon" height="20px" width="20px"/>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
+                                            <div class="col">
+                                                <div class="d-flex align-items-center h-100 text-size-upload-date">
+                                                    Upload: @(photo.UploadDate.ToString("g"))
+                                                </div>
+                                            </div>
+                                            <div class="col-auto">
+                                                <button type="button" class="btn btn-secondary btn-sm" @onclick="() => InitEditPhoto(photo.Id)" disabled="@(_photoDeleting.Contains(photo.Id))">
+                                                    <img src="assets/icons/edit.png" alt="edit_icon" height="20px" width="20px"/>
+                                                </button>
+                                            </div>
+                                            <div class="col-auto">
+                                                <button type="button" class="btn btn-danger btn-sm" disabled="@(_photoDeleting.Contains(photo.Id))" @onclick="() => DeletePhoto(photo.Id)">
+                                                    @if (!_photoDeleting.Contains(photo.Id))
+                                                    {
+                                                        <img src="assets/icons/delete.png" alt="delete_icon" height="20px" width="20px"/>
+                                                    }
+                                                    else
+                                                    {
+                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                                    }
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+                        }
+                        else
+                        {
+                            <div class="d-flex justify-content-center">
+                                Photo list is empty
+                            </div>
+                        }
+                    }
+                    else
+                    {
+                        <div class="d-flex justify-content-center">
+                            <Loading Color="Loading.Colors.Light"/>
+                        </div>
+                    }
+                }
+                else
+                {
+                    <div class="container-grid">
+                        <div class="row">
+                            <div class="col-auto">
+                                <div class="container-grid">
+                                    <div class="row">
+                                        <div class="col">
+                                            <Image Content="@(_photoEditRequest)" Placeholder="/assets/placeholders/photo.png" AlternativeText="edit_photo" Width="300" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
+                                        </div>
+                                    </div>
+                                    @if (_photoEditId is null)
+                                    {
+                                        <div class="row mt-2">
+                                            <div class="col">
+                                                <InputFile class="form-control" OnChange="LoadPhoto" autocomplete="off" style="width: 300px;"/>
+                                            </div>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                            <div class="col">
+                                <div class="container-grid">
+                                    <div class="row form-group">
+                                        <div class="col">
+                                            <div class="form-check">
+                                                <InputCheckbox class="form-check-input" @bind-Value="_photoEditIsBackground"/>
+                                                <label class="form-check-label">Use as background</label>
+                                            </div>
+                                        </div>
+                                        <div class="col">
+                                            <div class="form-check">
+                                                <InputCheckbox class="form-check-input" @bind-Value="_photoEditBackgroundData.IsUniversal" disabled="@(!_photoEditIsBackground)"/>
+                                                <label class="form-check-label">Use as universal background</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row form-group my-1">
+                                        <label for="first-gradient-color" class="col-4 col-form-label">First gradient color</label>
+                                        <div class="col-8">
+                                            <input type="color" class="form-control form-control-color w-100" id="first-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.FirstGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoFirstGradientColorChanged">
+                                        </div>
+                                    </div>
+                                    <div class="row form-group">
+                                        <label for="second-gradient-color" class="col-4 col-form-label">Second gradient color</label>
+                                        <div class="col-8">
+                                            <input type="color" class="form-control form-control-color w-100" id="second-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.SecondGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoSecondGradientColorChanged">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+</div>

WatchIt.Website/Components/Panels/Pages/MediumEditPage/PhotosEditPanel.razor.cs

@@ -0,0 +1,215 @@
+using System.Drawing;
+using System.Net;
+using Blazorise;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Photos;
+using WatchIt.DTO.Models.Controllers.Photos.Photo;
+using WatchIt.DTO.Models.Controllers.Photos.PhotoBackground;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+using Color = System.Drawing.Color;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumEditPage;
+
+public partial class PhotosEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] public NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] public IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] public IPhotosClient PhotosClient { get; set; } = null!;
+
+    #endregion
+
+
+
+    #region PARAMETERS
+    
+    [Parameter] public long? Id { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private IEnumerable<PhotoResponse> _photos = new List<PhotoResponse>();
+    private List<Guid> _photoDeleting = new List<Guid>();
+    private bool _photoEditMode;
+    private Guid? _photoEditId;
+    private bool _photoEditSaving;
+    private bool _photoEditIsBackground;
+    private PhotoRequest? _photoEditRequest;
+    private PhotoBackgroundRequest? _photoEditBackgroundData = new PhotoBackgroundRequest()
+    {
+        FirstGradientColor = Color.FromArgb(0xFF, 0xFF, 0xFF),
+        SecondGradientColor = Color.FromArgb(0x00, 0x00, 0x00),
+        IsUniversal = false
+    };
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        if (Id.HasValue)
+        {
+            IApiResponse<IEnumerable<PhotoResponse>> response = await PhotosClient.GetPhotos(new PhotoFilterQuery
+            {
+                MediumId = Id.Value,
+            });
+            if (response.IsSuccessful)
+            {
+                _photos = response.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Photos cannot be downloaded.", SnackbarColor.Danger);
+            }
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task DeletePhoto(Guid id)
+    {
+        _photoDeleting.Add(id);
+
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        
+        IApiResponse response = await PhotosClient.DeletePhoto(token, id);
+
+        if (response.IsSuccessful)
+        {
+            NavigationManager.Refresh(true);
+        }
+        else
+        {
+            _photoDeleting.Remove(id);
+            await Base.SnackbarStack.PushAsync("An error occured. Photo cannot be removed.", SnackbarColor.Danger);
+        }
+    }
+
+    private void InitEditPhoto(Guid? id)
+    {
+        _photoEditMode = true;
+        _photoEditId = id;
+        _photoEditRequest = null;
+        _photoEditIsBackground = false;
+        _photoEditBackgroundData = new PhotoBackgroundRequest
+        {
+            FirstGradientColor = Color.FromArgb(0xFF, 0xFF, 0xFF),
+            SecondGradientColor = Color.FromArgb(0x00, 0x00, 0x00),
+            IsUniversal = false
+        };
+        Console.WriteLine(ColorTranslator.ToHtml(_photoEditBackgroundData.FirstGradientColor));
+        if (id is not null)
+        {
+            PhotoResponse response = _photos.First(x => x.Id == id);
+            _photoEditRequest = response.ToRequest();
+            if (_photoEditRequest.BackgroundData is not null)
+            {
+                _photoEditIsBackground = true;
+                _photoEditBackgroundData = _photoEditRequest.BackgroundData;
+            }
+        }
+    }
+
+    private void CancelEditPhoto()
+    {
+        _photoEditMode = false;
+        _photoEditId = null;
+    }
+
+    private async Task SaveEditPhoto()
+    {
+        _photoEditSaving = true;
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+
+        IApiResponse response;
+        _photoEditRequest.BackgroundData = _photoEditIsBackground ? _photoEditBackgroundData : null;
+        if (_photoEditId is null)
+        {
+            response = await PhotosClient.PostPhoto(token, _photoEditRequest);
+        }
+        else
+        {
+            response = await PhotosClient.PutPhoto(token, _photoEditId.Value, _photoEditRequest);
+        }
+
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                await Base.SnackbarStack.PushAsync("Photo saved successfully.", SnackbarColor.Success);
+                NavigationManager.Refresh(true);
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit photos.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        
+        _photoEditMode = false;
+        _photoEditId = null;
+    }
+
+    private async Task LoadPhoto(InputFileChangeEventArgs args)
+    {
+        if (args.File.ContentType.StartsWith("image"))
+        {
+            Stream stream = args.File.OpenReadStream(5242880);
+            byte[] array;
+            using (MemoryStream ms = new MemoryStream())
+            {
+                await stream.CopyToAsync(ms);
+                array = ms.ToArray();
+            }
+            
+            _photoEditRequest = new PhotoRequest
+            {
+                MediumId = Id!.Value,
+                Image = array,
+                MimeType = args.File.ContentType
+            };
+        }
+    }
+
+    private void EditPhotoFirstGradientColorChanged(ChangeEventArgs e)
+    {
+        _photoEditBackgroundData.FirstGradientColor = ColorTranslator.FromHtml(e.Value.ToString());
+    }
+
+    private void EditPhotoSecondGradientColorChanged(ChangeEventArgs e)
+    {
+        _photoEditBackgroundData.SecondGradientColor = ColorTranslator.FromHtml(e.Value.ToString());
+    }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumEditPage/PhotosEditPanel.razor.css

@@ -2,7 +2,7 @@
 
 #scrollPhotos {
     overflow-x: scroll;
-    
+
     border-color: grey;
     border-width: 1px;
     border-style: solid;

WatchIt.Website/Components/Panels/Pages/MediumPage/MetadataPanel.razor

@@ -0,0 +1,78 @@
+@using Blazorise.Extensions
+@using WatchIt.DTO.Models.Controllers.Genres.Genre
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@inherits Component
+
+
+
+<div class="panel h-100">
+    <div class="container-grid">
+        <div class="row">
+            <div class="col">
+                <div class="d-flex flex-wrap metadata-pill-container">
+                    <div class="metadata-pill">
+                        <strong>@(Data is MediumMovieResponse ? "Movie" : "TV Series")</strong>
+                    </div>
+                    @if (Data.ReleaseDate is not null)
+                    {
+                        <div class="metadata-pill">
+                            <strong>Release date:</strong> @Data.ReleaseDate.ToString()
+                        </div>
+                    }
+                    @if (Data.Duration is not null)
+                    {
+                        <div class="metadata-pill">
+                            <strong>Length:</strong> @TimeSpan.FromMinutes(Data.Duration.Value).ToString(@"hh\:mm")
+                        </div>
+                    }
+                    @if (Data is MediumMovieResponse movieData)
+                    {
+                        if (movieData.Budget is not null)
+                        {
+                            <div class="metadata-pill">
+                                <strong>Budget:</strong> @(Math.Round(movieData.Budget.Value))$
+                            </div>
+                        }
+                    }
+                    @if (Data is MediumSeriesResponse seriesData)
+                    {
+                        if (seriesData.HasEnded)
+                        {
+                            <div class="metadata-pill">
+                                Ended
+                            </div>
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col">
+                <h4><strong>Genres:</strong></h4>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <div class="d-flex flex-wrap gap-3">
+                    @if (Data.Genres.IsNullOrEmpty())
+                    {
+                        <div>
+                            No genres assigned.
+                        </div>
+                    }
+                    else
+                    {
+                        foreach (GenreResponse genre in Data.Genres)
+                        {
+                            <a class="text-decoration-none text-light" href="/genre/@genre.Id">
+                                <div class="metadata-pill">
+                                    @genre.Name
+                                </div>
+                            </a>
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

WatchIt.Website/Components/Panels/Pages/MediumPage/MetadataPanel.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumPage;
+
+public partial class MetadataPanel : Component
+{
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse Data { get; set; }
+    
+    #endregion 
+}

WatchIt.Website/Components/Panels/Pages/MediumPage/RatingPanel.razor

@@ -0,0 +1,42 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+@using Blazorise
+@inherits Component
+
+
+
+<div class="panel panel-background-gold h-100 text-dark">
+    <div class="container-grid">
+        <div class="row">
+            <div class="col">
+                <TitledDisplayRating Rating="@(_globalRating)" Title="Global rating:"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <hr class="rating-separator"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <h4 class="text-dark">
+                    <strong>Your rating:</strong>
+                </h4>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <Authorization>
+                    <Authorized>
+                        <Rating SelectedValue="@(_userRating)" SelectedValueChanged="@(UserRatingChanged)" Color="Color.Dark" MaxValue="10" TextSize="@(TextSize.Large)"/>
+                    </Authorized>
+                    <NotAuthorized>
+                        <p class="text-dark">You must be logged in to add a rating</p>
+                    </NotAuthorized>
+                    <Loading>
+                        <LoadingInline Content="Loading..."/>
+                    </Loading>
+                </Authorization>
+            </div>
+        </div>
+    </div>
+</div>

WatchIt.Website/Components/Panels/Pages/MediumPage/RatingPanel.razor.cs

@@ -0,0 +1,106 @@
+using System.Net;
+using System.Runtime.InteropServices;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Generics.Rating;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.MediumPage;
+
+public partial class RatingPanel : Component
+{
+    #region SERVICES
+    
+    [Inject] protected IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] protected IMediaClient MediaClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required BaseMediumResponse Data { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private RatingOverallResponse _globalRating;
+    private int _userRating = 0;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        _globalRating = Data.Rating;
+
+        if (Base.AuthorizedAccount is not null)
+        {
+            IApiResponse<RatingUserResponse> response = await MediaClient.GetMediumUserRating(Data.Id, Base.AuthorizedAccount.Id);
+            if (response.IsSuccessful || response.StatusCode == HttpStatusCode.NotFound)
+            {
+                _userRating = Convert.ToInt32(response.Content?.Rating ?? 0);
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. User rating could not be obtained.", SnackbarColor.Danger);
+            }
+        }
+        
+        StateHasChanged();
+    }
+
+    private async Task UserRatingChanged(int value)
+    {
+        if (value == _userRating)
+        {
+            return;
+        }
+        
+        string accessToken = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+
+        IApiResponse response;
+        if (value == 0)
+        {
+            response = await MediaClient.DeleteMediumRating(accessToken, Data.Id);
+        }
+        else
+        {
+            response = await MediaClient.PutMediumRating(accessToken, Data.Id, new RatingRequest { Rating = Convert.ToByte(value) });
+        }
+        
+        if (response.IsSuccessful)
+        {
+            _userRating = value;
+
+            IApiResponse<RatingOverallResponse> globalRatingResponse = await MediaClient.GetMediumRating(Data.Id);
+            if (globalRatingResponse.IsSuccessful)
+            {
+                _globalRating = globalRatingResponse.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Global rating could not be updated.", SnackbarColor.Danger);
+            }
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. User rating could not be changed.", SnackbarColor.Danger);
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/MediumPage/RatingPanel.razor.css

@@ -0,0 +1,6 @@
+.rating-separator {
+    border-color: black;
+    border-width: 1px;
+
+    margin: 10px 0;
+}

WatchIt.Website/Components/Panels/Pages/PersonEditPage/ActorRolesEditPanel.razor

@@ -1,7 +1,11 @@
 @using Blazorise.Extensions
-@using WatchIt.Common.Model.Roles
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.Website.Components.Subcomponents.Common
 @using Blazorise.Components
 
+@inherits Component
+
 
 
 <div class="panel @(Class)">
@@ -16,31 +20,17 @@
                     @if (!_editingMode)
                     {
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue)" @onclick="@(() => ActivateEdit())">Add</button>
+                            <button type="button" class="btn btn-secondary" disabled="@(Disabled)" @onclick="@(() => ActivateEditData())">Add</button>
                         </div>
                     }
                     else
                     {
-                        if (!string.IsNullOrWhiteSpace(_error))
-                        {
-                            <div class="col-auto align-self-center">
-                                <span class="text-danger">@(_error)</span>
-                            </div>
-                        }
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEdit)">Cancel</button>
+                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEditData)">Cancel</button>
                         </div>
                         <div class="col-auto">
-                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveEdit)">
-                                @if (!_saving)
-                                {
-                                    <span>Save</span>
-                                }
-                                else
-                                {
-                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                    <span>Saving...</span>
-                                }
+                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                                <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                             </button>
                         </div>
                     }
@@ -77,23 +67,26 @@
                         <tbody class="table-group-divider">
                             @foreach (Guid roleId in _roles.Keys)
                             {
+                                RoleActorResponse role = _roles[roleId].Data;
+                                MediumResponse medium = _mediaDict[role.MediumId];
                                 <tr>
                                     <td class="align-middle">
-                                        @(Media[_roles[roleId].Data.MediaId].Title)@(Media[_roles[roleId].Data.MediaId].ReleaseDate.HasValue ? $" ({Media[_roles[roleId].Data.MediaId].ReleaseDate!.Value.Year})" : string.Empty)
+                                        
+                                        @(medium.Title)@(medium.ReleaseDate.HasValue ? $" ({medium.ReleaseDate!.Value.Year})" : string.Empty)
                                     </td>
                                     <td class="align-middle">
-                                        @(Media[_roles[roleId].Data.MediaId].Type == MediaType.Movie ? $"Movie" : "TV Series")
+                                        @(medium.Type == MediumResponseType.Movie ? "Movie" : "TV Series")
                                     </td>
                                     <td class="align-middle">
-                                        @(_roleTypes[_roles[roleId].Data.TypeId])
+                                        @(_roleTypes[role.TypeId])
                                     </td>
                                     <td class="align-middle">
-                                        @(_roles[roleId].Data.Name)
+                                        @(role.Name)
                                     </td>
                                     <td class="align-middle table-cell-fit">
                                         <div class="hstack gap-1">
-                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => ActivateEdit(roleId))"><i class="fas fa-edit"></i></button>
-                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => Delete(roleId))">
+                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => ActivateEditData(roleId))"><i class="fas fa-edit"></i></button>
+                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => DeleteData(roleId))">
                                                 @if (_roles[roleId].Deleting)
                                                 {
                                                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -113,19 +106,19 @@
             }
             else
             {
-                <EditForm Model="@(_editedModel)">
+                <EditForm Model="@(_roleRequest)">
                     <AntiforgeryToken/>
                     <div class="container-grid">
                         <div class="row form-group mb-1">
                             <label for="actorFormMedia" class="col-1 col-form-label">Media:</label>
                             <div class="col">
                                 <Autocomplete ElementId="actorFormMedia" 
-                                              TItem="MediaResponse"
+                                              TItem="MediumResponse"
                                               TValue="long"
-                                              Data="@(Media.Values)"
+                                              Data="@(_mediaDict.Values)"
                                               TextField="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
                                               ValueField="@(item => item.Id)"
-                                              @bind-SelectedValue="@(_editedModel.MediaId)"
+                                              @bind-SelectedValue="@(_roleRequest.MediumId)"
                                               Placeholder="Search..."
                                               Filter="AutocompleteFilter.Contains">
                                     <NotFoundContent Context="not_found_context"> Sorry... @not_found_context was not found</NotFoundContent>
@@ -135,7 +128,7 @@
                         <div class="row form-group my-1">
                             <label for="actorFormType" class="col-1 col-form-label">Type:</label>
                             <div class="col">
-                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_editedModel.TypeId)">
+                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_roleRequest.TypeId)">
                                     @foreach (KeyValuePair<short, string> type in _roleTypes)
                                     {
                                         <option value="@(type.Key)">@(type.Value)</option>
@@ -146,7 +139,7 @@
                         <div class="row form-group my-1">
                             <label for="actorFormName" class="col-1 col-form-label">Name:</label>
                             <div class="col">
-                                <InputText id="actorFormName" class="form-control" @bind-Value="@(_editedModel.Name)"/>
+                                <InputText id="actorFormName" class="form-control" @bind-Value="@(_roleRequest.Name)"/>
                             </div>
                         </div>
                     </div>
@@ -156,6 +149,6 @@
     }
     else
     {
-        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        <Loading Color="@(Loading.Colors.Light)"/>
     }
 </div>

WatchIt.Website/Components/Panels/Pages/PersonEditPage/ActorRolesEditPanel.razor.cs

@@ -0,0 +1,222 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Request;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Controllers.Roles.RoleActorType;
+using WatchIt.DTO.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.PersonEditPage;
+
+public partial class ActorRolesEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+
+
+
+    #region PARAMETERS
+    
+    [Parameter] public required PersonResponse Data { get; set; }
+    [Parameter] public List<MediumResponse>? Media { get; set; }
+    
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private bool _editingMode;
+    private Guid? _editedId;
+    private RoleActorRequest _roleRequest = null!;
+    private bool _saving;
+    
+    private Dictionary<long, MediumResponse> _mediaDict = new Dictionary<long, MediumResponse>();
+    private Dictionary<short, string> _roleTypes = new Dictionary<short, string>();
+    private Dictionary<Guid, (RoleActorResponse Data, bool Deleting)> _roles = new Dictionary<Guid, (RoleActorResponse Data, bool Deleting)>();
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        ResetRequest();
+
+        await Task.WhenAll(
+        [
+            LoadRoleTypes(),
+            LoadMedia()
+        ]);
+        if (Data is not null)
+        {
+            await LoadRoles();
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadRoleTypes()
+    {
+        IApiResponse<IEnumerable<RoleActorTypeResponse>> response = await RolesClient.GetRoleActorTypes();
+        if (response.IsSuccessful)
+        {
+            _roleTypes = response.Content.ToDictionary(x => x.Id, x => x.Name);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Actor role types list could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadMedia()
+    {
+        IEnumerable<MediumResponse>? media = Media;
+        if (media is null)
+        {
+            IApiResponse<IEnumerable<MediumResponse>> response = await MediaClient.GetMedia(includePictures: true);
+            if (response.IsSuccessful)
+            {
+                media = response.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Media list could not be obtained.", SnackbarColor.Danger);
+                return;
+            }
+        }
+        _mediaDict = media.ToDictionary(x => x.Id, x => x);
+    }
+
+    private async Task LoadRoles()
+    {
+        RoleActorFilterQuery filter = new RoleActorFilterQuery
+        {
+            PersonId = Data.Id
+        };
+        OrderQuery order = new OrderQuery
+        {
+            OrderBy = "medium.release_date",
+        };
+        IApiResponse<IEnumerable<RoleActorResponse>> response = await RolesClient.GetRoleActors(filter, order);
+        if (response.IsSuccessful)
+        {
+            _roles = response.Content.ToDictionary(x => x.Id, x => (x, false));
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Actor roles could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+    
+    
+    private void CancelEditData()
+    {
+        _editingMode = false;
+    }
+
+    private async Task SaveData()
+    {
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        _saving = true;
+
+        IApiResponse<RoleActorResponse> response = await (_editedId.HasValue switch
+        {
+            true => RolesClient.PutRoleActor(token, _editedId.Value, _roleRequest),
+            false => RolesClient.PostRoleActor(token, _roleRequest),
+        });
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                _roles[response.Content.Id] = (response.Content, false);
+                _roles = _roles.OrderBy(x => _mediaDict[x.Value.Data.MediumId].ReleaseDate)
+                               .ToDictionary(x => x.Key, x => x.Value);
+                await Base.SnackbarStack.PushAsync("Role saved successfully.", SnackbarColor.Success); 
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit roles data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        
+        _saving = false;
+        _editingMode = false;
+    }
+    
+    private void ActivateEditData(Guid? id = null)
+    {
+        _editedId = id;
+        ResetRequest();
+        if (id is not null && _roles.TryGetValue(id.Value, out (RoleActorResponse Data, bool Deleting) role))
+        {
+            _roleRequest.Name = role.Data.Name;
+            _roleRequest.MediumId = role.Data.MediumId;
+            _roleRequest.TypeId = role.Data.TypeId;
+        }
+        _editingMode = true;
+    }
+    
+    private async Task DeleteData(Guid id)
+    {
+        _roles[id] = (_roles[id].Data, true);
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        IApiResponse response = await RolesClient.DeleteRole(token, id);
+        switch (response)
+        {
+            case {IsSuccessful: true}:
+                _roles.Remove(id);
+                await Base.SnackbarStack.PushAsync("Role removed successfully.", SnackbarColor.Success);
+                break;
+            case {StatusCode: HttpStatusCode.Forbidden} or {StatusCode: HttpStatusCode.Unauthorized}:
+                await Base.SnackbarStack.PushAsync("You are not authorized to remove roles.", SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+    }
+
+    private void ResetRequest() => _roleRequest = Data is null ? new RoleActorRequest() : new RoleActorRequest
+    {
+        PersonId = Data.Id,
+    };
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/PersonEditPage/CreatorRolesEditPanel.razor

@@ -1,6 +1,11 @@
 @using Blazorise.Extensions
+@using WatchIt.DTO.Models.Controllers.Media.Medium.Response
+@using WatchIt.DTO.Models.Controllers.Roles.Role.Response
+@using WatchIt.Website.Components.Subcomponents.Common
 @using Blazorise.Components
 
+@inherits Component
+
 
 
 <div class="panel @(Class)">
@@ -15,31 +20,17 @@
                     @if (!_editingMode)
                     {
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue)" @onclick="@(() => ActivateEdit())">Add</button>
+                            <button type="button" class="btn btn-secondary" disabled="@(Disabled)" @onclick="@(() => ActivateEditData())">Add</button>
                         </div>
                     }
                     else
                     {
-                        if (!string.IsNullOrWhiteSpace(_error))
-                        {
-                            <div class="col-auto align-self-center">
-                                <span class="text-danger">@(_error)</span>
-                            </div>
-                        }
                         <div class="col-auto">
-                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEdit)">Cancel</button>
+                            <button type="button" class="btn btn-secondary" @onclick="@(CancelEditData)">Cancel</button>
                         </div>
                         <div class="col-auto">
-                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveEdit)">
-                                @if (!_saving)
-                                {
-                                    <span>Save</span>
-                                }
-                                else
-                                {
-                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                    <span>Saving...</span>
-                                }
+                            <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                                <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                             </button>
                         </div>
                     }
@@ -73,20 +64,22 @@
                         <tbody class="table-group-divider">
                             @foreach (Guid roleId in _roles.Keys)
                             {
+                                RoleCreatorResponse role = _roles[roleId].Data;
+                                MediumResponse medium = _mediaDict[role.MediumId];
                                 <tr>
                                     <td class="align-middle">
-                                        @(Media[_roles[roleId].Data.MediaId].Title)@(Media[_roles[roleId].Data.MediaId].ReleaseDate.HasValue ? $" ({Media[_roles[roleId].Data.MediaId].ReleaseDate!.Value.Year})" : string.Empty)
+                                        @(medium.Title)@(medium.ReleaseDate.HasValue ? $" ({medium.ReleaseDate!.Value.Year})" : string.Empty)
                                     </td>
                                     <td class="align-middle">
-                                        @(Media[_roles[roleId].Data.MediaId].Type == MediaType.Movie ? $"Movie" : "TV Series")
+                                        @(medium.Type == MediumResponseType.Movie ? "Movie" : "TV Series")
                                     </td>
                                     <td class="align-middle">
-                                        @(_roleTypes[_roles[roleId].Data.TypeId])
+                                        @(_roleTypes[role.TypeId])
                                     </td>
                                     <td class="align-middle table-cell-fit">
                                         <div class="hstack gap-1">
-                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => ActivateEdit(roleId))"><i class="fas fa-edit"></i></button>
-                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(!Id.HasValue || _roles[roleId].Deleting)" @onclick="@(() => Delete(roleId))">
+                                            <button class="btn btn-outline-secondary btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => ActivateEditData(roleId))"><i class="fas fa-edit"></i></button>
+                                            <button class="btn btn-outline-danger btn-sm" type="button" disabled="@(Disabled || _roles[roleId].Deleting)" @onclick="@(() => DeleteData(roleId))">
                                                 @if (_roles[roleId].Deleting)
                                                 {
                                                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -106,19 +99,19 @@
             }
             else
             {
-                <EditForm Model="@(_editedModel)">
+                <EditForm Model="@(_roleRequest)">
                     <AntiforgeryToken/>
                     <div class="container-grid">
                         <div class="row form-group mb-1">
-                            <label for="creatorFormMedia" class="col-1 col-form-label">Media:</label>
+                            <label for="actorFormMedia" class="col-1 col-form-label">Media:</label>
                             <div class="col">
-                                <Autocomplete ElementId="creatorFormMedia" 
-                                              TItem="MediaResponse"
+                                <Autocomplete ElementId="actorFormMedia" 
+                                              TItem="MediumResponse"
                                               TValue="long"
-                                              Data="@(Media.Values)"
+                                              Data="@(_mediaDict.Values)"
                                               TextField="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
                                               ValueField="@(item => item.Id)"
-                                              @bind-SelectedValue="@(_editedModel.MediaId)"
+                                              @bind-SelectedValue="@(_roleRequest.MediumId)"
                                               Placeholder="Search..."
                                               Filter="AutocompleteFilter.Contains">
                                     <NotFoundContent Context="not_found_context"> Sorry... @not_found_context was not found</NotFoundContent>
@@ -126,9 +119,9 @@
                             </div>
                         </div>
                         <div class="row form-group my-1">
-                            <label for="creatorFormType" class="col-1 col-form-label">Type:</label>
+                            <label for="actorFormType" class="col-1 col-form-label">Type:</label>
                             <div class="col">
-                                <InputSelect id="creatorFormType" class="form-control" TValue="short" @bind-Value="@(_editedModel.TypeId)">
+                                <InputSelect id="actorFormType" class="form-control" TValue="short" @bind-Value="@(_roleRequest.TypeId)">
                                     @foreach (KeyValuePair<short, string> type in _roleTypes)
                                     {
                                         <option value="@(type.Key)">@(type.Value)</option>
@@ -143,6 +136,6 @@
     }
     else
     {
-        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        <Loading Color="@(Loading.Colors.Light)"/>
     }
 </div>

WatchIt.Website/Components/Panels/Pages/PersonEditPage/CreatorRolesEditPanel.razor.cs

@@ -0,0 +1,221 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Media.Medium.Response;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Query;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Request;
+using WatchIt.DTO.Models.Controllers.Roles.Role.Response;
+using WatchIt.DTO.Models.Controllers.Roles.RoleCreatorType;
+using WatchIt.DTO.Query;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.PersonEditPage;
+
+public partial class CreatorRolesEditPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PersonsClient { get; set; } = null!;
+    [Inject] private IMediaClient MediaClient { get; set; } = null!;
+    [Inject] private IRolesClient RolesClient { get; set; } = null!;
+    
+    #endregion
+
+
+
+    #region PARAMETERS
+    
+    [Parameter] public required PersonResponse Data { get; set; }
+    [Parameter] public List<MediumResponse>? Media { get; set; }
+    
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private bool _editingMode;
+    private Guid? _editedId;
+    private RoleCreatorRequest _roleRequest = null!;
+    private bool _saving;
+    
+    private Dictionary<long, MediumResponse> _mediaDict = new Dictionary<long, MediumResponse>();
+    private Dictionary<short, string> _roleTypes = new Dictionary<short, string>();
+    private Dictionary<Guid, (RoleCreatorResponse Data, bool Deleting)> _roles = new Dictionary<Guid, (RoleCreatorResponse Data, bool Deleting)>();
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        ResetRequest();
+        
+        await Task.WhenAll(
+        [
+            LoadRoleTypes(),
+            LoadMedia(),
+        ]);
+        if (Data is not null)
+        {
+            await LoadRoles();
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task LoadRoleTypes()
+    {
+        IApiResponse<IEnumerable<RoleCreatorTypeResponse>> response = await RolesClient.GetRoleCreatorTypes();
+        if (response.IsSuccessful)
+        {
+            _roleTypes = response.Content.ToDictionary(x => x.Id, x => x.Name);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Creator role types list could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+
+    private async Task LoadMedia()
+    {
+        IEnumerable<MediumResponse>? media = Media;
+        if (media is null)
+        {
+            IApiResponse<IEnumerable<MediumResponse>> response = await MediaClient.GetMedia();
+            if (response.IsSuccessful)
+            {
+                media = response.Content;
+            }
+            else
+            {
+                await Base.SnackbarStack.PushAsync("An error occured. Media list could not be obtained.", SnackbarColor.Danger);
+                return;
+            }
+        }
+        _mediaDict = media.ToDictionary(x => x.Id, x => x);
+    }
+
+    private async Task LoadRoles()
+    {
+        RoleCreatorFilterQuery filter = new RoleCreatorFilterQuery
+        {
+            PersonId = Data.Id
+        };
+        OrderQuery order = new OrderQuery
+        {
+            OrderBy = "medium.release_date",
+        };
+        IApiResponse<IEnumerable<RoleCreatorResponse>> response = await RolesClient.GetRoleCreators(filter, order);
+        if (response.IsSuccessful)
+        {
+            _roles = response.Content.ToDictionary(x => x.Id, x => (x, false));
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error occured. Creator roles could not be obtained.", SnackbarColor.Danger);
+        }
+    }
+    
+    private void CancelEditData()
+    {
+        _editingMode = false;
+    }
+
+    private async Task SaveData()
+    {
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        _saving = true;
+
+        IApiResponse<RoleCreatorResponse> response = await (_editedId.HasValue switch
+        {
+            true => RolesClient.PutRoleCreator(token, _editedId.Value, _roleRequest),
+            false => RolesClient.PostRoleCreator(token, _roleRequest),
+        });
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                _roles[response.Content.Id] = (response.Content, false);
+                _roles = _roles.OrderBy(x => _mediaDict[x.Value.Data.MediumId].ReleaseDate)
+                               .ToDictionary(x => x.Key, x => x.Value);
+                await Base.SnackbarStack.PushAsync("Role saved successfully.", SnackbarColor.Success); 
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit roles data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        
+        _saving = false;
+        _editingMode = false;
+    }
+    
+    private void ActivateEditData(Guid? id = null)
+    {
+        _editedId = id;
+        ResetRequest();
+        if (id is not null && _roles.TryGetValue(id.Value, out (RoleCreatorResponse Data, bool Deleting) role))
+        {
+            _roleRequest.MediumId = role.Data.MediumId;
+            _roleRequest.TypeId = role.Data.TypeId;
+        }
+        _editingMode = true;
+    }
+    
+    private async Task DeleteData(Guid id)
+    {
+        _roles[id] = (_roles[id].Data, true);
+        
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+        IApiResponse response = await RolesClient.DeleteRole(token, id);
+        switch (response)
+        {
+            case {IsSuccessful: true}:
+                _roles.Remove(id);
+                await Base.SnackbarStack.PushAsync("Role removed successfully.", SnackbarColor.Success);
+                break;
+            case {StatusCode: HttpStatusCode.Forbidden} or {StatusCode: HttpStatusCode.Unauthorized}:
+                await Base.SnackbarStack.PushAsync("You are not authorized to remove roles.", SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+    }
+    
+    private void ResetRequest() => _roleRequest = Data is null ? new RoleCreatorRequest() : new RoleCreatorRequest
+    {
+        PersonId = Data.Id,
+    };
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/PersonEditPage/EditFormPanel.razor

@@ -1,45 +1,48 @@
-@using WatchIt.Common.Model.Genders
+@using WatchIt.DTO.Models.Controllers.Genders.Gender
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
 
 
 
 <div class="panel @(Class)">
     @if (_loaded)
     {
-        <EditForm Model="_person">
+        <EditForm Model="@(_request)">
             <AntiforgeryToken/>
             <div class="container-grid">
                 <div class="row form-group mb-1">
                     <label for="name" class="col-2 col-form-label">Name*</label>
                     <div class="col-10">
-                        <InputText id="name" class="form-control" @bind-Value="_person!.Name"/>
+                        <InputText id="name" class="form-control" @bind-Value="_request!.Name"/>
                     </div>
                 </div>
                 <div class="row form-group mb-1">
                     <label for="fullName" class="col-2 col-form-label">Full name</label>
                     <div class="col-10">
-                        <InputText id="fullName" class="form-control" @bind-Value="_person!.FullName"/>
+                        <InputText id="fullName" class="form-control" @bind-Value="_request!.FullName"/>
                     </div>
                 </div>
                 <div class="row form-group my-1">
                     <label for="desc" class="col-2 col-form-label">Description</label>
                     <div class="col-10">
-                        <InputTextArea id="desc" class="form-control" @bind-Value="_person!.Description"/>
+                        <InputTextArea id="desc" class="form-control" @bind-Value="_request!.Description"/>
                     </div>
                 </div>
                 <div class="row form-group mb-1">
                     <label for="birthDeathDates" class="col-2 col-form-label">Birth and death</label>
                     <div class="col-10">
                         <div id="birthDeathDates" class="input-group">
-                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_person!.BirthDate"/>
+                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_request!.BirthDate"/>
                             <span class="input-group-text">-</span>
-                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_person!.DeathDate"/>
+                            <InputDate TValue="DateOnly?" class="form-control" @bind-Value="_request!.DeathDate"/>
                         </div>
                     </div>
                 </div>
                 <div class="row form-group my-1">
                     <label for="desc" class="col-2 col-form-label">Gender</label>
                     <div class="col-10">
-                        <InputSelect TValue="short?" id="desc" class="form-control" @bind-Value="_person!.GenderId">
+                        <InputSelect TValue="short?" id="desc" class="form-control" @bind-Value="_request!.GenderId">
                             <option value="@(default(short?))">No choice</option>
                             @foreach (GenderResponse gender in _genders)
                             {
@@ -49,23 +52,9 @@
                     </div>
                 </div>
                 <div class="row mt-2">
-                    <div class="col align-self-center">
-                        @if (!string.IsNullOrWhiteSpace(_error))
-                        {
-                            <span class="text-danger">@(_error)</span>
-                        }
-                    </div>
-                    <div class="col-auto">
-                        <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(Save)">
-                            @if (!_saving)
-                            {
-                                <span>Save</span>
-                            }
-                            else
-                            {
-                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                <span>Saving...</span>
-                            }
+                    <div class="col d-flex flex-column align-items-end">
+                        <button type="submit" class="btn btn-secondary" disabled="@(_saving)" @onclick="@(SaveData)">
+                            <LoadingButtonContent IsLoading="@(_saving)" Content="Save" LoadingContent="Saving..."/>
                         </button>
                     </div>
                 </div>
@@ -74,6 +63,6 @@
     }
     else
     {
-        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+        <Loading Color="@(Loading.Colors.Light)"/>
     }
 </div>

WatchIt.Website/Components/Panels/Pages/PersonEditPage/EditFormPanel.razor.cs

@@ -0,0 +1,117 @@
+using System.Net;
+using Blazorise.Snackbar;
+using Microsoft.AspNetCore.Components;
+using Refit;
+using WatchIt.DTO.Models.Controllers.Genders.Gender;
+using WatchIt.DTO.Models.Controllers.People;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.Website.Clients;
+using WatchIt.Website.Components.Layout;
+using WatchIt.Website.Services.Authentication;
+
+namespace WatchIt.Website.Components.Panels.Pages.PersonEditPage;
+
+public partial class EditFormPanel : Component
+{
+    #region SERVICES
+
+    [Inject] private NavigationManager NavigationManager { get; set; } = null!;
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
+    [Inject] private IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] private IGendersClient GendersClient { get; set; } = null!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+
+    [Parameter] public PersonResponse? Data { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+    private bool _saving;
+    
+    private List<GenderResponse> _genders = [];
+    
+    private PersonRequest _request = new PersonRequest();
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnFirstRenderAsync()
+    {
+        await base.OnFirstRenderAsync();
+
+        if (Data is not null)
+        {
+            _request = Data.ToRequest();
+        }
+
+        IApiResponse<IEnumerable<GenderResponse>> gendersResponse = await GendersClient.GetGenders();
+        if (gendersResponse.IsSuccessful)
+        {
+            _genders.AddRange(gendersResponse.Content);
+        }
+        else
+        {
+            await Base.SnackbarStack.PushAsync("An error has occured. List of genders could not be obtained.", SnackbarColor.Danger);
+        }
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    private async Task SaveData()
+    {
+        _saving = true;
+
+        string token = await AuthenticationService.GetRawAccessTokenAsync() ?? string.Empty;
+
+        IApiResponse<PersonResponse> response = await (Data switch
+        {
+            null => PeopleClient.PostPerson(token, _request),
+            _ => PeopleClient.PutPerson(token, Data.Id, _request),
+        });
+        switch (response)
+        {
+            case { IsSuccessful: true }:
+                switch (Data)
+                {
+                    case null: NavigationManager.NavigateTo($"people/{response.Content.Id}/edit", true); break;
+                    default: await Base.SnackbarStack.PushAsync("Data saved successfully.", SnackbarColor.Success); break;
+                }
+                break;
+            case { StatusCode: HttpStatusCode.Forbidden } or { StatusCode: HttpStatusCode.Unauthorized }:
+                await Base.SnackbarStack.PushAsync("You are not authorized to edit people data.", SnackbarColor.Danger);
+                break;
+            case { StatusCode: HttpStatusCode.BadRequest }:
+                string? content = "An unknown error occured.";
+                if (response.Error is ValidationApiException ex)
+                {
+                    string? exContent = ex.Content?.Errors.SelectMany(x => x.Value).FirstOrDefault();
+                    if (exContent is not null)
+                    {
+                        content = exContent;
+                    }
+                }
+                await Base.SnackbarStack.PushAsync(content, SnackbarColor.Danger);
+                break;
+            default:
+                await Base.SnackbarStack.PushAsync("An unknown error occured.", SnackbarColor.Danger);
+                break;
+        }
+        _saving = false;
+    }
+
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/PersonEditPage/HeaderPanel.razor

@@ -0,0 +1,27 @@
+@using WatchIt.Website.Components.Subcomponents.Common
+
+@inherits Component
+
+
+
+<div class="panel" role="button" @onclick="@(Data is not null ? () => NavigationManager.NavigateTo($"/people/{Data.Id}") : null)" style="cursor: @(Data is null ? "default" : "pointer")">
+    <div class="d-flex gap-3 align-items-center">
+        <Image Content="@(Data?.Picture)" Height="60" Placeholder="/assets/placeholders/person.png" AlternativeText="poster"/>
+        <div class="d-flex-inline flex-column">
+            <h2 id="primaryText" class="m-0">
+                @if (Data is null)
+                {
+                    <span class="fw-bold">New person</span>
+                }
+                else
+                {
+                    <span class="fw-bold">@(Data.Name)</span>
+                }
+            </h2>
+            @if (Data is not null)
+            {
+                <span id="secondaryText" class="text-secondary">Person settings</span>
+            }
+        </div>
+    </div>
+</div>

WatchIt.Website/Components/Panels/Pages/PersonEditPage/HeaderPanel.razor.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.DTO.Models.Controllers.People.Person;
+using WatchIt.Website.Clients;
+
+namespace WatchIt.Website.Components.Panels.Pages.PersonEditPage;
+
+public partial class HeaderPanel : Component
+{
+    #region SERVICES
+
+    [Inject] public IPeopleClient PeopleClient { get; set; } = null!;
+    [Inject] public NavigationManager NavigationManager { get; set; } = null!;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required PersonResponse? Data { get; set; }
+    
+    #endregion
+}

WatchIt.Website/Components/Panels/Pages/PersonPage/MetadataPanel.razor

@@ -1,16 +1,18 @@
+@inherits Component
+
 <div class="panel h-100">
     <div class="d-flex flex-wrap metadata-pill-container">
-        @if (!string.IsNullOrWhiteSpace(Item.Gender?.Name))
+        @if (!string.IsNullOrWhiteSpace(Data.Gender?.Name))
         {
-            <div class="metadata-pill"><strong>Gender:</strong> @(Item.Gender?.Name)</div>
+            <div class="metadata-pill"><strong>Gender:</strong> @(Data.Gender?.Name)</div>
         }
-        @if (Item.BirthDate.HasValue)
+        @if (Data.BirthDate.HasValue)
         {
-            <div class="metadata-pill"><strong>Birth date:</strong> @(Item.BirthDate.Value.ToString())</div>
+            <div class="metadata-pill"><strong>Birth date:</strong> @(Data.BirthDate.Value.ToString())</div>
         }
-        @if (Item.DeathDate.HasValue)
+        @if (Data.DeathDate.HasValue)
         {
-            <div class="metadata-pill"><strong>Death date:</strong> @(Item.DeathDate.Value.ToString())</div>
+            <div class="metadata-pill"><strong>Death date:</strong> @(Data.DeathDate.Value.ToString())</div>
         }
     </div>
 </div>