<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

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

    dayjs.extend(utc);

    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(dayjs(schem.lastUpdate).utc(false).toDate())}</th>
    {#if schem.type != null}
        <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>
    {:else}
        <th></th>
        <th></th>
    {/if}
</tr>

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

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