<script setup>
import { Link } from "@inertiajs/vue3"
import BaseButton from "@/Components/BaseButton.vue"
import BaseButtons from "@/Components/BaseButtons.vue"
import {
    mdiSquareEditOutline,
    mdiTrashCan,
} from "@mdi/js"

const props = defineProps({
    item: {
        type: Object,
        default: () => ({}),
    },
    menu: {
        type: Object,
        default: () => ({}),
    },
    can: {
        type: Object,
        default: () => ({}),
    },
    level: {
        type: Number,
        default: 0
    },
})
</script>

<template>
    <tr :key="item.id">
        <td data-label="Name">
            <div :style="{ 'margin-left': level * 20 + 'px' }">{{ item.name }}</div>
        </td>
        <td data-label="Description">
            {{ item.description }}
        </td>
        <td data-label="Enabled">
            {{ item.enabled }}
        </td>
        <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
            <BaseButtons type="justify-start lg:justify-end" no-wrap>
                <BaseButton v-if="can.edit" :route-name="route('menu.item.edit', { menu: menu.id, item: item.id })"
                    color="info" :icon="mdiSquareEditOutline" small />
                <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(item.id)" />
            </BaseButtons>
        </td>
    </tr>
    <template v-for="item in item.children">
        <MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
    </template>
</template>