<div id="content">
    <div class="drip-container">
        <div class="blobs">
            <div class="liquid"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
        </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
        <defs>
            <filter id="goog">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                <feBlend in="SourceGraphic" in2="goo" />
            </filter>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                <feBlend in="SourceGraphic" in2="goo"/>
            </filter>
        </defs>
    </svg>
    <div style="position: absolute; width: 250px; height: 250px; top: calc(50% - 125px); left: calc(50% - 125px); z-index: 10000;">
        {{#if spinnerFilename}}
            <div style="background-color: {{spinnerBgColor}}; border-radius: 240px; height: 240px; width: 240px; text-align: center; padding-top: 57.5px;">
                <img height="125" src="./images/dist/{{spinnerFilename}}" alt="spinner">
            </div>
        {{else}}
            <div class="spinner-wrapper">
                <div class="spinner-half-circle"></div>
                <div class="spinner-background">
                    <div class="spinner-logo-wrapper">
                        <img src="./images/fruit-slice.png" alt="fruit-slice" class="spinner-logo" />
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
</div>
<script src="./vs/loader.js" type="text/javascript" charset="utf-8"></script>
<script>
    setTimeout(() => {
        if (typeof window.monaco === 'undefined') {
            console.log('Failed to initialize editor');
            alert('Failed to load package. This is likely because webpack had some issues.');
            window.history.back();
        }
    }, 10000);

    window.jsVersion = '{{jsVersion}}';
</script>
<script src="./js/{{replJs}}.js" type="text/javascript" charset="utf-8"></script>