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

    let {fState}: { fState: FileViewState } = $props();
    let changes = $derived(fState.changes);
</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">
        Changes:
    </div>
    <button class="clear" onclick={ () => fState.clearChanges()}>
        <div class="img">
            <TrashBinSolid size="sm"/>
        </div>
    </button>
</div>
<div class="flex flex-col">
    {#each changes as change}
        <div class="text-xs flex flex-row">
            <p class="whitespace-nowrap">{change.key + ":"}</p>
            &nbsp
            <p>{change.ptype}</p>&nbsp|&nbsp
            <p>{change.sub_type}</p>&nbsp|&nbsp
            <p>{change.value}</p>
        </div>
        <div class="bg-forge-bound mt-1 mb-1" style="height: 1px; width: 100%"></div>
    {/each}
</div>


<style lang="postcss">

    .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>
