---
import {Image} from "astro:assets";
import Basic from "./Basic.astro";
import "../styles/button.css";
import localLogo from "../images/logo.png";
import {YoutubeSolid, DiscordSolid} from "flowbite-svelte-icons";
import {t} from "astro-i18n";
import {l} from "../util/util";

import Navbar from "@components/Navbar.svelte";

import ServerStatus from "../components/ServerStatus.svelte";

const {title, description} = Astro.props;
---

<Basic title={title} description={description}>
    <slot name="head" slot="head"/>
    <Fragment>
        <div class="min-h-screen flex flex-col">
            <Navbar client:idle>
                <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
                    class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
            </Navbar>
            <main class="flex-1">
                <slot/>
            </main>
            <footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">
                <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
                    <div class="footer-card">
                        <h1>Serverstatus</h1>
                        <ServerStatus client:only="svelte" />
                    </div>
                    <div class="footer-card">
                        <h1>Links</h1>
                        <a href={l("/")}>{t("navbar.links.home.title")}</a>
                        <a href={l("/join")}>{t("footer.join")}</a>
                        <a href={l("/announcements")}>{t("footer.announcements")}</a>
                        <a href={l("/rules")}>{t("footer.gamemodes")}</a>
                        <a href={l("/stats/fight")}>{t("footer.stats")}</a>
                        <a href={l("/code-of-conduct")}>{t("footer.coc")}</a>
                        <a href={l("/privacy-policy")}>{t("footer.privacy")}</a>
                        <a href={l("/imprint")}>{t("footer.imprint")}</a>
                    </div>
                    <div class="footer-card">
                        <h1>Social Media</h1>
                        <a class="flex" href="/youtube">
                            <YoutubeSolid class="mr-2"/>
                            YouTube</a>
                        <a class="flex" href="/discord">
                            <DiscordSolid class="mr-2"/>
                            Discord</a>
                    </div>
                </div>
                <span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>
            </footer>
        </div>
    </Fragment>
</Basic>

<style>
    .footer-card {
        @apply w-40 text-gray-400 flex flex-col;

        > h1 {
            @apply text-xl font-bold text-gray-100;
        }

        > a {
            @apply hover:underline;
        }
    }

    .match {
        width: min(100vw, 70em);
    }
</style>