<!DOCTYPE html>
<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">

        <link rel="apple-touch-icon" sizes="57x57" href="{{{faviconBase}}}/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="{{{faviconBase}}}/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="{{{faviconBase}}}/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="{{{faviconBase}}}/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="{{{faviconBase}}}/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="{{{faviconBase}}}/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="{{{faviconBase}}}/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="{{{faviconBase}}}/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="{{{faviconBase}}}/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="{{{faviconBase}}}/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="{{{faviconBase}}}/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="{{{faviconBase}}}/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="{{{faviconBase}}}/favicon-16x16.png">
        <link rel="manifest" href="{{{faviconBase}}}/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="{{{faviconBase}}}/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">

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

    </head>

    <body id="docspell-app">
        <!-- everything in here gets replaced by elm, including the body tag -->

        <script type="application/javascript">
         var storedAccount = localStorage.getItem('account');
         var account = storedAccount ? JSON.parse(storedAccount) : null;
         if (account && !account.hasOwnProperty("requireSecondFactor")) {
             // this is required for transitioning; elm fails to parse the account
             account["requireSecondFactor"] = false;
         }

         // hack to guess if the browser can display PDFs natively. It
         // seems that almost all browsers allow to query the
         // navigator.mimeTypes array, except firefox.
         var ua = navigator.userAgent.toLowerCase();
         var pdfSupported = false;
         if (ua.indexOf("firefox") > -1) {
             pdfSupported = ua.indexOf("mobile") == -1;
         } else {
             pdfSupported = "application/pdf" in navigator.mimeTypes;
         }

         var elmFlags = {
             "account": account,
             "pdfSupported": pdfSupported,
             "innerWidth": window.innerWidth,
             "config": {{{flagsJson}}}
         };
        </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>
