---

import wg from "../../images/WarGears.png"
import mwg from "../../images/MiniWarGears.png"
import as from "../../images/AirShips.png"
import ws from "../../images/WarShips.png"
import {t} from "astro-i18n";
import {getCollection} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {Image} from "astro:assets";

const imageMap = {
    "wg": wg,
    "mwg": mwg,
    "as": as,
    "ws": ws
}

const modes = await getCollection("modes", entry => entry.data.main)
---

<PageLayout title={t("page")}>
    {modes.map(value => (
            <div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
                 md:flex-row">
                <Image height="300" width="300" src={imageMap[value.data.translationKey]} alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
                <div class="ml-4">
                    <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
                    <div>{t(value.data.translationKey + ".description")}</div>
                    <div class="mt-2 flex flex-col">
                        <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
                        <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("council")}</a>
                        {value.data.ranked ? <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a> : null}
                    </div>
                </div>
            </div>))}
</PageLayout>