<script lang="ts">
    import { onMount } from "svelte";
    import { Column, Table } from "sveltestrap";
    import { getLogs } from "../api/logs";

    let rows = [];
    onMount(async () => {
        try {
            const { payload } = await getLogs();
            rows = payload || [];
        } catch (error) {
            console.error(error);
        }
    });
</script>

<div class="flex flex-column text-sm">
    {#if rows.length > 0}
        <Table {rows} let:row hover bordered>
            <Column header="Started">
                {row.Started}
            </Column>
            <Column header="Domain">
                {row.Domain}
            </Column>
            <Column header="IP">
                {row.ClientIP}
            </Column>
            <Column header="Status">
                {row.Status}
            </Column>
            <Column header="Protocol">
                {row.Protocol}
            </Column>
            <Column header="Error">
                {#if row.Error}
                    {row.Error}
                {/if}
            </Column>
            <Column header="Round Trip Ms">
                {row.RecurseRoundTripTimeMs}
            </Column>
            <Column header="Upstream Used">
                {row.RecurseUpstreamIP}
            </Column>
            <Column header="Total Time Ms">
                {row.TotalTimeMs}
            </Column>
        </Table>
    {:else}
        <p>No Logs yet!</p>
        <p><em>TODO:</em> Link to docs on how to point your router at this server</p>
    {/if}
</div>
