<script lang="ts">
    import {astroI18n, t} from "astro-i18n";
    import moment from "moment/moment.js";
    import {CheckSolid, FileOutline, FolderOutline, XCircleOutline} from "flowbite-svelte-icons";
    import type {Schematic} from "../types/schem.ts";
    import type {Player} from "../types/data.ts";

    export let schem: Schematic;
    export let players: Record<number, Player>;
</script>

<tr on:click|preventDefault>
    <th>
        {#if schem.type == null}
            <FolderOutline />
        {:else}
            <FileOutline />
        {/if}
    </th>
    <th>
        {schem.name}{#if schem.type == null}/{/if}
    </th>
    <th class="hidden sm:table-cell">{players[schem.owner].name}</th>
    <th class="hidden sm:table-cell">{schem.type ?? t("dashboard.schematic.dir")}</th>
    <th class="hidden md:table-cell">{new Intl.DateTimeFormat(astroI18n.locale, {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
    }).format(moment(schem.lastUpdate).utc(false).toDate())}</th>
    <th>
        {#if schem.replaceColor}
            <CheckSolid class="text-green-500" />
        {:else}
            <XCircleOutline class="text-red-500" />
        {/if}
    </th>
    <th>
        {#if schem.allowReplay}
            <CheckSolid class="text-green-500" />
        {:else}
            <XCircleOutline class="text-red-500" />
        {/if}
    </th>
</tr>

<style lang="scss">
    tr {
        @apply transition-colors cursor-pointer border-b
            dark:hover:bg-gray-800 hover:bg-gray-300;
    }

    th {
        @apply text-left py-4 md:px-2;
    }
</style>