<html>
<head>
    <title>API Tests</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.5/mocha.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        h1 {
            font-family: sans-serif;
            font-weight: bold;
        }

        .console {
            background: lightgrey;
            width: 100%;
            border-radius: 5px;
        }

        .logs {
            position: relative;
            text-align: center;
            font-size: 1.2em !important;
        }
    </style>

</head>
<body>
<div class="container">
    <h1>API Tests</h1>
    <div class="row">
        <div class="col mt-4">
            <button id="runButton" class="btn btn-primary">Run Tests</button>
        </div>
        <div class="col mt-4">
            <div class="mb-3">
                <input type="checkbox" class="form-check-input" id="verbose">
                <label class="form-label" for="verbose">Verbose</label>

            </div>
            <div class="mb-3">
                <input type="checkbox" class="form-check-input" id="report">
                <label class="form-check-label" for="report">Report</label>
            </div>

            <div class="mb-3">
                <label for="dropdown">Select a test</label>
                <select class="form-select" multiple id="dropdown">
                    {% for test in tests %}
                    <option value="{{ test }}">{{ test }}</option>
                    {% endfor %}
                </select>
            </div>

        </div>
        <div class="console mt-4">
            <pre class="logs" id="testLogs"></pre>
        </div>

    </div>
    <script>
        var data = {
            verbose: document.getElementById('verbose').checked,
            report: document.getElementById('report').checked,
            tests: []
        };
        var dropdown = document.getElementById('dropdown');
        var verboseButton = document.getElementById('verbose');
        var reportButton = document.getElementById('report');
        verboseButton.addEventListener('change', function () {
            data.verbose = verboseButton.checked;
        });
        reportButton.addEventListener('change', function () {
            data.report = reportButton.checked;
        });

        dropdown.addEventListener('change', function () {
            data.tests = Array.from(dropdown.selectedOptions).map(option => option.value);
        });

        var runButton = document.getElementById('runButton');
        runButton.addEventListener('click', function () {
            fetch("/tests/run", {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body:
                    JSON.stringify(data)
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('testLogs').innerHTML = data.logs;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });

    </script>
</body>

</html>