t.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #FFF;
        }
        .header {
            background-color: #6264A7;
            text-align: center;
            color: #F3F2F1;
            padding: 20px 5px;
            margin: 8px 2px;
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        }
        .teams {
            background-color: #F3F2F1;
            padding: 10px;
            margin: 8px 16px;
            font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
        }
        .teams:hover {
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <title>Welcome to JayA Teams Tab 0307</title>
    <mgt-login></mgt-login>
	<div class="header">
                <h1>5GN Staff Check IN/OUT<h1>
                <h2>Stay COVIDSAFE</h2>
            </div>
	<div>Users in the Wagga Wagga office</div>
	<mgt-get resource="/users/?$filter=extdaxtam48_StaffSignInOut/location eq 'Wagga Wagga'" scopes="User.Read.All">
        <template>
            <div class="teams" data-for="user in value">
                <mgt-person user-id="{{user.id}}" view="twoline" person-card="hover" show-presence="true"></mgt-person>
		    {{user.displayName}} - {{user.userPrincipalName}})
            </div>
        </template>
        <template data-type="loading">
            Loading...
        </template>
        <template data-type="error">
            {{ this }}
        </template>
    </mgt-get>
    <script>
        let provider;
        if (mgt.TeamsProvider.isAvailable) {
            provider = new mgt.TeamsProvider({
                clientId: "602b4970-f8a9-4846-9d69-550f7dce8690",
                authPopupUrl: "https://jantoney.github.io/TeamsOOFTab/a.html",
            });
        } else {
            provider = new mgt.MsalProvider({
                clientId: "602b4970-f8a9-4846-9d69-550f7dce8690",
                redirectUri: "https://jantoney.github.io/TeamsOOFTab/t.html"
            });
        }
        mgt.Providers.globalProvider = provider;
    </script>
</body>
</html>