<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>${prefix} | Eclipse ESCET</title>
        <style type="text/css">
            /* ESCET theme styles. */
            html, body {
                margin: 0;
                background-color: #fff7df; /* ESCET website yellow. */
                font-family: "Segoe UI";
                line-height: 1.5;
                height: 100%;
            }

            a {
                color: #cc9a06;
            }

            a:hover {
                color: black;
            }

            input[type=button] {
                background-color: #ffc107;
                border: 0;
                box-shadow: none;
                padding: .375rem .75rem;
                border-radius: .25rem;
                cursor: pointer;
            }

            input[type=button]:hover {
                background-color: #ffda6d;
            }
        </style>
        <style type="text/css">
            body {
                text-align: center;
            }

            #flex-container {
                display: flex;
                flex-flow: column;
                height: 100%;
            }

            #content {
                flex: 1 1 auto;
                overflow: auto;
            }

            #log-pane {
                border-top: 2px solid #ddd;
                min-height: 20px;
                background: #fafafa;
            }
            #log-pane .div-show-hide-btn {
                height: 42px;
                padding-top: 5px;
                text-align: right;
                width: 100%;
                border-bottom: 1px solid #ddd;
            }

            #log-pane .div-show-hide-btn span {
                margin-right: 10px;
            }
            #log-pane #div-txt-area-background {
                height: calc(100% - 57px);
                background: #fff;
            }
            #log-pane .div-txt-area {
                margin: 0 10px;
                height: 100%;
            }
            #log-pane .div-txt-area #log-output {
                resize: none;
                height: 100%;
                width: 100%;
                overflow: auto;
            }
            #log-pane .div-txt-area #log-output,
            #log-pane .div-txt-area #log-output * {
                border: 0;
                margin: 0;
                padding: 0;
                background: white;
                font-family: monospace;
                text-align: left;
                text-wrap: nowrap;
                white-space: pre;
                color: black;
            }
            #log-pane .div-txt-area #log-output * {
                height: auto;
            }
            #log-pane .div-txt-area #log-output .warning {
                color: rgb(150, 125, 0);
            }
            #log-pane .div-txt-area #log-output .error {
                color: red;
            }
            #log-pane #div-log-pane-footer {
                background: #fafafa;
                border-top: 1px solid #ddd;
            }

            .dropdown {
                position: relative;
                display: inline-block;
            }
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #fafafa;
                border: solid 1px #ddd;
                box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }
            .dropdown-content .dropdown-item {
                color: black;
                text-align: left;
                text-wrap: nowrap;
                margin: 0;
                padding: 0;
                display: flex;
            }
            .dropdown-content .dropdown-item.dropdown-item-checked label {
                padding: 10px 16px;
                display: inline-flex;
                flex-grow: 1;
            }
            .dropdown-content .dropdown-item.dropdown-item-checked input {
                margin: 0;
                padding: 0;
            }
            .dropdown-content .dropdown-item.dropdown-item-checked .dropdown-item-checked-text {
                padding-left: 8px;
            }
            .dropdown-content .dropdown-item:hover {
                background-color: #eee;
            }
            .dropdown.expanded .dropdown-content {
                display: block;
            }

            .collapsed #log-pane {
                height: 48px;
                flex: none;
            }
            .expanded #log-pane {
                height: 40%;
                flex: 1 1 auto;
            }
            .collapsed #content {
                resize: none;
            }
            .expanded #content {
                resize: vertical;
            }

            .collapsed #div-txt-area-background,
            .collapsed #div-log-pane-footer {
                display: none;
            }
            .expanded #div-txt-area-background,
            .expanded #div-log-pane-footer {
                display: inherit;
            }

            #run-frequency {
                width: 250px;
            }

            svg {
                background: white;
                margin-bottom: 8px;
            }

            .svg-hidden {
                visibility: hidden;
                display: none;
            }

            .svg-visible {
                visibility: visible;
                display: block;
            }

            /* Defaults for SVG text elements, for same size and style as used by the CIF simulator. */
            .text {
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                font-stretch: normal;
                font-size: 11.8014px;
                font-family: "Arial";
            }

