<template>
  <app-layout>

        <d-table :columns="columns" :row="categories" title="Category">
            <template v-slot:action>
                <Link :href="route('admin.catalog.category.create')" class="btn bg-green-500 hover:bg-green-700 hover:shadow-md text-white"><i class="fal fa-plus mr-2"></i> Add New</Link>
            </template>

            <template v-slot:tbody  title="After Production">
                <tr v-for="(item, k) in categories.data" :key="k">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.slug}}</td>
                    <td>{{item.position}}</td>
                    <td>{{item.updated_at}}</td>
                    <td v-if="item.status==1">Active</td>
                    <td v-else>Inctive</td>
                    <td align="center">
                        <Link :href="route('admin.catalog.category.edit', item)" class="btn-round bg-blue-500 active:bg-blue-800 hover:bg-blue-800 shadow hover:shadow-lg">
                            <i class="fad fa-pencil-alt text-white"></i>
                        </Link>
                        <!--<Link :href="route('admin.catalog.category.show', item)" class="btn-round bg-blue-500 active:bg-blue-800 hover:bg-blue-800 shadow hover:shadow-lg">
                            <i class="fad fa-eye text-white"></i>
                        </Link>-->
                    </td>
                </tr>
            </template>
        </d-table>

  </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import DTable from "@/components/Tables/Table.vue";
    import { Link } from '@inertiajs/inertia-vue3'
    export default {
        props:['categories'],

        components:{
            AppLayout,
            DTable,
            Link
        },

        mounted() {
        },

        data(){
            return{
                columns:[
                    { lable: "Id", field: "id", sort: true},
                    { lable: "Name", field: "name", sort: true},
                    { lable: "Slug", field: "slug", sort: true},
                    { lable: "Position", field:'position', sort: true},
                    { lable: "Last Update", field: "updated_at", sort: true},
                    { lable: "Status", field: "status", sort: false},
                    { lable: "Action",  sort: false, align:'center'},
                ]
            }
        },
    }
</script>
