<!doctype html>
<html lang="en" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <title>Assembly Instructions</title>
    <style>

        svg {
            max-width: 100%;
        }

        .blocklyText, .ace_editor {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
        }

        .blocklyText, .ace_editor {
            font-size: 1rem !important;
        }

        .blocklyTreeLabel {
            font-size: 1.25rem !important;
        }

        .blocklyCheckbox {
            fill: #ff3030 !important;
            text-shadow: 0px 0px 6px #f00;
            font-size: 17pt !important;
        }

        .ui.card .blocklyPreview {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 1em);
            max-height: calc(100% - 1em);
        }

        code {
            white-space: pre-wrap;
        }
        code.lang-config, code.lang-package { display:none; }

        code.lang-blocks::before,
        code.lang-sig::before,
        code.lang-block::before,
        code.lang-shuffle::before,
        code.lang-sim::before,
        code.lang-cards::before,
        code.lang-namespaces::before,
        code.lang-codecard::before {
            content: "...";
            position: absolute;
            top: calc(50% - 0.5em);
            left: calc(50% - 5em);
        }

        code.lang-blocks,
        code.lang-sig,
        code.lang-block,
        code.lang-shuffle,
        code.lang-sim,
        code.lang-cards,
        code.lang-namespaces,
        code.lang-codecard {
            color: transparent;
        }
    </style>
    <style type="text/css">
        @import "/cdn/semantic.css";
        @import "/cdn/icons.css";
    </style>
    <style>
        html {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 0;
            margin: 0;
            font-family: "Lucida Console", Monaco, monospace;
        }

        div {
            /*undo semantic UI*/
            box-sizing: content-box;
            line-height: normal;
        }

        img {
            border: 0;
        }
        /*TODO: Share CSS with main webpage*/

        .organization {
            position: absolute;
            bottom: 2rem;
            right: 2rem;
            height: 4rem;
        }

        h1 {
            font-size: 2em;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.87);
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
            display: block;
            text-align: center;
        }

        #front-panel .board-svg {
            position: absolute;
            left: 2rem;
            width: 300px;
            top: 16rem;
        }

        #proj-title {
            width: 100%;
            font-size: 70px;
            margin-top: 20px;
        }

        #proj-code {
            width: 300px;
            height: 400px;
            position: absolute;
            right: 2rem;
            top: 16rem;
        }
        #proj-code-container {
            width: 100%;
            height: 100%;
            font-size: 4px;
            overflow: hidden;
            display: none;
        }
        #proj-code-spinner {
            width: 100%;
        }

        .back-panel svg {
            position: relative;
            margin: 0 auto;
            left: inherit;
            bottom: -7px;
        }
    </style>
</head>
<body>
    <div id='loading' class="ui active inverted dimmer">
        <div class="ui large loader"></div>
    </div>
    <script>
        // This line gets patched up by the cloud
        var pxtConfig = null;
    </script>
    <script type="text/javascript" src="/cdn/lzma/lzma_worker-min.js"></script>
    <script type="text/javascript" src="/cdn/marked/marked.min.js"></script>
    <script type="text/javascript" src="/cdn/jquery.js"></script>
    <script type="text/javascript" src="/cdn/typescript.js"></script>
    <script type="text/javascript" src="/cdn/blockly/blockly_compressed.js"></script>
    <script type="text/javascript" src="/cdn/blockly/blocks_compressed.js"></script>
    <script type="text/javascript" src="/cdn/blockly/msg/js/en.js"></script>
    <script type="text/javascript" src="/cdn/pxtlib.js"></script>
    <script type="text/javascript" src="/cdn/pxtblocks.js"></script>
    <script type="text/javascript" src="/cdn/pxtsim.js"></script>
    <script type="text/javascript" src="/cdn/pxtrunner.js"></script>
    <script type="text/javascript" src="/cdn/semantic.js"></script>
    <script type="text/javascript" src="/embed.js"></script>
    <script type="text/javascript" src="/sim/common-sim.js"></script>
    <script type="text/javascript" src="/sim/sim.js"></script>
    <script type="text/javascript">
        (function () {
        ksRunnerReady(function() {
            var orgLogo = pxt.appTarget.appTheme.organizationLogo;
            if (orgLogo)
                $('#front-panel').append(
                    $('<img/>').attr('class', 'organization').attr('src', orgLogo)
                );
            var loading = document.getElementById('loading');
            pxsim.instructions.drawInstructions();
            $(loading).hide();
        });
        })();
    </script>

    <div id="front-panel" class="instr-panel">
        <h1 id="proj-title"></h1>

        <!--TODO: extract real code snapshot from PXT -->
        <div id="proj-code">
            <i id="proj-code-spinner" class="spinner loading icon"></i>
            <div id="proj-code-container">
            </div>
        </div>
    </div>
</body>
</html>