<div *ngIf="questionsLoaded && currentQuestion != null" class="flex min-h-screen flex-col bg-gray-100">
  <header class="bg-white p-4 shadow-sm">
    <ng-container *ngIf="course == null; else full_title">
      <h1 class="text-lg font-semibold">Assignments &gt; {{assignment?.name}}</h1>
    </ng-container>
    <ng-template #full_title>
      <h1 class="text-lg font-semibold">{{course?.name}} &gt; Assignments &gt; {{assignment?.name}}</h1>
    </ng-template>
  </header>

  <div class="flex flex-1 flex-col md:flex-row">
    <main class="flex-1 p-6">
      <!-- Use the QuestionViewComponent here for current question -->
      <assignments-question-view-component
        [question]="currentQuestion"
        [selectedAnswer]="selectedAnswer"
        (selectedAnswerChange)="onSelectAnswer($event)"
        [isReadOnly]="false">
      </assignments-question-view-component>

      <div class="mt-6 flex justify-between">
        <button
          pButton
          label="Previous Question"
          icon="pi pi-chevron-left"
          iconPos="left"
          (click)="handlePreviousQuestion()"
          [disabled]="currentQuestionIndex === 0">
        </button>

        <ng-container *ngIf="!(currentQuestionIndex === questions.length - 1); else submit_button">
          <button
            pButton
            (click)="handleNextQuestion()"
            label="Next Question"
            icon="pi pi-chevron-right"
            iconPos="right">
          </button>
        </ng-container>

        <ng-template #submit_button>
          <button pButton (click)="handleSubmit()" label="Submit"></button>
        </ng-template>
      </div>
    </main>

    <aside class="w-full bg-white p-6 shadow-md md:w-64">
      <h2 class="mb-4 text-xl font-semibold">All Questions:</h2>
      <p-scrollPanel [style]="{height: 'calc(100vh - 12rem)'}">
        <div *ngFor="let question of questions; let i = index" class="mb-2 flex items-center">
          <p-checkbox
            [inputId]="'question-' + question.id"
            [binary]="true"
            [disabled]="true"
            [ngModel]="completedQuestions.includes(question.id || -1)">
          </p-checkbox>
          <label
            [for]="'question-' + question.id"
            class="ml-2 cursor-pointer"
            [class.font-bold]="i === currentQuestionIndex"
            (click)="setQuestionIndex(i)">
            Question {{i + 1}}
          </label>
        </div>
      </p-scrollPanel>
    </aside>
  </div>
</div>
