<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import AssetTypes from "/imports/ui/Admin/AssetTypes.svelte";
	import Sites from "/imports/ui/Admin/Sites.svelte";
	import Students from "/imports/ui/Admin/Students.svelte";
	import Staff from "/imports/ui/Admin/Staff.svelte";

	let activeTab = null;
</script>

<div class="container">
	<TabBar tabs={[{id:'sites', label:'Sites'}, {id:'students', label:'Students'}, {id:'staff', label:'Staff'}, {id:'assetTypes', label:'Asset Types'}]} minWidth let:tab bind:active={activeTab}>
		<Tab {tab}>
			<Label>{tab.label}</Label>
		</Tab>
	</TabBar>
	{#if activeTab && activeTab.id === 'sites'}
		<Sites></Sites>
	{:else if activeTab && activeTab.id === 'students'}
		<Students></Students>
	{:else if activeTab && activeTab.id === 'staff'}
		<Staff></Staff>
	{:else if activeTab && activeTab.id === 'assetTypes'}
		<AssetTypes></AssetTypes>
	{/if}
</div>

<style>
</style>