<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .birdseye-iframe {
            width: 100%;
            height: 480px;
        }

        .birdseye-iframe > iframe {
            width: 100%;
            height: 98%;
        }

        .birdseye-iframe-resizer {
            height: 10px;
            width: 100%;
            cursor: ns-resize;
            background: lightgrey url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAFCAYAAABM6GxJAAAD8GlDQ1BJQ0MgUHJvZmlsZQAAOI2NVd1v21QUP4lvXKQWP6Cxjg4Vi69VU1u5GxqtxgZJk6XpQhq5zdgqpMl1bhpT1za2021Vn/YCbwz4A4CyBx6QeEIaDMT2su0BtElTQRXVJKQ9dNpAaJP2gqpwrq9Tu13GuJGvfznndz7v0TVAx1ea45hJGWDe8l01n5GPn5iWO1YhCc9BJ/RAp6Z7TrpcLgIuxoVH1sNfIcHeNwfa6/9zdVappwMknkJsVz19HvFpgJSpO64PIN5G+fAp30Hc8TziHS4miFhheJbjLMMzHB8POFPqKGKWi6TXtSriJcT9MzH5bAzzHIK1I08t6hq6zHpRdu2aYdJYuk9Q/881bzZa8Xrx6fLmJo/iu4/VXnfH1BB/rmu5ScQvI77m+BkmfxXxvcZcJY14L0DymZp7pML5yTcW61PvIN6JuGr4halQvmjNlCa4bXJ5zj6qhpxrujeKPYMXEd+q00KR5yNAlWZzrF+Ie+uNsdC/MO4tTOZafhbroyXuR3Df08bLiHsQf+ja6gTPWVimZl7l/oUrjl8OcxDWLbNU5D6JRL2gxkDu16fGuC054OMhclsyXTOOFEL+kmMGs4i5kfNuQ62EnBuam8tzP+Q+tSqhz9SuqpZlvR1EfBiOJTSgYMMM7jpYsAEyqJCHDL4dcFFTAwNMlFDUUpQYiadhDmXteeWAw3HEmA2s15k1RmnP4RHuhBybdBOF7MfnICmSQ2SYjIBM3iRvkcMki9IRcnDTthyLz2Ld2fTzPjTQK+Mdg8y5nkZfFO+se9LQr3/09xZr+5GcaSufeAfAww60mAPx+q8u/bAr8rFCLrx7s+vqEkw8qb+p26n11Aruq6m1iJH6PbWGv1VIY25mkNE8PkaQhxfLIF7DZXx80HD/A3l2jLclYs061xNpWCfoB6WHJTjbH0mV35Q/lRXlC+W8cndbl9t2SfhU+Fb4UfhO+F74GWThknBZ+Em4InwjXIyd1ePnY/Psg3pb1TJNu15TMKWMtFt6ScpKL0ivSMXIn9QtDUlj0h7U7N48t3i8eC0GnMC91dX2sTivgloDTgUVeEGHLTizbf5Da9JLhkhh29QOs1luMcScmBXTIIt7xRFxSBxnuJWfuAd1I7jntkyd/pgKaIwVr3MgmDo2q8x6IdB5QH162mcX7ajtnHGN2bov71OU1+U0fqqoXLD0wX5ZM005UHmySz3qLtDqILDvIL+iH6jB9y2x83ok898GOPQX3lk3Itl0A+BrD6D7tUjWh3fis58BXDigN9yF8M5PJH4B8Gr79/F/XRm8m241mw/wvur4BGDj42bzn+Vmc+NL9L8GcMn8F1kAcXgSteGGAAAAKklEQVQYGWNgoBAwgvT7+Pj8J8ecLVu2gPWToxeuB8MEQq6hiq1w64EMAP0PCAOjqzu6AAAAAElFTkSuQmCC") no-repeat center;
        }
    </style>
</head>
<body>

<div class="birdseye-iframe" id="{{ container_id }}">

    <div class="birdseye-iframe-resizer" onmousedown="birdseyeIframeInitDrag(this, event)"></div>
</div>

<script>
    // Based on https://stackoverflow.com/a/8960307/2482744
    function birdseyeIframeInitDrag(resizer, event) {
        var startY = event.clientY;
        var container = resizer.parentNode;
        var startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10);
        var iframe = container.getElementsByTagName('iframe')[0];
        iframe.style['pointer-events'] = 'none';

        function doDrag(e) {
            container.style.height = (startHeight + Math.max(10, e.clientY) - startY) + 'px';
        }

        function stopDrag() {
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
            iframe.style['pointer-events'] = 'auto';
        }

        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    }

    (function () {
        var url;
        {% if url %}
            url = {{ url | tojson }};
        {% else %}
            var loc = window.location;
            url = loc.protocol + "//" + loc.hostname + ':{{ port }}';
        {% endif %}
        url += '/ipython_call/{{ call_id }}';
        var container = document.getElementById('{{ container_id }}');
        container.innerHTML = '<iframe src="' + url + '"></iframe>' + container.innerHTML;
    })()
</script>

</body>
</html>
