<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

        <title>{{ flags.appName }}</title>
        {{# cssUrls }}
        <link rel="stylesheet" href="{{.}}"/>
        {{/ cssUrls }}
        {{# jsUrls }}
        <script type="application/javascript" src="{{.}}"></script>
        {{/ jsUrls}}

        {{{customHead}}}

    </head>

    <body id="sharry-app">
        <!-- everything in here gets replaced by elm; include the body tag itself -->

        <script type="application/javascript">
         var sharryFlags = {{{flagsJson}}};
         var storedAccount = localStorage.getItem('account');
         var lang = localStorage.getItem('language');
         var theme =
             (function() {
                 var initialTheme = sharryFlags.initialTheme;
                 var storageTheme = localStorage.getItem('uiTheme');
                 return storageTheme ? storageTheme : initialTheme;
             })();
         var account = storedAccount ? JSON.parse(storedAccount) : null;
         var elmFlags = {
             "account": account,
             "language": lang,
             "uiTheme": theme,
             "config": sharryFlags
         };
        </script>
        <script type="application/javascript" src="{{appExtraJs}}"></script>
        <script>
         if('serviceWorker' in navigator) {
             navigator.serviceWorker
                      .register('/sw.js')
                      .then(function() { console.log("Service Worker Registered"); });
         }
        </script>
    </body>

</html>
