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

    <!-- Existing quiz 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;">
        
        <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 ? startEditingQuizName() : null"
              style="margin: 0;"
            >
              {{ quizName }}
            </h2>

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

        </div>

        <!-- optional status on the right later -->
        <!-- <p class="heymans-msg" style="margin: 0;">{{ quizStateLabel }}</p> -->
      </div>
    </div>
    <!-- Collapsible Card: Create and Validate -->
    <div class="card"  v-if="quizSelected">
      <div class="card-header" 
          :class="{ disabled: !cardActiveCreate }"
          @click="showCreatePanel = !showCreatePanel">
        <h4> Defining the quiz </h4>
        <span class="toggle-icon">{{ showCreatePanel ? '▲' : '▼' }}</span>
      </div>
      <transition name="collapse">
        <div class="card-body" v-show="showCreatePanel">
          <div class="explanation-box">
          <ol>
            <li>Create a quiz file. This quiz file defines the quiz title, questions and answer keys. The format is
              <a href="https://docs.google.com/document/d/1uUg41KLDX7WaqRNs79GyJJYdZySLtIG5Wr1LCEbzysM/edit?usp=sharing" target="_blank" rel="noopener noreferrer">explained here</a>.
            </li>
            <li>Use <em>Upload Quiz</em> to upload this quiz file to Heymans.</li>
            <li>Optional: Use <em>Validate Quiz</em> to let Heymans assess the wording of questions and answer keys. Before incorporating suggestions from the validation report, critically consider whether they are appropriate.</li>
            <li>Use <em>Export Quiz</em> to download the quiz in a Brightspace-compliant csv format.</li>
            <li>On Brightspace, create a new quiz (or edit an existing quiz). Upload the Brightspace-complient csv file using <em>Add existing → Upload a file</em>.
            </li>
            <li>Your quiz is now ready to be administered through Brightspace!</li>
          </ol>
        </div>
          <div class="button-row">
          <!-- Triggering file upload event -->
          <button class="regular-button" @click="checkBeforeQuizUpload" :disabled="!buttonActiveUpload">
            Upload Quiz
          </button>
          <input ref="fileInput" type="file" accept=".md,.txt" style="display: none" @change="uploadQuiz" />
          <input ref="fileInput" type="file" accept=".md,.txt" style="display: none" @change="uploadQuiz"/>
            <button class="llm-button" @click="validateQuiz" :disabled="!buttonActiveValidate">
              Validate Quiz
            </button>

            <button class="regular-button" @click="exportQuiz" :disabled="!(quizState=='has_questions')"> 
              Export Quiz
            </button>
          </div>
          <!-- upload and validate -->
          <p class="heymans-msg">
            Quiz has {{quizLen}} questions.
            {{ validationMessage }}
          </p>

          <!-- Validation report (copyable) -->
          <md-report
            v-if="validationReport"
            :content="validationReport"
            :copyable="true"
          />        
        </div>
      </transition>
    </div>

    <!-- Collapsible Card: Grade attempts -->
    <div class="card"  v-if="quizSelected">
      <div class="card-header" 
          :class="{ disabled: !cardActiveGrade }"
          @click="showGradePanel = !showGradePanel">
        <h4> Grading attempts </h4>
        <span class="toggle-icon">{{ showGradePanel ? '▲' : '▼' }}</span>
      </div>
      <transition name="collapse">
        <div class="card-body" v-show="showGradePanel && cardActiveGrade">
          <div class="explanation-box">
          <ol>
            <li>Download students' attempts on Brightspace via <em>Assessment → Grade (available under the menu next to your quiz) -> Export to CSV</em>, and download the exported csv file when it's ready.</li>
            <li>Use <em>Upload Attempts</em> to upload this csv file.</li>
            <li>Use <em>Start Grading</em>. Depending on the number of students and questions, this may take up to one hour.</li>
            <li>Once grading is completed, a qualitative evaluation of incorrect student responses is generated. This includes suggestions to improve answer keys to avoid attempts from unfairly being marked as incorrect. Before incorporating suggestions, critically consider whether they are appropriate.</li>
          </ol>   
        </div>


          <div class="button-row">
          <!-- Triggering file upload event -->
          <button class="regular-button" @click="checkBeforeAttemptsUpload" :disabled="!buttonActiveUpload">
            Upload Attempts
          </button>
          <input 
            ref="attemptsInput" 
            type="file" 
            accept=".csv" 
            style="display: none" 
            @change="uploadAttempts" />
          <button class="llm-button" @click="gradeQuiz" :disabled="!buttonActiveGrade">
              Start Grading
            </button>

          </div>
          <!-- upload and validate -->
          <p class="heymans-msg">
            {{ gradingMessage }}
          </p>

          <!-- Analysis report (copyable) -->
          <md-report
            v-if="analysisReport"
            :content="analysisReport"
            :copyable="true"
          />

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

    <!-- Collapsible Card: Analyze results -->
    <div class="card"  v-if="quizSelected">
      <div class="card-header" 
        :class="{ disabled: !cardActiveAnalyze }"
        @click="showAnalyzePanel = !showAnalyzePanel">
        <h4>Analyzing results</h4>
        <span class="toggle-icon">{{ showAnalyzePanel ? '▲' : '▼' }}</span>
      </div>
      <transition name="collapse">
        <div class="card-body" v-show="showAnalyzePanel && cardActiveAnalyze">
          <div class="explanation-box">
          <ul>
            <li>Use <em>Export Scores</em> to download scores per student in a Brightspace-compliant csv format.</li>
            <li>Use <em>Export Feedback</em> to download a zip file with individual feedback reports. Generating this could take a few minutes. Feedback reports can be emailed to students, or referenced in an exam inspection. (Brightspace currently does not allow you to upload feedback.)</li>
        </ul>
        </div>
          <div class="button-row">
            <button class="regular-button" @click="exportScores" :disabled="!(gradingStatus=='grading_done')">
              Export Scores
            </button>
            <button class="regular-button" @click="exportItemAnalysis" :disabled="!(gradingStatus=='grading_done')">
              Item Analysis
            </button>
            <button class="regular-button" @click="exportAnalysis" :disabled="!cardActiveAnalyze">
              Export Feedback
            </button>
            <spinner-gap :active="spinExportFeedback"></spinner-gap>
          </div>

          <p class="heymans-msg">
            Your quiz has been graded. Download the scores and individual feedback reports here.
          </p>
        </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>{{ quizSelected }}</pre>
      <pre>cardActiveCreate: {{ cardActiveCreate }}</pre>
      <pre>quizState: {{ quizState }}</pre>
      <pre>gradingStatus: {{ gradingStatus }}</pre>
      <pre>{{ fullQuizData }}</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 %}