${html-svg-in-css}
        </style>
        <script type="text/javascript">
${html-javascript-utils-placeholder}
        </script>
        <script type="text/javascript">
${html-javascript-class-placeholder}
        </script>
        <script type="text/javascript">
            var ${prefix};

            function onLoad() {
                ${prefix} = new ${prefix}_class();
                reset();
                start();
            }

            function applySvgCopy(wrapId, elemId, pre, post) {
                // This implementation is inspired by a method from Eclipse ESCET:
                // 'org.eclipse.escet.common.svg.SvgUtils.copy'.
                var escapedWrapId = CSS.escape(wrapId);
                var escapedElemId = CSS.escape(elemId);
                var elem = document.querySelector(${prefix}Utils.fmt("#%s #%s", escapedWrapId, escapedElemId));
                var copy = elem.cloneNode(true);
                applySvgCopyRename(copy, pre, post);
                elem.parentNode.insertBefore(copy, elem);
            }

            function applySvgCopyRename(elem, pre, post) {
                // This implementation is inspired by a method from Eclipse ESCET:
                // 'org.eclipse.escet.common.svg.SvgUtils.renameElements'.
                elem.setAttribute('id', pre + elem.getAttribute('id') + post);
                for (var i = 0; i < elem.children.length; i++) {
                    var child = elem.children[i];
                    applySvgCopyRename(child, pre, post);
                }
            }

            function applySvgMove(wrapId, elemId, x, y) {
                // This implementation is inspired by a method from Eclipse ESCET:
                // 'org.eclipse.escet.common.svg.SvgUtils.move'.
                var escapedWrapId = CSS.escape(wrapId);
                var escapedElemId = CSS.escape(elemId);
                var root = document.querySelector(${prefix}Utils.fmt("#%s > svg", escapedWrapId));
                var elem = document.querySelector(${prefix}Utils.fmt("#%s #%s", escapedWrapId, escapedElemId));
                var rootBounds = root.getBoundingClientRect();
                var elemBounds = elem.getBoundingClientRect();
                var nx = elemBounds.x - rootBounds.x;
                var ny = elemBounds.y - rootBounds.y;
                var glob = elem.getScreenCTM();
                glob = glob.translate(nx, ny);
                var a = glob.a;
                var b = glob.b;
                var c = glob.c;
                var d = glob.d;
                var dbca = d - b * c / a;
                var dy = (y - ny - b * (x - nx) / a) / dbca;
                var dx = (x - nx) / a - c / a * dy;
                var transform = elem.getAttribute('transform');
                if (transform === null) {
                    transform = '';
                }
                if (transform.length > 0) {
                    transform += ' ';
                }
                transform += ${prefix}Utils.fmt("translate(%f,%f)", dx, dy);
                elem.setAttribute('transform', transform);
            }

            function toggleStartStop() {
                if (${prefix}.playing) {
                    stop();
                } else {
                    start();
                }
            }

            function start() {
                if (!${prefix}.playing) {
                    ${prefix}.log('start');
                    var btn = document.getElementById('start-stop-toggle');
                    btn.value = 'Stop';
                    ${prefix}.start();
                }
            }

            function stop() {
                if (${prefix}.playing){
                    ${prefix}.log('stop');
                    var btn = document.getElementById('start-stop-toggle');
                    btn.value = 'Start';
                    ${prefix}.stop();
                }
            }

            function reset() {
                stop();
                ${prefix}.reset();
                clearLog();
            }

            function updateFrequency() {
                // Update frequency.
                var range = document.getElementById('run-frequency');
                ${prefix}.frequency = range.value;

                // Update frequency UI.
                document.getElementById('run-frequency-output').value = range.value;
            }

            function clearLog() {
                document.getElementById('log-output').innerHTML = '';
            }

            function toggleSettings(btn) {
                var elem = document.getElementById('settings-dropdown');
                if (elem.classList.contains('expanded')) {
                    elem.classList.remove('expanded');
                    elem.classList.add('collapsed');
                } else {
                    elem.classList.remove('collapsed');
                    elem.classList.add('expanded');
                }
            }

            function toggleLogStates(menuItem) {
                ${prefix}.doStateOutput = menuItem.checked;
            }

            function toggleLogTransitions(menuItem) {
                ${prefix}.doTransitionOutput = menuItem.checked;
            }

            function showHide(btn) {
                var elem = document.getElementById('flex-container');
                if (elem.classList.contains('expanded')) {
                    elem.classList.remove('expanded');
                    elem.classList.add('collapsed');
                    btn.value = 'Show';
                } else {
                    elem.classList.remove('collapsed');
                    elem.classList.add('expanded');
                    btn.value = 'Hide';
                }
            }

            function toggleSVG(elemId) {
                var elem = document.getElementById(elemId);
                if (elem.classList.contains('svg-visible')) {
                    elem.classList.remove('svg-visible');
                    elem.classList.add('svg-hidden');
                } else {
                    elem.classList.remove('svg-hidden');
                    elem.classList.add('svg-visible');
                }
            }

            function downloadLog() {
                // Get log content.
                var modelName = document.getElementById('model-name').innerHTML;
                var content = document.getElementById('log-output').textContent;

                // Create URL object with log content.
                var blob = new Blob([content], {type: 'plain/text'});
                var url = URL.createObjectURL(blob);

                // Create a new invisible 'a' element that serves as the download link.
                var link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.download = modelName + '.' + new Date().toISOString() + '.log.txt';

                // Click the link to start the download, after properly adding the link to the document.
                document.body.appendChild(link);
                link.click();

                // Clean up the URL and temporary link element.
                URL.revokeObjectURL(url);
                link.remove();
            }
        </script>
    </head>
    <body onload="onLoad()">
        <div class="expanded" id="flex-container">
            <div id="content">
                <h1 id="model-name">${prefix}</h1>
