<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="white"/>

    <!-- Meta Data for Search Engines -->
    <meta title="Nexus | <%= shortName %>">
    <meta name="description" content="Nexus" />

    <!-- Meta Data for open graph(facebook & co) -->
    <meta property="og:locale" content="de_DE" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Nexus | <%= shortName %>" />
    <meta property="og:description" content="Nexus" />
    <meta property="og:url" content="<%= appDomain %>" />
    <meta property="og:site_name" content="Nexus" />

    <!-- Favicons -->
    <link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('icon/favicon.ico') %>">
    <link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('icon/favicon.svg') %>">
    <link rel="apple-touch-icon" sizes="180x180" href="<%= getPrivateUrl('icon/apple-touch-icon.png') %>">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= getPrivateUrl('icon/favicon-32x32.png') %>">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= getPrivateUrl('icon/favicon-16x16.png') %>">
    <link rel="manifest" href="<%= getUrl(name + '.webmanifest') %>">
    <link rel="mask-icon" href="<%= getPrivateUrl('icon/safari-pinned-tab.svg') %>" color="#e4154b">
    <meta name="theme-color" content="#ffffff">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">

    <!-- Loading spinner -->
    <script type="module">
        import {Spinner} from '<%= getPrivateUrl("org_spinner.js") %>';
        customElements.define('org-spinner', Spinner);
    </script>

    <!-- App bundles-->
    <script type="module" src="<%= getUrl(name + '.js') %>"></script>

    <!-- Prevent Chrome/Edge from suggesting to translate the page -->
    <meta name="google" content="notranslate">

    <!-- Font related CSS -->
    <style>
        @import "<%= getPrivateUrl('fonts/nunito-sans/300.css') %>";
        @import "<%= getPrivateUrl('fonts/nunito-sans/300-italic.css') %>";
        @import "<%= getPrivateUrl('fonts/nunito-sans/600.css') %>";
        @import "<%= getPrivateUrl('fonts/nunito-sans/600-italic.css') %>";

        html {
            font-family: 'Nunito Sans', 'Calibri', 'Arial', 'sans-serif';
            line-height: 1.4em;
            font-weight: 400;
            margin: 0;
        }

        body {
            margin: 0;
        }

        #spinner{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .light-theme{
            --dbp-override-background: white;
            --dbp-override-content: #222120;

            --dbp-override-primary: #3775c1;
            --dbp-override-on-primary-surface: white;
            --dbp-override-secondary: #222120;
            --dbp-override-secondary-surface: white;
            --dbp-override-on-secondary-surface: #222120;
            --dbp-override-secondary-surface-border-color: #222120;

            --dbp-override-muted: #767676;
            --dbp-override-accent: #9e1e4d;
            --dbp-override-info: #38808a;
            --dbp-override-success: #338555;
            --dbp-override-success-surface: #5ec189;
            --dbp-override-on-success-surface: #222120;
            --dbp-override-warning: #bf8808;
            --dbp-override-warning-surface: #f9cc66;
            --dbp-override-on-warning-surface: #222120;
            --dbp-override-danger: #cc3232;

            --dbp-override-border: 1px solid #222120;
        }

        .dark-theme{
            --dbp-override-background: #222120;
            --dbp-override-content: white;

            --dbp-override-primary: #398BDA;
            --dbp-override-on-primary-surface: white;

            --dbp-override-secondary: white;
            --dbp-override-secondary-surface: #222120;
            --dbp-override-on-secondary-surface: white;
            --dbp-override-secondary-surface-border-color: white;

            --dbp-override-muted: #8D8B8B;
            --dbp-override-accent: #bc3a62;
            --dbp-override-info: #3793A5;
            --dbp-override-success: #5ec189;
            --dbp-override-warning: #f9cc66;
            --dbp-override-danger: #EB534E;

            --dbp-override-border: 1px solid white;
        }
    </style>

    <!-- Preloading/Preconnecting -->
    <link rel="preconnect" href="<%= entryPointURL %>">
    <link rel="preconnect" href="<%= keyCloakBaseURL %>">
</head>

<body>
<<%= name %>
    provider-root
    lang="de" entry-point-url="<%= entryPointURL %>"
    src="<%= getUrl(name + '.topic.metadata.json') %>"
    base-path="<%= getUrl('') %>"
    keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "<%= keyCloakRealm %>", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}'
    git-info='<%= buildInfo.info %>'
    build-url='<%= buildInfo.url %>'
    build-time='<%= buildInfo.time %>'
    env='<%= buildInfo.env %>'
    html-overrides="global-override"
    themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
            {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'
    default-layout="standard"
    no-welcome-page
    app-name='<%= name %>'
><tug-spinner id='spinner'></tug-spinner>
</<%= name %>>

<template id="global-override">
    <template id="<%= name %>">
        <div slot="name">
            <a data-nav="activity-search">
                Nexus <br/>
                digital blueprint
            </a>
        </div>
        <div slot="logo">
            <style>
                .logo-dark, .light-theme .logo-dark, .dark-theme .logo-light{
                    display: none;
                }

                .logo-light, .light-theme .logo-light, .dark-theme .logo-dark{
                    display: block;
                }

                .wrapper {
                    display: flex;
                    justify-content: flex-end;
                    padding: 0 1em 0 0;
                }
            </style>
            <div class="wrapper">
                <img class="logo-light" style="height: 80px" src="<%= getPrivateUrl('dbp_logo_small_on_white.svg') %>" alt="digital blueprint - A University toolbox logo">
                <img class="logo-dark" style="height: 80px" src="<%= getPrivateUrl('dbp_logo_small_on_black.svg') %>" alt="digital blueprint - A University toolbox logo">
            </div>
        </div>
    </template>
</template>


<!-- Error handling for too old browsers -->
<script src="<%= getPrivateUrl('browser-check.js') %>" defer></script>
<noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>
</body>
</html>