<head>
    <!-- Site Info -->
    <title>{{ fullName }}</title>

    <!-- Site Metainfo -->
    {{#each config.metaList }}
    {{{ text }}}
    {{/each }}

    <!-- Load the CSS for site overlay -->
    {{#each config.siteStyleList }}
    {{{ text }}}
    {{/each }}
</head>
<body class="loading">

    <!-- App Sidebar-->
    <div class="ui sidebar inverted vertical menu">
        <div id="{{ idName}}-sidebar" class="app sidebar">
            {{{ sidebar._html }}}
        </div>
    </div>

    <!-- App Page -->
    <div class="pusher">
        <div id="{{ idName}}-page" class="app page">
            {{{ page._html }}}
        </div>
    </div>

    <!-- TamedJs Config -->
    <div id="tamed-js-area">
        <div class="ui red label"><i class="warning circle icon"></i>Dev Mode</div>
        
        <!-- Site Styles -->
        <div id="style-area">
            <div id="style-area-static">
                {{#each config.styleList }}
                {{{ text }}}
                {{/each }}
            </div>
            <div id="style-area-dynamic">
            </div>
        </div>

        <!-- Site Scripts -->
        <div id="script-area">
            <div id="script-area-static">
                {{#each config.scriptList }}
                {{{ text }}}
                {{/each }}
                <script src="/reload/reload.js"></script>
            </div>
            <div id="script-area-dynamic"></div>
        </div>

        <!-- Dev Tools and Console -->
        <div id="tamed-js-dev-tools">
            <div id="tm-dev-tools"></div>
            <div id="tm-console"></div>
        </div>
    </div>
</body>
