<script context="module" lang="ts">
</script>

<script lang="ts">
import Loading from "./Loading.svelte";


    export let headers: Array<string>;
    export let rows: Array<Array<string>> | undefined = undefined;
    export let loading: boolean = false;
</script>


<div class="inline-block min-w-full py-2 align-middle">
    <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
        <table class="min-w-full divide-y divide-gray-600">
            <thead class="bg-gray-800">
                <tr>
                    {#each headers as header}
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-slate-400">{header}</th>
                    {/each}
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-600 bg-gray-700">
                {#if rows !== undefined && rows !== null}
                    {#each rows as row}
                        <tr>
                            {#each row as value}
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400">{value}</td>
                            {/each}
                        </tr>
                    {/each}
                {/if}
                <slot />
                {#if loading === true}
                    <tr> 
                        <td colspan={headers.length + 1} class="py-3">
                            <div class="grid place-items-center">
                                <Loading />
                            </div>
                        </td>
                    </tr>
                {/if}
            </tbody>
        </table>
    </div>
</div>
