<!DOCTYPE html>
<html>
    <head>
        <title>Markdown Editor & Responses</title>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css"
              rel="stylesheet">
        <style></style>
    </head>
    <body>
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="https://companieslogo.com/img/orig/NSIT-65c6ad49.png"
                         alt="Bootstrap"
                         width="30"
                         height="24">
                    Ingenious - AI Test Harness
                </a>
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarNav"
                        aria-controls="navbarNav"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="nav nav-pills me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active"
                               aria-current="page"
                               href="#"
                               onclick="showEdit(this)">Edit Markdown</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="showResponses(this)">View Responses</a>
                        </li>
                    </div>
                </div>
            </nav>
            <!-- Content -->
            <div id="content">
                <div id="editSection" style="display: block;">
                    <h3 class="header-space">Edit Markdown/Jinja Files</h3>
                    <div class="list-group">
                        {% for file in files %}
                            <a href="{{ url_for('edit_file', filename=file) }}"
                               class="list-group-item list-group-item-action">
                                <i class="bi bi-file-earmark-text"></i> {{ file }}
                            </a>
                        {% endfor %}
                    </div>
                </div>
                <div id="responsesSection" style="display: none;">
                    <h3 class="header-space">View Responses</h3>
                    <button class="btn btn-primary mb-3" onclick="refreshResponses()">
                        <i class="bi bi-arrow-clockwise"></i> Refresh
                    </button>
                    <button class="btn btn-secondary mb-3"
                            id="runTestsBtn"
                            onclick="runLocalTest()">
                        <i class="bi bi-play-circle"></i> Run Local Tests
                    </button>
                    <button class="btn btn-outline-secondary mb-3" id="runDownload">
                        <i class="bi bi-download"></i> Download Responses Html
                    </button>
                    <span id="testStatusSpan" class="ms-3"></span>
                    <div id="responsesContainer"></div>
                </div>
            </div>
            <script>
        document.getElementById('runDownload').addEventListener('click', function() {
            window.location.href = "{{ url_for('download_responses') }}";
        });

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const content = document.getElementById('content');
            const toggleButton = document.getElementById('toggleSidebar');

            if (sidebar.style.display === 'none') {
                sidebar.style.display = 'block';
                toggleButton.innerText = '<';
                toggleButton.style.left = '260px';
            } else {
                sidebar.style.display = 'none';
                toggleButton.innerText = '>';
                toggleButton.style.left = '10px';
            }
        }

        function setActiveNav(element) {
            var navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(function(navLink) {
                navLink.classList.remove('active');
            });
            element.classList.add('active');
        }

        function showEdit(element) {
            setActiveNav(element);
            document.getElementById('editSection').style.display = 'block';
            document.getElementById('responsesSection').style.display = 'none';
        }

        function showResponses(element) {
            setActiveNav(element);
            document.getElementById('editSection').style.display = 'none';
            document.getElementById('responsesSection').style.display = 'block';
        }

        function refreshResponses() {
            fetch('{{ url_for('get_responses') }}')
              .then(response => response.text())
              .then(html => {
                document.getElementById('responsesContainer').innerHTML = html;
              })
              .catch(err => {
                document.getElementById('responsesContainer').innerHTML = "<p>Error loading responses.</p>";
                console.error(err);
              });
        }


        function runLocalTest() {
            const runBtn = document.getElementById('runTestsBtn');
            const statusSpan = document.getElementById('testStatusSpan');

            runBtn.disabled = true;
            runBtn.innerText = 'Running...';
            statusSpan.innerText = 'Running tests...';

            fetch('{{ url_for('run_simple_tests') }}', { method: 'POST' })
              .then(response => response.json())
              .then(data => {
                runBtn.disabled = false;
                runBtn.innerText = 'Run Local Tests';

                if (data.status === 'success') {
                  statusSpan.innerText = 'Tests completed successfully.';
                } else {
                  statusSpan.innerText = 'Tests encountered an error: ' + data.output;
                }

                refreshResponses();
              })
              .catch(err => {
                runBtn.disabled = false;
                runBtn.innerText = 'Run Local Tests';
                statusSpan.innerText = 'Error running tests: ' + err;
                console.error(err);
              });
        }
            </script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        </body>
    </html>
