<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAA=="/>
    <link rel="stylesheet" href="css/prism.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/boxicons-free/fonts/basic/boxicons.min.css">
    <link rel="stylesheet" href="css/boxicons-free/fonts/animations.min.css">
    <link rel="stylesheet" href="css/boxicons-free/fonts/transformations.min.css">
    <style>
        /* Prevent the main page from scrolling */
    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden; 
    }
    /* The main wrapper for your app */
    #app {
        display: flex;
        flex-direction: column;
        height: 100vh; /* Full viewport height */
    }
    /* The scrollable area */
    .notebook-area {
        flex-grow: 1;      /* Take up all remaining space */
        overflow-y: auto;  /* Scroll only this div */
        padding-bottom: 70vh; /* Extra space so last cell can scroll to top */
    }
    </style>
  </head>
  <body>

    <div id="app"></div>
    
    <script type="text/x-template" id="app-template">

    <app-navbar
        :is-locked="isLocked"
        :running="running"
        :running-activity="runningActivity"
        :has-notebook="!!notebook"
        :up-to-date="notebook && last_valid_output_cell_index >= notebook.cells.length - 1"
        :cell-count="notebook ? notebook.cells.length : 0"
        :has-api-key="availableAiProviders.length > 0"
        :debug="debug"
        :active-ai-provider="activeAiProvider"
        :available-ai-providers="availableAiProviders"
        :share-output-with-ai="shareOutputWithAi"
        :restarting="restarting"
        @lock="lockNotebook"
        @restart="ui_restart"
        @toggle-share-output="toggleShareOutput"
        @refresh="reloadNotebook"
        @interrupt="ui_interruptKernel"
        @reset-run-all="ui_resetAndRunAllCells"
        @run-all="ui_runCell(notebook.cells.length - 1)"
        @clear-outputs="clearOutputs"
        @open-info="showInfo = true"
        @open-settings="showSettings = true"
        @debug-request="sendDebugRequest"
        @set-ai-provider="setActiveAiProvider"
        @run-all-tests="ui_runAllTests"
    />    

    <panel-bar
        :auth-token="authToken"
    />

    <ui-error 
        :error="uiError" 
        @close="closeUiError" 
    />

    <div class="section notebook-area">
        <h1 class="title">
            {{ notebook_name }}
        </h1>
        <div class="notebook-container px-2 py-2">
            <div v-if="loading" class="has-text-centered py-6">
                <button class="button is-loading is-ghost is-large">Loading</button>
                <p class="has-text-grey">Fetching notebook data...</p>
            </div>
            <div v-else-if="error" class="notification is-danger is-light">
                <button class="delete" @click="error = null"></button>
                <strong>Error:</strong> {{ error }}
            </div>
            <div v-else="notebook">
                
                <template v-for="(cell, index) in notebook.cells" :key="index">

                    <cell-insertion-zone v-if="!isLocked"
                        :is-active="activeIndex === index || (activeIndex >= 0 && activeIndex === index - 1)"
                        :cell-count="notebook.cells.length"
                        @insert="(celltype) => insertCell(index, celltype)"
                    />

                    <cell-label
                        v-if="cell.cell_type === 'code'"
                        :name="cell.metadata.name"
                    />

                    <notebook-cell
                        :cell="cell"
                        :is-active="activeIndex === index"
                        :is-locked="isLocked"
                        :running="running"
                        :code-valid="last_valid_code_cell_index >= index"
                        :output-valid="last_valid_output_cell_index >= index"
                        :executed="last_executed_cell_index >= index"
                        :test-code-valid="last_valid_test_cell_index >= index"
                        :as-read="asRead"
                        :markdown-edit-key="markdownEditKey[index]"
                        :explanation-edit-key="explanationEditKey[index]"
                        @activate="setActiveCell(index)"

                        @save-markdown="(content) => sendMarkdownToServer(content, index)"
                        @save-explanation="(content) => sendExplanationToServer(content, index)"
                        @save-code="(content) => sendCodeToServer(content, index)"
                        @save-and-run="(content) => ui_saveExplanationAndRun(content, index)"

                        @interrupt="ui_interruptKernel"
                        @run-cell="ui_runCell(index)"
                        @generate-code="ui_forceRegenerateCellCode(index)"
                        @clear-code="clearCellCode(index)"
                        @validate-code="ui_validateCode(index)"
                        @dismiss-validation="dismissValidation(index)"

                        @run-test="ui_runTestCell(index)"
                        @save-and-run-test="(content) => ui_saveExplanationAndRunTest(content, index)"
                        @generate-test-code="ui_forceRegenerateTestCode(index)"
                        @open-test-help="showTestHelp = true"

                        @delete="deleteCell(index)"
                        @move-up="moveCell(index, -1)"
                        @move-down="moveCell(index, 1)"
                    />
                    
                </template>
                
                <cell-insertion-zone v-if="!isLocked"
                    :is-active="(activeIndex === -1 && notebook.cells.length === 0) || activeIndex === notebook.cells.length - 1"
                    :cell-count="notebook.cells.length"
                    @insert="(celltype) => insertCell(notebook.cells.length, celltype)"
                />

                <div class="box mt-6" v-if="notebook.cells.length === 0 && !loading">
                    <h1 class="title is-4 has-text-centered">Getting Started</h1>
                    <notebook-help />
                </div>

            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <settings-modal
        :is-active="showSettings"
        :gemini-api-key="geminiApiKey"
        :claude-api-key="claudeApiKey"
        @close="showSettings = false"
        @save="(keys) => {showSettings = false; saveSettings(keys); }"
    />
    <!-- Info Modal -->
    <info-modal
        :is-active="showInfo"
        @close="showInfo = false"
    />
    <!-- Test Help Modal -->
    <test-help-modal
        :is-active="showTestHelp"
        @close="showTestHelp = false"
    />

    </script>
    
  </body>
  <!-- Loads the index-specific js for Vue -->
  <script src="js/prism.min.js"></script>
  <script src="js/prism-python.min.js"></script>
  <script src="js/markdown-it.min.js"></script>
  <script type="module" src="js/nb.js"></script>
</html>

