<script lang="ts">
    import ItemBox from "$lib/components/itemBox.svelte";
    import type { BoxContent } from "$lib/types/boxContent";

    const boxes: BoxContent[] = [
        {name: "nextcloud", link: "https://cloud.fjla.uk", img: "auto"},
        {name: "home assistant", link: "https://ha.fjla.uk", img: "auto"},
        {name: "jellyfin", link: "https://jf.fjla.uk", img: "auto"},
        {name: "traccar", link:"https://traccar.fjla.uk", img: "auto"},
        {name: "owlboard", link:"https://owlboard.info", img:"auto"},
        {name: "webmail", link:"https://mx0123.fb-infra.uk/mail", img: "auto"},
        {name: "account", link:"https://ipa0922.fjla.net", img:"auto"}
    ]
</script>

<header>FJLA Gateway</header>

<div id="boxContainer">
    {#each boxes as boxData}
        <ItemBox {boxData} />
    {/each}
</div>

<style>
    header {
        margin: auto;
        color: white;
        font-family: MuseoModerno, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 6vw;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #boxContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
</style>