<!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"><i class="fa fa-power-off" aria-hidden="true"></i></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 style="display: inline-block; margin-top: 25px; margin-right: 25px; float: right;">
        <p style="color: white; border-color: #19ceda; border-width: 2px; background-color: transparent; resize: none;">0.8.2</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 Graph as...</a> </li>
                <li> <a action="save_as_py" title="ctrl+s">Save as .py</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>