{% raw %}
<div id="app">
<div class="content-row">
  <div class="left-menu">
    <!-- Create New document button as a list item -->
    <h3 @click="createNewDoc">
      <input
        ref="fileInput"
        type="file"
        accept=".pdf,.txt,.docx,.md"
        style="display: none"
        @change="uploadDocument"
      />
      ＋ Create new
    </h3>
    <ul>
      <!-- Existing document, list -->
      <li 
        v-for="doc in docList" 
        :key="doc.document_id" 
        @click="showDoc(doc.document_id, true)" 
        :class="{ selected: doc.document_id === docSelected }"
      >
        <span :style="{ fontStyle: doc.public ? 'italic' : 'normal' }">
          {{ doc.name }}<span v-if="doc.public">*</span>
        </span>
      </li>
    </ul>
  </div>  <!-- ends the left-menu -->


  <!-- main content: show (selected document) -->
  <div class="main-content">
    <!-- Only show this when a document is selected -->
    <div v-if="docSelected">
      <!-- Editable h2 style title: -->
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <!-- LEFT: Editable title -->
        <div class="doc-title" style="display: inline-flex; align-items: center; gap: 8px;">
          
          <template v-if="editingDocName">
            <input 
              v-model="docNameDraft"
              @blur="saveDocName"
              @keyup.enter="saveDocName"
              style="font-size: 1.5em; padding: 2px 6px;"
            />
          </template>

          <template v-else>
            <h2 @click="startEditingDocName" style="margin: 0;">
              {{ docName }}
            </h2>

            <span 
              class="rename-icon"
              @click="startEditingDocName"
              title="Rename"
            >
              🖉
            </span>
          </template>

        </div>

        <!-- RIGHT: Public toggle -->
        <div style="display: flex; align-items: center; gap: 10px;">
          
          <p class="heymans-msg" style="margin: 0;">
            Public document
          </p>

          <label class="switch">
            <input 
              type="checkbox" 
              v-model="docPublic"
              @change="updateDocPublic"
            >
            <span class="slider"></span>
          </label>

        </div>
      </div>
      <!-- Show the chunks as collabsible cards: -->
      <p class="heymans-msg">
        This document has {{ docChunkCount }} chunk(s):
      </p>

      <div v-for="(chunk, index) in docChunks" :key="index" class="card">
        <div class="card-header" @click="toggleChunk(index)">
          <h4>Chunk {{ index + 1 }}</h4>
          <span class="toggle-icon">
            {{ openChunks.has(index) ? '▲' : '▼' }}
          </span>
        </div>

        <transition name="collapse">
          <div class="card-body" v-show="openChunks.has(index)">
            <md-report
              :content="chunk.content"
              :copyable="true"
            ></md-report>
          </div>
        </transition>
      </div>

      <!-- Delete Button -->
      <div class="button-row" style="justify-content: flex-end; margin-top: 20px;">
        <button class="regular-button" @click="deleteDoc" :disabled="!docSelected">
          Delete document
        </button>
      </div>

    </div>

    <!-- Show helpful info when no doc is selected -->
    <div v-else>
      <!-- Explanation box (always visible) -->
      <div class="explanation-box">
          Add documents to be used for chat quizzes. Using documents is
          <a 
            href="https://docs.google.com/document/d/1uUg41KLDX7WaqRNs79GyJJYdZySLtIG5Wr1LCEbzysM/edit?usp=sharing"
            target="_blank"
            rel="noopener noreferrer"
          >
            explained here
          </a>.
        <ul style="margin: 0; padding-left: 1.2em;">
          <li> Supported file types are .txt, .md, .docx, .pdf . Any doc is converted to plain text.
          <li> You can make your documents 'public', in which case they can be viewed and used by others.
          <li> Chat quizzes are based on a single document. Heymans randomly selects a chunk from a document to quiz students on.
        </ul>
      </div>
      <!-- Dynamic fallback message -->
      <p class="heymans-msg">
        {{ fallbackMessage }}
      </p>

    </div>

    <div id="overlay" class="overlay" style="display: none;">
      <div class="overlay-content">
        <!-- Optional icon -->
        <div id="overlay-icon" class="overlay-icon" style="display: none;">⚠️</div>

        <!-- Message -->
        <div id="overlay-msg" class="overlay-msg"></div>

        <!-- Optional spinner -->
        <div id="overlay-spinner" class="spinner" style="display: none; margin-bottom: 10px;"></div>

        <!-- Optional buttons -->
        <div class="button-row" style="margin-top: 10px;">
          <button id="overlay-confirm-btn" class="regular-button" style="display: none;">Confirm</button>
          <button id="overlay-close-btn" class="regular-button" style="display: none;">Close</button>
        </div>
      </div>
    </div>

    <div class="debuginfo">
      <pre> doc selected : {{docSelected}}</pre>
      <pre> doc name : {{docName}}</pre>
      <pre> chunks : {{docChunks}} </pre>
      <pre> doc list: {{docList}}</pre>
    </div>

  </div> <!-- ends the main-content -->
</div> <!-- ends the content-row -->
</div> <!-- ends the app -->
{% endraw %}

{% if showDebugInfo %}
<script>
// Set display to block for all debuginfo class divs
document.querySelectorAll('.debuginfo').forEach(function(div) {
  div.style.display = 'block';
});
</script>
{% endif %}