<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eryx IDE</title>
    <base target="_blank" rel="noopener noreferrer">
    <meta name="description" content="Online IDE for the Eryx programming language">
    <meta property="og:title" content="Eryx IDE">
    <meta property="og:site_name" content="Eryx Online IDE">
    <meta property="og:description" content="Online IDE for the Eryx programming language">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://github.com/ImShyMike/Eryx/blob/main/assets/eryx_small.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/material-palenight.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css">
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <div id="topBar" class="top-bar" style="display:none">
        <span id="helpText">Welcome to the web IDE, to get started with Eryx I recommend you check out the <a href="https://ImShyMike.github.io/Eryx" target="_blank">documentation</a> and maybe even star the <a href="https://github.com/ImShyMike/Eryx" target="_blank">github repo</a> :D</span>
        <button class="close-button" onclick="closeTopBar()">✖</button>
    </div>
    <div class="container">
        <div class="header">
            <span><a title="Github" id="redirect" href="https://github.com/ImShyMike/Eryx"><strong class="name">Eryx</strong></a> v{{ version }}</span>
            <div class="actions">
                <button class="button" id="run-button" title="Run">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cad3f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                </button>
                <button class="button" id="import-button" title="Import">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cad3f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg>
                </button>
                <button class="button" id="export-button" title="Export">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cad3f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 8l-5-5-5 5M12 4.2v10.3"/></svg>
                </button>
                <button class="button" id="documentation-button" title="Documentation">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24"><path stroke="#cad3f5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v13H7a2 2 0 0 0-2 2Zm0 0a2 2 0 0 0 2 2h12M9 3v14m7 0v4"/></svg>                      
                </button>
            </div>
            <div class="dropdown">
                <button class="button" id="settings-button" title="Settings"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cad3f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button>
                <div class="settings-menu" id="settings-menu">
                    <label>
                        <select id="mode-select">
                            <option value="run">Run</option>
                            <option value="result">Result</option>
                            <option value="tokenize">Tokenize</option>
                            <option value="ast">AST</option>
                        </select>
                    </label>
                    <label class="text">
                        <input type="checkbox" id="memory-enabled"> REPL Mode
                    </label>
                    <button class="button" id="clear-memory">Reload REPL</button>
                    <button class="button" id="clear-console">Clear Output</button>
                </div>
            </div>
        </div>
        <div class="ide">
            <div class="editor">
                <div class="editor-container">
                    <svg id="name-edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cad3f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
                    <div class="editor-header" id="editor-header">example.eryx</div>
                </div>
                <textarea id="code-area">func isSorted(arr, idx) {
  if (idx == 0) {
    return true;
  }
  if (arr[idx] < arr[idx - 1]) {
    return false;
  }
  return isSorted(arr, idx - 1);
}

let nums = [1, 2, 3, 4, 5];
print(nums, isSorted(nums, len(nums) - 1))</textarea>
            </div>
            <div class="repl">
                <div class="repl-header">Output</div>
                <div class="output" id="repl-output"></div>
            </div>
        </div>
        
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/go/go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>
    <script src="static/main.js"></script>
</body>
</html>
