Add pagination to album page

astro/src/components/photos/Album.astro

@@ -1,8 +1,9 @@
 ---
-import { getPhotoRoute } from '@/lib/routing';
+import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
 import { AlbumPhotos } from './Album.tsx';
 import { getImageSize, getImageUrl } from '@/lib/images';
 import { getSettings } from '@/content/settings/settings';
+import Pagination from '../common/Pagination.astro';
 
 interface Props {
     page: PhotoAlbumPage;
@@ -12,12 +13,13 @@ const settings = await getSettings();
 const album = Astro.props.page;
 const pageNumber = Astro.props.page.pageNumber;
 
-const startNumber = (pageNumber - 1) * settings.photo.album.perPage;
-const endNumber = pageNumber * settings.photo.album.perPage;
+const totalAlbumPages = Math.ceil(album.photos.length / settings.photo.album.perPage);
+const sliceStartNumber = (pageNumber - 1) * settings.photo.album.perPage;
+const sliceEndNumber = pageNumber * settings.photo.album.perPage;
 
 const remappedPhotos: PhotoAlbumGalleryItem[] = [];
 
-album.photos.slice(startNumber, endNumber).forEach((photo) => {
+album.photos.slice(sliceStartNumber, sliceEndNumber).forEach((photo) => {
     const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.67);
 
     remappedPhotos.push({
@@ -41,5 +43,13 @@ album.photos.slice(startNumber, endNumber).forEach((photo) => {
         <h1 class="text-5xl font-bold">{album.title}</h1>
 
         <AlbumPhotos client:only client:load photos={remappedPhotos} />
+
+        { totalAlbumPages > 1 && (
+            <Pagination 
+                page={pageNumber}
+                totalPages={totalAlbumPages}
+                urlTemplate={getAlbumRoute(settings.photo, album)}
+            />
+        ) }
     </div>
 </div>