<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Satyrn</title>
    <link rel="stylesheet" href="../static/css/jquery-ui.css">
    <link rel="stylesheet" href="../static/css/index.style.css">
    <link rel="stylesheet" href="../static/css/gh-buttons.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/font-awesome/css/font-awesome.min.css">
    <link rel="icon" type="image/png" href="../static/icon.png">
</head>

<body id="idx_body" >
    <script src='panzoom.min.js'></script>
    <script src="jquery-1.12.4.js"></script>
    <script src="jquery-ui.js"></script>

    <input id="file-input" type="file" name="name" style="display: none;" accept=".SATX, .satx, .TXT, .txt"/>

    <div class="title-bar">
        <div style="width: 25%; display: inline-block;">
            <img src="../static/cover.png" height="50%" width="50%">
        </div>

        <div style="display: inline-block; margin-top: 25px;">
            <p id="graph_name_p" style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">Untitled.SATX</p>
        </div>

        <div style="display: inline-block; margin-left: 20px; margin-top: 20px; float: right;">
            <button style="border-radius: 5px;" class="shutdown">Shutdown</button>
        </div>

        <div style="display: inline-block; margin-top: 25px; float: right;">
            <p id="connected_p" style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">Connected</p>
        </div>
    </div>

    <nav style="border-radius: 10px;">
        <ul class="main-menu">
            <li> <a>File <i class="fa fa-caret-down"></i> </a>
                <ul class="sub-menu">
                    <li> <a action="new_graph">New Graph</a> </li>
                    <li> <a action="load_graph">Load Graph</a> </li>
                    <li> <a action="copy_graph">Make a Copy...</a> </li>
                    <li> <a action="save_graph_as" title="ctrl+s">Save as...</a> </li>
                    <li> <a action="rename">Rename...</a> </li>
                    <li> <a action="close_halt_graph">Close and Halt</a> </li>
                </ul>
            </li>

            <li> <a>Edit <i class="fa fa-caret-down"></i> </a>
                <ul class="sub-menu">
                    <li> <a action="create_cell">Create Cell</a></li>
                    <li> <a action="cut_cell">Cut Cell</a> </li>
                    <li> <a action="dupe_cell" title="ctrl+d">Duplicate Cell</a> </li>
                    <li> <a action="delete_cell" title="ctrl+backspace">Delete Cell</a> </li>
                </ul>
            </li>

            <li> <a>Cell <i class="fa fa-caret-down"></i> </a>
                <ul class="sub-menu">
                    <li> <a action="run_all" title="ctrl+r">Run All</a> </li>
                    <li> <a action="run_cell" title="ctrl+return">Run Cell</a> </li>
                    <li> <a action="set_as_md">Set as Markdown</a> </li>
                    <li> <a action="set_as_py">Set as Python</a> </li>
                </ul>
            </li>

            <li> <a>Kernel <i class="fa fa-caret-down"></i> </a>
                <ul class="sub-menu">
                    <li> <a action="interrupt" title="ctrl+c">Interrupt</a> </li>
                    <li> <a action="reset_runtime">Reset Runtime</a> </li>
                    <li> <a action="clear_dco">Clear Output</a></li>
                    <li> <a action="reset_graph">Reset Graph</a> </li>
                    <li> <a action="reset_run_all">Reset & Run All</a> </li>
                    <li> <a action="shutdown">Shutdown</a> </li>
                </ul>
            </li>

            <li> <a>Help <i class="fa fa-caret-down"></i> </a>
                <ul class="sub-menu">
                    <li> <a action="tour">Tour</a> </li>
                    <li> <a action="keyboard_shortcuts">Keyboard Shortcuts</a> </li>
                    <li> <a action="video_tutorial">Video Tutorial</a></li>
                </ul>
            </li>
        </ul>

        <div id="execution_status">
            <!--<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>-->
        </div>
    </nav>

    <div id="toolbar">
        <ul class="button-group">
            <li><a title="save graph" action="save" class="button pill"><i class="fa fa-floppy-o" aria-hidden="true"></i></a></li>
            <li><a title="run selected cell" action="run_cell" class="button pill"><i class="fa fa-step-forward" aria-hidden="true"></i></a></li>
            <li><a title="run graph" action="run_all" class="button pill"><i class="fa fa-fast-forward" aria-hidden="true"></i></a></li>
            <li><a title="interrupt kernel" action="interrupt" class="button pill"><i class="fa fa-stop" aria-hidden="true"></i></a></li>
            <li><a title="reset runtime" action="reset_runtime" class="button pill"><i class="fa fa-undo fa-flip-horizontal" aria-hidden="true"></i></a></li>
            <li><a title="reset runtime and grun graph" action="reset_run_all" class="button pill"><i class="fa fa-undo fa-flip-horizontal" aria-hidden="true"></i>        <i class="fa fa-fast-forward" aria-hidden="true"></i></a></li>
        </ul>
    </div>

    <div>
        <iframe id="canvas" src="canvas.html" name="targetframe" allowTransparency="false" scrolling="yes" frameborder="0" height="1000" style="border-radius: 10px; width: 75%;"></iframe>
        <textarea id="dynamic_code_output" style="height: 994px; width: 24.1%; border-radius: 10px; cursor: text;" spellcheck="false" frameborder="0" readonly></textarea>
    </div>

    <script src="./codemirror/lib/codemirror.js"></script>
    <script src="../static/python.js"></script>
    <script src="../static/markdown.js"></script>
    <script src="../static/jquery.hotkeys.js"></script>

    <script src="script.js"></script>
</body>
</html>