---
import Base from "@layout/Base";
import { authPB } from "@utils/pocketbase";
export const prerender = false

const { title } = Astro.params
const pb = await authPB()
const album = await pb.collection('albums').getFirstListItem(`title ~ "${decodeURI(title!)}"`)
const images = await Promise.all(
    album.images.map(i => pb.files.getURL(album, i))
)
---

<Base meta={{title: "album", description: album.title, ogImage: images[0]}}>

    <div slot="sidebar">
        <h1>{album.title}</h1>
        <p>{album.date}</p>
        <p>{album.location}</p><br>

        <Fragment set:html={album.remarks}/>
    </div>

    <div slot="content">
        { images.map(img =>  <img class="pb-2" src={img}/> ) }
    </div>
</Base>