<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LaTeX Live Preview</title>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <script>
        window.MathJax = {
            chtml: {
                fontFamily: 'TeX'  // Forces TeX fonts
            }
        };
    </script>
    <script type="text/javascript" id="MathJax-script" async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    
    <style>
        body, html {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #ffffff; /* Light yellow background */
            color: #333333; /* Dark gray text for better readability */
        }

        .container {
            display: flex;
            height: calc(100vh - 56px); /* Subtract navbar height */
            width: 100%;
            transition: all 0.3s ease;
        }

        .left-panel {
            flex-grow: 1;
            height: 100%;
            overflow-y: auto;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        .left-panel.collapsed {
            width: 0;
        }

        .right-panel {
            width: 30%;
            height: 100%;
            overflow-y: auto;
            background-color: #f8f8f8;
            transition: all 0.3s ease;
        }

        .right-panel.collapsed {
            width: 0;
            padding: 0;
            overflow: hidden;
        }

        .toggle-btn {
            background-color: transparent;
            color: #8c1515; /* Stanford cardinal red */
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 1.2em;
            transition: background-color 0.3s;
            color: #f8f8f8;
        }

        .toggle-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #f8f8f8;
        }

        .sidebar {
            background-color: #ffffff; /* Stanford cardinal red */
            color: #333333; /* White text for sidebar */
            padding: 20px;
            /* margin: 0px; */
            min-height: 100%;
            /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
            font-family: 'Roboto', sans-serif;
        }
        .content {
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto auto auto; /* Added an extra row for buttons */
            gap: 20px;
        }
        .stats {
            padding: 20px;
            overflow-y: auto;
        }
        .stat-counts {
            margin-bottom: 20px;
        }
        .stat-distributions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .bound-dist, .relation-dist {
            flex: 1;
        }
        .stats ul {
            list-style: none;
            padding: 0;
        }
        .stats li {
            margin: 5px 0;
        }
        h2 {
            margin-top: 10px;
        }
        .stats ol {
            padding-left: 20px;
        }
        .textbox, .textbox2, .textbox3 {
            width: 100%;
            height: 10px;
            border: none;
            border-bottom: 2px solid #9e9e9e;
            padding: 10px;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            resize: none;
            transition: border-bottom-color 0.3s;
            background-color: #f8f8f8; /* White background for textboxes */
            border: 1px solid #c0c0bf; /* Light gray border */
        }

        .latex-render, .latex-render2, .latex-render3 {
            width: 100%;
            height: 10px;
            min-height: 10px; /* Set a minimum height */
            border: none;
            padding: 10px;
            overflow-wrap: break-word; /* Enable word wrapping */
            overflow-x: auto; /* Hide horizontal scrollbar */
            overflow-y: auto; /* Show vertical scrollbar only when needed */
            background-color: #f8f8f8; /* Very light gray background */
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
            /* margin-left: 10px; Add a tiny gap between the input and render areas */
            font-family: 'Latin Modern Math', serif;
            border: 1px solid #c0c0bf; /* Light gray border */
        }

        .buttons {
            grid-column: 1 / -1;
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 0px; /* Added some space above the buttons */
        }
        button {
            padding: 10px 20px;
            background-color: #8c1515; /* Stanford cardinal red for buttons */
            color: #f8f8f8; /* White text on buttons */
            border: none;
            border-radius: 2px;
            cursor: pointer;
            transition: background-color 0.3s, box-shadow 0.3s;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        }
        button:hover {
            background-color: #b83a4b; /* Lighter red on hover */
            color: #333333; /* Dark gray text on hover */
            box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
        }
        .save, .next {
            grid-column: span 1;
        }

        /* Dark theme styles */
        body.dark-theme {
            background-color: #333333;
            color: #f8f8f8;
        }

        body.dark-theme .container {
            background-color: #1e1e1e;
        }

        body.dark-theme .left-panel {
            background-color: #252526;
        }

        body.dark-theme .right-panel {
            background-color: #2d2d30;
        }

        body.dark-theme .textbox,
        body.dark-theme .textbox2,
        body.dark-theme .textbox3 {
            background-color: #3c3c3c;
            color: #e0e0e0;
            border-color: #555555;
        }

        body.dark-theme .latex-render,
        body.dark-theme .latex-render2,
        body.dark-theme .latex-render3 {
            background-color: #2d2d30;
            color: #e0e0e0;
            border-color: #555555;
        }

        body.dark-theme button {
            background-color: #2d2d30;
            color: #ffffff;
        }

        body.dark-theme button:hover {
            background-color: #8c1515;
        }

        body.dark-theme .sidebar {
            background-color: #252526;
            color: #e0e0e0;
        }

        body.dark-theme .navbar {
            background-color: #333333;
        }

        body.dark-theme .toggle-btn {
            color: #e0e0e0;
        }

        body.dark-theme .toggle-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .id-input {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .id-input input {
            flex-grow: 1;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #c0c0bf;
            border-radius: 2px;
        }

        .id-input button {
            padding: 5px 10px;
            font-size: 16px;
        }

        /* Dark theme styles for the new elements */
        body.dark-theme .id-input input {
            background-color: #3c3c3c;
            color: #e0e0e0;
            border-color: #555555;
        }

        body.dark-theme table th,
        body.dark-theme table td {
            border-color: #555555;
        }

        body.dark-theme #commentText {
            background-color: #3c3c3c;
            color: #e0e0e0;
            border-color: #555555;
        }

        #commentText {
            width: auto;
            height: 80px;
            padding: 5px;
            background-color: #f8f8f8;
            border: 1px solid #c0c0bf;
            font-family: 'Roboto', sans-serif;
        }
        #dynamicLatexSections {
            width: 100%;
            height: 100%;
            grid-column: 1 / -1;
        }

        select {
            background-color: #8c1515;
            padding: 10px;
            color: #f8f8f8;
        }
        body.dark-theme .id-input select {
            background-color: #3c3c3c;
            color: #e0e0e0;
            border-color: #555555;
        }

    </style>
