{% raw %}
<div id="app">
<div class="content-row">
    <div class="left-menu">
    <!-- Create New Quiz button as a list item -->
    <h3 @click="startNewQuiz">
      ＋ Create new
    </h3>
    <ul>

    <!-- Existing Quizzes list -->
      <li 
        v-for="quiz in quizList" 
        :key="quiz.quiz_id" 
        @click="getFullQuiz(quiz.quiz_id, true)"
        :class="{ selected: quiz.quiz_id === quizSelected }" 
      >
        {{ quiz.name }}
      </li>
    </ul>
  </div> <!-- ends left-menu -->

  <div class="main-content">


    <!-- Quiz title and status -->
    <div class="focus-object-line">
      <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="editingQuizName">
            <input 
              v-model="quizNameDraft"
              @blur="saveQuizName"
              @keyup.enter="saveQuizName"
              style="font-size: 1.5em; padding: 2px 6px;"
            />
          </template>

          <template v-else>
            <h2
              @click="(quizSelected || creatingNewQuiz) ? startEditingQuizName() : null"
              style="margin: 0;"
            >
              {{ quizName }}
            </h2>

            <span
              v-if="(quizSelected || creatingNewQuiz)"
              class="rename-icon"
              @click="startEditingQuizName"
              title="Rename"
            >
              🖉
            </span>
          </template>

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

    <div class="explanation-box" v-if="!quizSelected && !creatingNewQuiz">
      Create chat-based interactive quizzes based on documents in your library. Such quizzes can be used to let students interactively work with your course material.<br>
      Using Chat Quizzes is further 
          <a 
            href="https://docs.google.com/document/d/1uUg41KLDX7WaqRNs79GyJJYdZySLtIG5Wr1LCEbzysM/edit?usp=sharing"
            target="_blank"
            rel="noopener noreferrer"
          >
            explained here
          </a>.
    </div>

    <!-- Collapsible Card: Used for creating a Quiz -->
    <div class="card" v-if="creatingNewQuiz">
      <div class="card-header"
          :class="{ disabled: false }"
          @click="showCreatePanel = !showCreatePanel">
        <h4>Create chat quiz</h4>
        <span class="toggle-icon">{{ showCreatePanel ? '▲' : '▼' }}</span>
      </div>

      <transition name="collapse">
        <div class="card-body" v-show="showCreatePanel">
          <div class="explanation-box">
            <ul style="margin: 0; padding-left: 1.2em;">
              <li> Chat quizzes are based on a single document from your library. Heymans randomly chooses a text chunk from this document to quiz students.
              <li> You may use 'public' documents, which are managed by other users.
            </ul>
          </div>

          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
            <p class="heymans-msg" style="margin: 0;">
              Show public documents
            </p>

            <label class="switch">
              <input
                type="checkbox"
                v-model="showPublicDocuments"
                @change="fetchDocumentList"
              >
              <span class="slider"></span>
            </label>
          </div>

          <div class="doc-picker-list">
            <div
              v-for="doc in documentList"
              :key="doc.document_id"
              class="doc-picker-item"
              :class="{ selected: doc.document_id === createForm.document_id }"
              @click="createForm.document_id = doc.document_id"
            >
              <span :style="{ fontStyle: doc.public ? 'italic' : 'normal' }">
                {{ doc.name }}<span v-if="doc.public">*</span>
              </span>
            </div>
          </div>

          <div class="button-row" style="margin-top: 1em;">
            <button
              class="regular-button"
              @click="createNewQuiz"
              :disabled="!createForm.document_id || !quizNameDraft.trim()"
            >
              Create chat quiz
            </button>

            <button
              class="regular-button"
              @click="cancelNewQuiz"
            >
              Cancel
            </button>
          </div>
        </div>
      </transition>
    </div>

    <!-- Collapsible Card: Overview and test -->
    <div class="card" v-if="quizSelected && !creatingNewQuiz">
      <div class="card-header"
          :class="{ disabled: false }"
          @click="showOverviewPanel = !showOverviewPanel">
        <h4>Chat quiz details</h4>
        <span class="toggle-icon">{{ showOverviewPanel ? '▲' : '▼' }}</span>
      </div>

      <transition name="collapse">
        <div class="card-body" v-show="showOverviewPanel">

          <div class="explanation-box">
            <ul style="margin: 0; padding-left: 1.2em;">
              <li> When sharing the link with your students, make sure they use their actual student number when opening the chat.
              <li> You can use the test button to try the chat for yourself.
              <li> The card below provides an overview of users who have  started and/or finished this chat quiz.
            </ul>
          </div>


          <p class="focus-object-msg" v-if="selectedDocumentName">
            Source document: <strong>{{ selectedDocumentName }} </strong>
          </p>

          <p class="focus-object-msg" v-else>
            No source document information available yet.
          </p>

          <p class="focus-object-msg">
            Chats finished / started: 
            {{ conversationsFinished }}/{{ conversationsStarted }}
          </p>

          <div style="display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 1em;">
            
            <!-- LEFT: sharing link -->
            <div style="flex: 1; min-width: 0;">
              <p class="heymans-msg" style="margin: 0 0 0.4em 0;">
                Chat link for students:
              </p>

              <div style="margin: 0;">
                <md-report
                  v-if="shareLink"
                  :content="shareLink"
                  :copyable="true"
                  :compact="true"
                ></md-report>
              </div>
            </div>

            <!-- RIGHT: test button -->
            <div style="display: flex; align-items: flex-end;">
              <button
                class="regular-button"
                @click="startTestConversation"
                style="white-space: nowrap;"
              >
                Test chat
              </button>
            </div>

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



    <!-- Collapsible Card: statistics: -->
    <div class="card"  v-if="quizSelected">
      <div class="card-header" 
          :class="{ disabled: false }"
          @click="showStatsPanel = !showStatsPanel">
        <h4> Chat logs and scores </h4>
        <span class="toggle-icon">{{ showStatsPanel ? '▲' : '▼' }}</span>
      </div>
      <transition name="collapse">
        <div class="card-body" v-show="showStatsPanel">
          <div class="button-row">
            <button class="regular-button" @click="exportScores" :disabled="!quizSelected || spinExportScores">
              Export Scores
            </button>
            <spinner-gap :active="spinExportScores"></spinner-gap>
          </div>

          <div class="explanation-box" v-if="!conversationOverviewRows.length" style="margin-top: 1em;">
            No chat sessions have been started yet.
          </div>

          <div v-else style="overflow-x: auto; margin-top: 1em;">
            <table style="width: 100%; border-collapse: collapse;">
              <thead>
                <tr>
                  <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Username</th>
                  <th style="text-align: right; padding: 8px; border-bottom: 1px solid #ddd;">Started</th>
                  <th style="text-align: right; padding: 8px; border-bottom: 1px solid #ddd;">Finished</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="row in conversationOverviewRows"
                  :key="row.username"
                  class="clickable-log-row"
                  @click="openUserLogs(row.username)"
                  @keydown.enter.prevent="openUserLogs(row.username)"
                  @keydown.space.prevent="openUserLogs(row.username)"
                  tabindex="0"
                  title="Open chat logs for this user"
                >
                  <td style="padding: 8px; border-bottom: 1px solid #eee;">{{ row.username }}</td>
                  <td style="padding: 8px; border-bottom: 1px solid #eee; text-align: right;">{{ row.started }}</td>
                  <td style="padding: 8px; border-bottom: 1px solid #eee; text-align: right;">{{ row.finished }}</td>
                </tr>
              </tbody>
            </table>
          </div>

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

    <!-- Button to delete quiz: -->
    <div class="button-row" style="justify-content: flex-end;"  v-if="quizSelected">
      <button class="regular-button" @click="deleteQuiz" :disabled="!quizSelected">
        Delete quiz
      </button>
    </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>quizList: {{ quizList }}</pre>
      <pre>quizSelected: {{ quizSelected }}</pre>
      <pre>fullQuizData: {{ fullQuizData }}</pre>
      
      <pre>creatingNewQuiz: {{ creatingNewQuiz }}</pre>
      <pre>quizName: {{ quizName }}</pre>
      <pre>editingQuizName: {{ editingQuizName }}</pre>

    </div>

  </div>  <!-- end main-content -->

</div> <!--  end 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 %}