<script lang="ts">
    import type FileViewState from "../models/FileViewState.svelte";
    import {
        TrashBinSolid
    } from "flowbite-svelte-icons";

    let {fState}: { fState: FileViewState } = $props();
    let notifications = $derived(fState.notifications);
</script>

<div class="border-l border-r border-forge-sec bg-forge-sec flex flex-row" style="width: 100%; height: 24px">
    <div class="text-sm p-1">
        Notifications:
    </div>
    <button class="clear" onclick={ () => fState.clearNotifications()}>
        <div class="img">
            <TrashBinSolid size="sm"/>
        </div>
    </button>
</div>
<div class="flex flex-col">
    {#each notifications as notification}
        <div class="text-xs flex flex-row">
            <small class="whitespace-nowrap">{notification.getDate() + ":"}</small>&nbsp <p class:error={notification.isError()} class:debug={notification.isDebug()}> {notification.level} </p> &nbsp
            <p> {" - " + notification.message}</p>
        </div>
        <div class="bg-forge-bound mt-1 mb-1" style="height: 1px; width: 100%"></div>
    {/each}
</div>


<style lang="postcss">
    .error {
        @apply text-red-600;
    }

    .clear {
        @apply hover:bg-forge-acc h-[24px] w-[24px] rounded-2xl;
        position: fixed;
        right: 0;
        top: 0;
    }

    .img {
        position: fixed;
        right: 4px;
        top: 4px;
    }
</style>
