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

    import { onMount } from "svelte";
    import { Column, Row, Table } from "sveltestrap";
    import { getRecursors } from "../api/recursors";
    import type { Recursor } from "../api/recursors";

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

<PageContainer
    header="Recursors"
    description="List of upstreams servers to use for resolving DNS records"
>
    <section class="flex flex-column text-sm">
        {#if rows.length > 0}
            <Table {rows} let:row hover bordered>
                <Column header="IP Address">{row.ipAddress}</Column>
                <Column header="Weight">{row.weight}</Column>
                <Column header="Timeout in MS">{row.timeoutMs}</Column>
            </Table>
        {/if}
    </section>
</PageContainer>
