---
import PageLayout from "../../layouts/PageLayout.astro";
import {getCollection} from "astro:content";
import {l} from "../../util/util";
import { Image } from "astro:assets";
import Card from "@components/Card.svelte";
import XRayPreview from "@components/publics/XRayPreview.svelte";

const publics = await getCollection("publics");
---

<PageLayout title="Publics">
    <div>
        {publics.map((pub) => (
            <a href={l("/publics/" + pub.id)}>
                <Card extraClasses="w-full mx-0">
                    <div class="flex justify-center">
                        <XRayPreview client:load>
                            <Image slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
                            {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
                        </XRayPreview>
                    </div>
                    <h2 class="font-bold text-5xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
                    <h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
                </Card>
            </a>
        ))}
    </div>
</PageLayout>