<template>
	<Header class="sticky top-0 z-10 bg-white">
		<div class="flex items-center space-x-2">
			<Breadcrumbs :items="[{ label: $t('Settings'), route: '/settings' }]" />
		</div>
	</Header>
	<div>
		<TabsWithRouter :tabs="tabs">
			<template #tab-content="{ tab }">
				<router-view :key="tab.routeName"></router-view>
			</template>
		</TabsWithRouter>
	</div>
</template>

<script setup>
import Header from '../components/Header.vue';
import { Breadcrumbs } from 'jingrow-ui';
import { icon } from '../utils/components';
import TabsWithRouter from '../components/TabsWithRouter.vue';
import { getTeam } from '../data/team';
import { session } from '../data/session';
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);

let $team = getTeam();
let $session = session || {};

const tabs = [
	{
		label: $t('Profile'),
		icon: icon('user'),
		routeName: 'SettingsProfile'
	},
	{
		label: $t('Team'),
		icon: icon('users'),
		routeName: 'SettingsTeam',
		condition: () =>
			$team.pg?.user === $session.user ||
			$session.isTeamAdmin ||
			$session.isSystemUser
	},
	{
		label: $t('Permissions'),
		icon: icon('lock'),
		routeName: 'SettingsPermission',
		childrenRoutes: [
			'SettingsPermissionRoles',
			'SettingsPermissionRolePermissions'
		],
		condition: () =>
			$team.pg?.user === $session.user ||
			$session.isTeamAdmin ||
			$session.isSystemUser
	},
	{
		label: $t('Developer'),
		icon: icon('code'),
		routeName: 'SettingsDeveloper'
	}
];
</script>