<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NATT test configuration editor</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Bootstrap JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- File saver -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
    <!-- Ace Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Custom style -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index_style.css') }}">
</head>

<body onbeforeunload="return beforeCloseEvent()">
    <!--menu bar-->
    <div id="menuBar" class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="d-flex justify-content-start">
            <a class="navbar-brand p-0" href="#" style="display: block;">
                <div class="h6 mb-0"><i class="fas fa-cog"></i> NATT test configuration editor</div>
                <div class="small text-muted">Version 1.1.0</div>
            </a>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="newFile(true)"
                        title="New file">
                        <img src="{{ url_for('get_icon', filename='new-file.svg') }}" alt="New file">
                    </button>
                </li>
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="openFile()" title="Open">
                        <img src="{{ url_for('get_icon', filename='open.svg') }}" alt="Open">
                    </button>
                </li>
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="saveFile()" title="Save">
                        <img src="{{ url_for('get_icon', filename='save.svg') }}" alt="Save">
                    </button>
                </li>
            </ul>

            <ul class="navbar-nav mr-auto pl-3">
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="undoEdit()" title="Undo">
                        <img src="{{ url_for('get_icon', filename='undo.svg') }}" alt="Undo">
                    </button>
                </li>
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="redoEdit()" title="Redo">
                        <img src="{{ url_for('get_icon', filename='redo.svg') }}" alt="Redo">
                    </button>
                </li>
            </ul>

            <ul class="navbar-nav mr-auto pl-3">
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="sendToServer()" title="Run">
                        <img src="{{ url_for('get_icon', filename='play.svg') }}" alt="Run">
                    </button>
                </li>
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="stopProcess()" title="Stop">
                        <img src="{{ url_for('get_icon', filename='stop.svg') }}" alt="Stop">
                    </button>
                </li>
            </ul>

            <ul class="navbar-nav mr-auto pl-3">
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="validateConfig()"
                        title="Validate">
                        <img src="{{ url_for('get_icon', filename='validate.svg') }}" alt="Validate">
                    </button>
                </li>
            </ul>

            <select class="ml-3" id="fontSizeSelector" onchange="changeFontSize(this.value)" title="Editor font size">
                <option value="10">10px</option>
                <option value="12">12px</option>
                <option value="14">14px</option>
                <option value="16">16px</option>
                <option value="18">18px</option>
                <option value="20">20px</option>
                <option value="24">24px</option>
                <option value="28">28px</option>
            </select>

            <ul class="navbar-nav mr-auto pl-3">
                <li class="nav-item">
                    <button class="btn btn-outline-light navbar-btn" type="button" onclick="gotoHelp()"
                        title="Validate">
                        <img src="{{ url_for('get_icon', filename='help.svg') }}" alt="Help">
                    </button>
                </li>
            </ul>

        </div>
    </div>

    <!--splash screen-->
    <div id="splash-screen">
        <div class="d-flex justify-content-center">
            <div class="p-4">
                <p class="p-0 m-0 display-4 text-light"><b class="text-stroke">N</b>etwork</p>
                <p class="p-0 m-0 display-4 text-light"><b class="text-stroke">A</b>pplication</p>
                <p class="p-0 m-0 display-4 text-light"><b class="text-stroke">T</b>esting</p>
                <p class="p-0 m-0 display-4 text-light"><b class="text-stroke">T</b>ool</p>
                <hr style="border: 1px solid #555;">
                <p class="mt-2 text-light">Configuration editor - v. 1.1.0</p>
            </div>
            <div class="p-4">
                <img class="logo" src="{{ url_for('get_icon', filename='logo.png') }}" alt="NATT logo">
            </div>
            <div class="loading-bar"></div>
        </div>
    </div>

    <!--work space-->
    <div class="container-fluid">
        <div class="row">
            <div id="left-panel" class="col-md-5 p-0">
                <div id="editor"></div>
            </div>
            <div id="iframe-container" class="col-md-7 p-0">
                <iframe id="report-iframe" width="100%" height="100%" frameborder="0">
                </iframe>
            </div>
        </div>
        <div class="row top-border">
            <div class="col-md mp-5 p-0">
                <div class="d-flex justify-content-start">
                    <div class="vertical-text m-0">
                        <span class="p-2"><i class="fas fa-code"></i> Syntax Errors</span>
                    </div>
                    <div id="errorPanel">Press button with <b>checkbox</b> for configuration validation</div>
                </div>
            </div>
            <div class="col-md mp-7 p-0">
                <div class="d-flex justify-content-start">
                    <div class="vertical-text m-0">
                        <span class="p-2"><i class="fas fa-info-circle"></i> Keyword info</span>
                    </div>
                    <div id="keywordInfoPanel" class="d-flex">
                        <div id="keywordList" class="keyword-list"></div>
                        <div id="keywordDescription" class="keyword-description"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <script src="{{ url_for('static', filename='js/editor_script.js') }}"></script>
    <script src="{{ url_for('static', filename='js/kw_description.js') }}"></script>
    <script src="{{ url_for('static', filename='js/index_script.js') }}"></script>
</body>

</html>