<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ComputedRef } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
// import Pagination from '@/Components/Admin/Pagination.vue';
// import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
// import CardBoxModal from '@/Components/CardBoxModal.vue';

// const isModalDangerActive = ref(false);
// const deleteId = ref();

defineProps({
    licenses: {
        type: Object,
        default: () => ({}),
    },
    // filters: {
    //     type: Object,
    //     default: () => ({}),
    // },
    can: {
        type: Object,
        default: () => ({}),
    },
});

const flash: ComputedRef<any> = computed(() => {
    // let test = usePage();
    // console.log(test);
    return usePage().props.flash;
});


</script>

<template>

    <LayoutAuthenticated>

        <Head title="Licenses" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main>
                <!-- <BaseButton
                    v-if="can.create"
                    :route-name="stardust.route('settings.role.create')"
                    :icon="mdiPlus"
                    label="Add"
                    color="info"
                    rounded-full
                    small
                /> -->
            </SectionTitleLineWithButton>
            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                {{ flash.message }}
            </NotificationBar>
            <CardBox class="mb-6" has-table>
            </CardBox>
            <CardBox class="mb-6" has-form-data>
                <table>
                    <thead>
                        <tr>
                            <th>
                                <!-- <Sort label="Name" attribute="name" /> -->
                                Name
                            </th>
                            <th>
                                <!-- <Sort label="Sort Order" attribute="sort_order" /> -->
                                Sort Order
                            </th>
                            <th v-if="can.edit">Actions</th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="license in licenses" :key="license.id">
                            <td data-label="Name">
                                <!-- <Link
                                    :href="stardust.route('settings.role.show', [role.id])"
                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
                                >
                                    {{ license.name }}
                                </Link> -->
                                {{ license.name }}
                            </td>
                            <td data-label="Description">
                                {{ license.sort_order }}
                            </td>

                            <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                    <BaseButton v-if="license.active"
                                        :route-name="stardust.route('settings.license.down', [license.id])"
                                        color="warning" :icon="mdiSquareEditOutline" label="deactivate" small />
                                    <BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
                                        color="success" :icon="mdiSquareEditOutline" label="activate" small />
                                </BaseButtons>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- <div class="py-4">
					<Pagination v-bind:data="roles.meta" />
				</div> -->
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
