<script setup lang="ts">
import { Head } 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';

defineProps({
    user: {
        type: Object,
        default: () => ({}),
    },
    roles: {
        type: Object,
        default: () => ({}),
    },
    userHasRoles: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<template>
    <LayoutAuthenticated :user="user">
        <Head title="View user" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="View user" main>
                <BaseButton
                    :route-name="stardust.route('user.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">Login</td>
                            <td data-label="Login">
                                {{ user.login }}
                            </td>
                        </tr>
                        <tr>
                            <td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Email</td>
                            <td data-label="Email">
                                {{ user.email }}
                            </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(user.created_at).toLocaleString() }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
