{% load static %}

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

<head>
    <title>FPGA-Interface Interface</title>
    <meta charset="UTF-8">
    <meta name="author" content="Joachim Reif">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="{% static 'interface/plugin/codemirror/lib/codemirror.js' %}"></script>
    <script type="text/javascript" src="{% static 'interface/plugin/codemirror/mode/python/python.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'interface/plugin/codemirror/lib/codemirror.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'interface/plugin/codemirror/theme/eclipse.css' %}">

    <link rel="stylesheet" href="{% static 'interface/better_style.css' %}" type="text/css">
    <script src="{% static 'interface/script.js' %}" type="module"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" type="text/javascript"></script>

    <link rel="icon" href="data:;base64,iVBORw0KGgo="> <!-- prevent calling for an favicon-->
</head>

<body>
    <header class="first-level">
        <h1>FPGA-Cluster</h1>
    </header>

    <!-- Elements for settings-->
    <input type="checkbox" id="cb-settings" value="Settings">
    <label for="cb-settings">S</label>
    <aside id="setting">
        <ul>
            <li>
                <button type="button" class="button-sidepanel" id="bt_save_profile" style="visibility:hidden">save Profile</button>
            </li>
            <li>
                <button type="button" class="button-sidepanel" id="bt_load_profile" style="visibility:hidden">load Profile</button>
            </li>
            <li>
                <button type="button" class="button-sidepanel" id="bt_console">Console</button>
            </li>
            <li>
                <form>
                    <button type="submit" class="button-sidepanel" formaction="{% url 'interface:changepw' %}">Change Password</button>
                </form>
            </li>
            <li>
                <hr>
            </li>
            <li>
                <form>
                    <button id="bt-logout" type="submit" class="button-sidepanel" formaction="{% url 'interface:logout' %}">Logout</button>
                </form>
            </li>
        </ul> 
    </aside>

    <div id="parameters" class="first-level">
        {% csrf_token %}
        <form action="." id="fo_network">
            <div id="params-first">
                <label for="tau-ms">Tau_ms:</label>
                <input type="number" id="tau-ms" value="10.0">
                <br>
                <label for="c-pf">C_pF:</label>
                <input type="number" id="c-pf" value="250.0">
                <br>
                <label for="t-ref-ms">t_ref_ms:</label>
                <input type="number" id="t-ref-ms" value="2.0">
                <br>
                <label for="v-reset-mv">V_reset_mV:</label>
                <input type="number" id="v-reset-mv" value="-70.0">
                <br>
                <label for="v-thresh-mv">V_thresh_mV:</label>
                <input type="number" id="v-thresh-mv" value="10.0">
                <br>
                <label for="tau-ex-ms">tau_ex_ms:</label>                         
                <input type="number" id="tau-ex-ms" value="2.0">
            </div>
            <div id="params-second">
                <label for="tau-in-ms">tau_in_ms:</label>
                <input type="number" id="tau-in-ms" value="2.0">
                <br>
                <label for="h-ms">h_ms:</label>
                <input type="number" id="h-ms" value="0.1">
                <br>
                <label for="weight-frac-exc">weightFracExc:</label>
                <input type="number" id="weight-frac-exc" value="16">
                <br>
                <label for="weight-frac-inh">weightFracInh:</label>
                <input type="number" id="weight-frac-inh" value="16">
                <br>
                <label for="syncs-per-time-step">syncsPerTimeStep:</label>
                <input type="number" id="syncs-per-time-step" value="3">
                <br>
                <label for="timestep-limit">Number of TimeSteps:</label>
                <input type="number" id="timestep-limit" value="0">
                <br>
                <label for="number-neurons">Number of Neurons:</label>
                <input type="number" id="number-neurons" value="32">
            </div>                
        </form>

        <button id="toggle-editor">Open Editor</button>
    </div>
    
    <div id="graph" class="first-level">
        <canvas width="49vw" height="20vh" id="cv_graph">

        </canvas>
        <div id="console_output">
            <p></p>
        </div>
    </div>

    <div id="editor" class="first-level">
        <textarea name="editro" id="codemirror-textarea" ></textarea>
        <button id="save-editor">Save</button>
        <button id="cancel-editor">Cancel</button>
    </div>"

    <div id="matrix" class="first-level">
        <p>i</p>
        <span class="tooltiptext" id="cluster-tooltip">The matrix represent the FPGA-Cluster. By clicking on the green squares you can select boards for your simulation. Selected squares are yellow. You can remove a selection with a second click.</span>
        <!-- Contains the cluster-structure which is created in JavaScript -->
    </div>

    <aside id="errorInformations">
        <table>
            <thead>
                <tr>
                    <td>Source</td>
                    <td id="info-source"></td>
                </tr>
                <tr>
                    <td>Target</td>
                    <td id="info-target"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Delivered</td>
                    <td id="info-delivered"></td>
                </tr>
                <tr>
                    <td>CRC-Error</td>
                    <td id="info-crcerror"></td>
                </tr>
                <tr>
                    <td>Dropped</td>
                    <td id="info-dropped"></td>
                </tr>
                <tr>
                    <td>Wrong-ID</td>
                    <td id="info-wrongid"></td>
                </tr>
            </tbody>
        </table>
    
        <button class="button-sidepanel">Close</button>
    </aside>

    <footer class="first-level">
        <div class="progress-bar" data-label="" style="--width:0"></div>
        <button id="start" class="bt-footer">Start simulation</button>
        <button id="output-window" class="bt-footer">Output Window</button>
        <b>Timer: </b><b id="time">0:00</b>
    </footer>
</body>

</html>