<!doctype html>
<html>

<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>

    <title>{{ title }}</title>
    <link rel='icon' type='image/png' href='{{ favicon }}'>

    <style>
        html,
        body {
            font-family: Inter;
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
        *, *:before, *:after {
            box-sizing: border-box;
        }
    </style>

    {{ each(options.stylesheets) }}
    <link rel='stylesheet' href='{{ @this }}'>
    {{ /each }}

    {{ each(options.screenStyles) }}
    {{ if(options.production) }}
    <link rel='stylesheet' href='/assets/{{ appId }}/{{ pageName }}{{ @this }}'>
    {{#else}}
    <link rel='stylesheet' href='/assets{{ @this }}'>
    {{ /if }}
    {{ /each }}

    {{ if(options.pageStyle) }}
    {{ if(options.production) }}
    <link rel='stylesheet' href='/assets/{{ appId }}/{{ pageName }}{{ pageStyle }}'>
    {{#else}}
    <link rel='stylesheet' href='/assets{{ pageStyle }}'>
    {{ /if }}
    {{ /if }}

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">

    {{ if(options.production) }}
    <script src='/assets/{{ appId }}/{{ pageName }}/clientFrontendDefinition.js'></script>
    <script src='/assets/{{ appId }}/{{ pageName }}/budibase-client.js'></script>
    {{#else}}
    <script src='/assets/clientFrontendDefinition.js'></script>
    <script src='/assets/budibase-client.js'></script>
    {{ /if }}
</head>

<body id="app">
    <script>
        loadBudibase();
    </script>
</body>

</html>