<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButton from '@/Components/BaseButton.vue';
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
    role: {
        type: Object,
        default: () => ({}),
    },
    permissions: {
        type: Object,
        default: () => ({}),
    },
    roleHasPermissions: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<template>
    <LayoutAuthenticated>
        <Head title="View role" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="View role" main>
                <BaseButton
                    :route-name="stardust.route('role.index')"
                    :icon="mdiArrowLeftBoldOutline"
                    label="Back"
                    color="white"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>
            <CardBox class="mb-6">
                <table>
                    <tbody>
                        <tr>
                            <td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Name</td>
                            <td data-label="Name">
                                {{ role.name }}
                            </td>
                        </tr>
                        <tr>
                            <td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Name</td>
                            <td data-label="Description">
                                {{ role.description }}
                            </td>
                        </tr>
                        <tr>
                            <td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Created</td>
                            <td data-label="Created">
                                <!-- {{ new Date(role.created_at).toLocaleString() }} -->
                                {{ role.created_at }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
