<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { NCard, NList, NListItem, NTag, NThing } from 'naive-ui';
import { computed } from 'vue';
import AppLayout from '../layouts/AppLayout.vue';

const page = usePage();
const user = computed(
    () => (page.props.auth as { user?: { name?: string } })?.user,
);

const measures = [
    'Аутентификация пройдена (ИАФ.1)',
    'Второй фактор подтверждён (ИАФ.4)',
    'Срок действия пароля актуален (ИАФ.3)',
    'Обращение зарегистрировано в журнале аудита (РСБ.2)',
];
</script>

<template>
    <Head title="Кабинет" />

    <AppLayout>
        <NCard title="Защищённый кабинет">
            <NThing>
                <template #description>
                    Здравствуйте, <strong>{{ user?.name }}</strong
                    >. Доступ открыт после прохождения полного стека мер защиты.
                </template>
            </NThing>

            <NList class="mt-3">
                <NListItem v-for="m in measures" :key="m">
                    <template #prefix>
                        <NTag type="success" size="small" round>✓</NTag>
                    </template>
                    {{ m }}
                </NListItem>
            </NList>
        </NCard>
    </AppLayout>
</template>
