<script setup>
import { ref } from 'vue';
import { useAuthStore } from '../stores/auth';
import AppMenuItem from './AppMenuItem.vue';

const authStore = useAuthStore();

const model = ref([
    {
        label: 'Home',
        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
    },
    {
        label: 'CRM',
        items: [
            { label: 'Kontakte', icon: 'pi pi-fw pi-users', to: '/contacts' },
            { label: 'Projekte', icon: 'pi pi-fw pi-briefcase', to: '/projects' },
            { label: 'Tätigkeiten', icon: 'pi pi-fw pi-list-check', to: '/project-tasks' }
        ]
    },
    {
        label: 'Administration',
        visible: () => authStore.isAdmin,
        items: [
            { label: 'Projekt-Status', icon: 'pi pi-fw pi-tag', to: '/project-statuses' },
            { label: 'Benutzerverwaltung', icon: 'pi pi-fw pi-user-edit', to: '/users' },
            { label: 'Rollenverwaltung', icon: 'pi pi-fw pi-shield', to: '/roles' },
            { label: 'Einstellungen', icon: 'pi pi-fw pi-cog', to: '/settings' }
        ]
    }
]);
</script>

<template>
    <ul class="layout-menu">
        <template v-for="(item, i) in model" :key="item">
            <app-menu-item v-if="!item.separator && (!item.visible || item.visible())" :item="item" :index="i"></app-menu-item>
            <li v-if="item.separator" class="menu-separator"></li>
        </template>
    </ul>
</template>

<style lang="scss" scoped></style>
