---
import Gallery from "../../layouts/Gallery.astro";
import Image from "../../components/Image.astro";
import pb from "../../lib/pb";

const { slug } = Astro.params;
const imageCollection = await pb.collection("images").getFullList({
  sort: "-created",
  filter: `(character.slug?~"${slug}")`,
});
const characterDetails = await pb
  .collection("characters")
  .getFirstListItem(`(slug~"${slug}")`);
const images = imageCollection.map((record) => {
  const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
    return {
      url: url,
      desc: record.description,
      nsfw: record.nsfw,
      artist: record.artist,
    };
});
export const prerender = false;
---

<Gallery>
  <div class="flex flex-col">
    <div class="pb-4">
      <h1 class="text-2xl text-center p-8">
        <!-- <a href={`/characters`}> -->
        {characterDetails.name}
        <!-- </a> -->
      </h1>
      {
        characterDetails.description && (
          <div class="m-4 p-4  bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
            <Fragment set:html={characterDetails.description} />
          </div>
        )
      }
    </div>
    <div
      class="gap-4 columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 self-center"
    >
      {
        images.map((image) => (
          <Image
            nsfw={image?.nsfw}
            src={image?.url}
            alt={image?.desc}
            artist={image?.artist}
          />
        ))
      }
    </div>
  </div>
</Gallery>

<!-- <style>
</style> -->