${html-svg-content}
            </div>
            <div id="log-pane">
                <div class="div-show-hide-btn">
                    <span>
${html-svg-toggles}
                        <input id="run-frequency" type="range" min="${html-frequency-min}" max="${html-frequency-max}"
                                list="run-frequency-markers" oninput="updateFrequency(); return false;"/>
                        <output id="run-frequency-output" for="run-frequency"></output>
                        <label for="run-frequency"> Hz</label>
                        <datalist id="run-frequency-markers">
${html-frequency-markers}
                        </datalist>
                        <div class="dropdown" id="settings-dropdown" class="collapsed">
                            <input value="Settings" type="button" onclick="toggleSettings(); return false;"/>
                            <div class="dropdown-content">
                                <div class="dropdown-item dropdown-item-checked">
                                    <label for="log-states">
                                        <input type="checkbox" id="log-states" name="log-states"
                                                onchange="toggleLogStates(this)"/>
                                        <span class="dropdown-item-checked-text">Log states</span>
                                    </label>
                                </div>
                                <div class="dropdown-item dropdown-item-checked">
                                    <label for="log-transitions">
                                        <input type="checkbox" id="log-transitions" name="log-transitions"
                                                onchange="toggleLogTransitions(this)" checked/>
                                        <span class="dropdown-item-checked-text">Log transitions</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <input id="start-stop-toggle" value="Stop" type="button"
                                onclick="toggleStartStop(); return false;"/>
                        <input value="Reset" type="button" onclick="reset(); return false;"/>
                        <input value="Download log" type="button" onclick="downloadLog(); return false;"/>
                        <input value="Hide" type="button" onclick="showHide(this); return false;"/>
                    </span>
                </div>
                <div id="div-txt-area-background">
                    <div class="div-txt-area">
                        <div id="log-output"></div>
                    </div>
                <div>
                <div id="div-log-pane-footer"></div>
            </div>
        </div>
    </body>
</html>
