{% extends 'base.html' %}

{% block head %}
<link rel="stylesheet" href="../css/assignment-configuration.css" />
<script src="../js/assignment-configuration.js"></script>
<script src="../lib/codemirror/js/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror/css/codemirror.css">
<script src="../lib/codemirror/mode/python.js"></script>
<script src="../lib/codemirror/mode/clike.js"></script>
{# <link rel="stylesheet" href="../lib/codemirror/theme/darcula.css" /> #}

{% endblock %}

{% block content %}
<!--Index Button-->
<div class="header">
    <a class="index-container" href="index.html">
        <img src="../images/header-bg-short-arrow.png" />
        <p>Index</p>
    </a>
    <div class="file-container">
        <p id="assignment-text"></p>
    </div>

    <div class="global-icons">
        <img id="global-settings-button" class="testcase-nav" style="border:3px solid black;"
            src="../images/global-settings.png"
            onclick="currentContainer = showContainer(currentContainer, '#global-settings-container', '#instructions-container');" />
    </div>
</div>

<!--Main Container (windows) -->
<div style="display: flex; align-items: center; justify-content: center;">
    <div class="main-container">
        <div id="testcase-container">
            <i class="fas fa-plus-circle add-item fa-4x" onclick="createTestcase()"></i>
            <p class="testcase-title">Testcases</p>
            <img src="../images/testcase configuration.png" />
            <div class="table-scroll">
                <table class="table table-hover">
                    <tbody id="testcase-table">
                        <!-- To be filled by testcase entries in js -->
                    </tbody>
                </table>
                <div id="no-items-container">
                    <div
                        style="height:300px; display: flex; align-items: center; flex-direction: column; justify-content: center;">
                        <img src="../images/empty-folder-blue.svg" />
                        <div style="width:250px; margin-top: 10px;">
                            <p style="text-align: center; margin-bottom: 5px;">You currently have no testcases. </p>
                            <p style="text-align: center;">Click the <i style="color:#00A9E9;"
                                    class="fas fa-plus-circle"></i> button to create one.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="instructions-container">
            <div id="instructions-secondary-container">
                <p class="instructions-title">Instructions</p>
                <img src="../images/testcase configuration.png" />
                <div class="instructions-info-container">
                    <p class="instructions-text">Select Option From Testcases</p>
                    <table class="table">
                        <tr>
                            <td><i class="fas fa-edit buttons fa-lg text-primary "></i></td>
                            <td>Edit and View code</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-cog buttons fa-lg text-primary"></i></td>
                            <td>Edit Config File</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-trash buttons fa-lg text-primary"></i></td>
                            <td>Delete Testcase </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-plus-circle add-item fa-lg text-primary"></i></td>
                            <td>Add Testcase </td>
                        </tr>
                    </table>

                </div>

            </div>
        </div>

        <div id="edit-testcase-container" style="display: none; max-width: ;">
            <div id="edit-testcase-code">
                <p class="edit-title">Edit and View Code </p>
                <img src="../images/testcase configuration.png" />
                <div class="form-container">
                    <form>
                        <div class="form-group">
                            <label for="file-name">File Name </label>
                            <input id="file-name" type="text" spellcheck="false" class="form-control"
                                data-originalName="" />
                        </div>
                        <div class="form-group">
                            <label for="edit-code">Code </label>
                            <textarea id="edit-code" class="form-control" spellcheck="false"></textarea>
                        </div>
                    </form>
                </div>
            </div>
            <div id="edit-testcase-config" style="display: none">
                <p class="config-title">Configuration</p>
                <img src="../images/testcase configuration.png" />
                <div id="config-content">

                    <div class="form-container">

                        <form id="testcase-config-content" class="form-scroll">
                            <!-- To be filled up when assignment has been loaded -->
                        </form>
                    </div>
                </div>
            </div>
            <div id="edit-testcase-input" style="display: none">
                <p class="config-title">Input</p>
                <img src="../images/testcase configuration.png" />
                <div class="form-container">
                    <form id="input-form">
                        <div class="form-group pt-3">
                            <textarea id="input-code" rows="17" class="form-control"></textarea>
                        </div>
                    </form>
                </div>
            </div>
            <div id="edit-testcase-output" style="display: none">
                <p class="config-title">Output</p>
                <img src="../images/testcase configuration.png" />
                <div class="form-container">
                    <form id="output-form">
                        <div class="form-group pt-3">
                            <textarea id="output-code" rows="17" class="form-control" data-name="outputText"></textarea>
                        </div>
                    </form>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; position:absolute; top:0px; right:-55px;">
                <img id="config-button" class="testcase-nav" src="../images/pencil.png"
                    onclick="currentSubContainer = showContainer(currentSubContainer, '#edit-testcase-code');" />
                <img id="config-button" class="testcase-nav" src="../images/gear.svg"
                    onclick="currentSubContainer = showContainer(currentSubContainer, '#edit-testcase-config');" />
                <img id="input-button" class="testcase-nav" src="../images/keyboard.png"
                    onclick="currentSubContainer = showContainer(currentSubContainer, '#edit-testcase-input');" />
                <img id="output-button" class="testcase-nav" src="../images/monitor.png"
                    onclick="currentSubContainer = showContainer(currentSubContainer, '#edit-testcase-output');" />
            </div>
        </div>

        <div id="global-settings-container">
            <p class="global-settings-title"> Global Settings </p>
            <img src="../images/testcase configuration.png" />

            <div id="global-settings-content" class="form-container">
                <p class="global-settings-title"> Global Settings </p>
                <img src="../images/testcase configuration.png" />

                <div class="form-container">
                    <form id="global-settings-form" class="form-scroll">
                        <!-- To be filled up when assignment has been loaded -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Delete Testcase</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="text-center">Would you like to delete this testcase?</p>
                <form>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" id="confirmButton" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--Footer -->
<div class="footer">
    <a id="export-container" class="export-container" onclick="saveAssignment(); eel.export_assignment();">
        <img src="../images/export_bg.png" />
        <p>Export</p>
    </a>

    <a class="grading-container" onclick="location.href = 'homework.html';">
        <img src="../images/Grading_bg.png" />
        <p>Grading</p>
    </a>
</div>
{% endblock %}