</head>
<body>
    <div class="navbar" style="background-color: #8c1515; color: #f8f8f8; padding: 16px 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1000; position: relative; display: flex; justify-content: space-between; align-items: center;">
        <h1 style="margin: 0; font-size: 1.5em;">Problem Checker & Editor</h1>
        <div>
            <button class="toggle-btn" id="prevNavButton">← <span style="font-size: smaller;">Previous</span></button>
            <select id="problems-select" style="padding: 5px; font-size: 16px; border: 1px solid #c0c0bf; border-radius: 2px;">
                <!-- Options will be populated dynamically -->
            </select>
            <button class="toggle-btn" id="nextNavButton"><span style="font-size: smaller;">Next</span> →</button>
            <button class="toggle-btn" id="toggleTheme">🌓</button>
            <!-- <button class="toggle-btn" id="togglePanel">☰</button> -->
        </div>
    </div>
    <div class="container">
        <div class="left-panel">
            <div class="content">

                <div id="dynamicLatexSections"></div>

                <div class="comment-section" style="grid-column: 1 / -1;">
                    <h3>Comments</h3>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <div id="commentTags" style="display: flex; flex-direction: column; gap: 5px;">
                            <label><input type="checkbox" value="bad"> Bad Problem</label>
                            <label><input type="checkbox" value="unsure"> Unsure</label>
                            <label><input type="checkbox" value="other"> Other Issue</label>
                        </div>
                        <textarea id="commentText" 
                                placeholder="Add any additional comments here..."
                        ></textarea>
                    </div>
                </div>

                <div class="buttons">
                    <button class="save" id="saveButton">Save</button>
                    <button class="next" id="nextButton">Save and Next</button>
                </div>
            </div>
        </div>
        <!-- <div class="right-panel">
            <div class="sidebar">
                <div class="id-input">

                </div>
            </div>
        </div> -->
    </div>
    <script type="text/javascript" src="{{ url_for('static', filename='editor.js') }}"></script>
</body>
</html>
