---
import {createGetStaticPaths} from "astro-i18n";
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";
import {t} from "astro-i18n";

const { mode } = Astro.props;

export const getStaticPaths = createGetStaticPaths(async () => {
    const gamemodes = await getCollection("modes");
    
    return gamemodes.map((entry) => ({
        props: {
            mode: entry,
        },
        params: {
            mode: entry.id,
        },
    }));
});

const publics = await getCollection("publics", entry => entry.data.gamemode.id == mode.id);
---

<PageLayout title="Publics">
    <h1 class="text-4xl font-bold">{t(`${mode.data.translationKey}.title`)}</h1>
    <div class="grid grid-cols-2 gap-2">
        {publics.map((pub) => (
            <a href={l("/publics/" + pub.id)}>
                <Card extraClasses="w-full m-0" hoverEffect={false}>
                    <div class="flex justify-center">
                        <XRayPreview client:load>
                            <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
                            {pub.data.xray && <Image slot="xray" class="bg-zinc-50 dark:bg-zinc-900" src={pub.data.xray} alt={pub.data.name} />}
                        </XRayPreview>
                    </div>
                    <h2 class="font-bold text-3xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
                </Card>
            </a>
        ))}
    </div>
</PageLayout>
