<script lang="ts">
    import { onMount } from "svelte";
    import { Column, Row, Table } from "sveltestrap";
    import { getRules } from "../api/rules";
    import type { Rule } from "../api/rules";

    let rows: Rule[] = [];
    onMount(async () => {
        try {
            const { payload } = await getRules();
            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="Enabled">{row.enabled}</Column>
            <Column header="Weight">{row.weight}</Column>
            <Column header="Name">{row.name}</Column>
            <Column header="Expressions">{row.value}</Column>
            <Column header="Answer"
                >{row.answer.value} - {row.answer.type}</Column
            >
            <Column header="TTL">{row.ttl}</Column>
        </Table>
    {/if}
</div>
