<script lang="ts">
    import {astroI18n, t} from "astro-i18n"
    import {l} from "../util/util.ts"
    import {dataRepo, schemRepo, tokenStore} from "./repo/repo.ts";
    import moment from "moment";
    import {
        CheckSolid,
        ChevronDoubleRightOutline,
        FileOutline,
        FolderOutline, HomeOutline,
        InfoCircleOutline,
        XCircleOutline
    } from "flowbite-svelte-icons";
    import {Breadcrumb, BreadcrumbItem, Modal, Tooltip} from "flowbite-svelte";
    import SchematicInfo from "./dashboard/SchematicInfo.svelte";
    import SchematicListTile from "./dashboard/SchematicListTile.svelte";
    import UploadModal from "./dashboard/UploadModal.svelte";
    import SchematicList from "./dashboard/SchematicList.svelte";
    import UserInfo from "./dashboard/UserInfo.svelte";

    let userFetch = getUser();
    let schematicFetch = getSchematics();

    function getUser() {
        return $dataRepo.getMe()
    }

    function getSchematics() {
        return $schemRepo.getRootSchematicList()
    }

    function getSchematic(id: number) {
        return $schemRepo.getSchematicList(id)
    }
</script>

{#await userFetch}
    <p>{t("status.loading")}</p>
{:then user}
    <UserInfo {user} />
    <hr>
    <div>
        {#await schematicFetch}
            <p>{t("status.loading")}</p>
        {:then schematics}
            <SchematicList {schematics} on:reset={() => schematicFetch = getSchematics()} on:to={(e) => schematicFetch = getSchematic(e.detail.id) } />
        {:catch error}
            <p>error: {error.message}</p>
        {/await}
    </div>
{:catch error}
    <p>error: {error.message}</p>
{/await}

