
<script>
	import {Meteor} from "meteor/meteor";
	import {Route, router} from 'tinro';
	import {useTracker} from 'meteor/rdb:svelte-meteor-data';
	import {Roles} from 'meteor/alanning:roles';
	import Chromebooks from './Chromebooks.svelte';
	import Users from './Users.svelte';
	import ListUsers from './ListUsers.svelte';
	import Admin from './Admin.svelte';
	import Announcer from './Announcer.svelte';

	// When the URL changes, run the code... in this case to scroll to the top.
	router.subscribe(_ => window.scrollTo(0, 0));

	$: currentUser = useTracker(() => Meteor.user());
	$: canManageLaptops = false;
	$: isAdmin = false;

	Tracker.autorun(() => {
		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
		let user = Meteor.user();
		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
	});
	function performLogin() {
		//Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
		Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
			if (err) {
				console.log(err);
			} else {
				//console.log("Logged in");
			}
		})
	}
	function performLogout() {
		Meteor.logout();
	}

</script>

<Announcer/>

<div class="container">
	<header class="row">
		<div class="col-12 logoContainer">
			<img class="logo" src="/images/logo.svg"/>
			<div class="login">
				{#if !$currentUser}
					<button type="button" role="button" on:click={performLogin}>Login</button>
				{:else}
					<button type="button" role="button" on:click={performLogout}>Logout</button>
				{/if}
			</div>
		</div>
		<div class="col-12 center" style="margin-bottom: 0"><h1 style="margin-bottom: 0">District Central</h1></div>
		<div class="col-12 center">
			<div class="nav-separator"></div>
		</div>
		<nav class="col-12 center">
			<a href="/">Home</a>
			{#if canManageLaptops}
				<a href="/chromebooks">Chromebooks</a>
			{/if}
			{#if canManageLaptops}
				<a href="/users">Users</a>
			{/if}
			{#if isAdmin}
				<a href="/admin">Admin</a>
			{/if}
			<!--			<a href="/TestTable">Test</a>-->
			<!--			<a href="/ListUsers">List Users</a>-->
		</nav>
	</header>
</div>

<Route path="/">
	<div class="container">
		<div class="row">
			TODO: Some statistics and such.
		</div>
	</div>
</Route>
<Route path="/ListUsers">
	<ListUsers/>
</Route>
<Route path="/admin">
	{#if isAdmin}
		<Admin/>
	{/if}
</Route>
<Route path="/chromebooks/*">
	{#if canManageLaptops}
		<Chromebooks/>
	{:else}
		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
	{/if}
</Route>
<Route path="/users/*">
	{#if isAdmin}
		<Users/>
	{:else}
		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
	{/if}
</Route>

<style>
    ...
</style>
