<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>
