<script setup>
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';

const props = defineProps({
    actions: Array
});



</script>
<template>
    <fwb-table>
        <fwb-table-head>
            <fwb-table-head-cell>#</fwb-table-head-cell>
            <fwb-table-head-cell>Name</fwb-table-head-cell>
            <fwb-table-head-cell>Color tag</fwb-table-head-cell>
            <fwb-table-head-cell>Decisions</fwb-table-head-cell>
            <fwb-table-head-cell>
                <span class="sr-only">Edit</span>
            </fwb-table-head-cell>
        </fwb-table-head>
        <fwb-table-body>
            <fwb-table-row v-for="act in actions" :key="act.id">
                <fwb-table-cell>{{ act.id }}</fwb-table-cell>
                <fwb-table-cell>{{ act.name }}</fwb-table-cell>
                <fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
                <fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
                <fwb-table-cell>
                    <button><EditIcon /></button>
                    <button><TrashBinIcon /></button>
                </fwb-table-cell>
            </fwb-table-row>
        </fwb-table-body>
    </fwb-table>
</template>