@if (assignee) {
  <div class="card mb-3">
    <div class="card-body d-flex align-items-center">
      @if (evaluating) {
        <a class="btn btn-primary bi-code me-2" [href]="assignment!|cloneLink:solution!:config|safeUrl" target="_blank">
          Clone in IDE
        </a>
        <button class="btn btn-primary bi-rocket me-2" [disabled]="launching" (click)="launch()">
          Launch in Projects
        </button>
        <app-timetracking #timer [(duration)]="assignee.duration!" class="me-2"></app-timetracking>
        <button class="btn btn-danger bi-stop me-2" (click)="timer.pause(); saveDuration(); evaluating = false">
          Stop
        </button>
      } @else {
        <button (click)="evaluating = true" class="btn btn-primary bi-play me-2">
          Start
        </button>
        @if (assignee.duration) {
          <span class="text-muted me-2">Duration: {{ assignee.duration | duration }}</span>
        }
        <a routerLink="feedback">
          @if (assignee.feedback) {
            View Feedback
          } @else {
            Add Feedback
            <i class="bi-question-circle" ngbTooltip="Help make fulib.org better by rating your experience while grading this solution."></i>
          }
        </a>
      }
      <div class="form-check form-switch ms-auto">
        <input class="form-check-input" type="checkbox" role="switch" id="switch-show-notes" [(ngModel)]="showNotes">
        <label class="form-check-label" for="switch-show-notes">Show Notes</label>
      </div>
    </div>
  </div>
}
<div class="row">
  <div class="col">
    @if (assignment) {
      <app-task-list
        [allTasks]="assignment.tasks"
        [tasks]="assignment.tasks"
        [evaluations]="evaluations"
        [editable]="evaluating"
        [points]="points"
      ></app-task-list>
    } @else {
      Loading...
    }
  </div>
  @if (showNotes) {
    <div class="col">
      <div class="mb-3">
        <label for="notes-textarea" class="form-label">
          Notes
          <i class="bi-question-circle" ngbTooltip="Notes are private and only visible to assignees."></i>
        </label>
        <app-markdown-editor
          textareaId="notes-textarea"
          placeholder="Add notes for this solution..."
          [rows]="10"
          [content]="assignee?.notes ?? ''"
          (contentChange)="assignee && (assignee.notes = $event)"
        ></app-markdown-editor>
      </div>
      <button class="btn btn-primary" (click)="saveNotes()">
        Save
      </button>
    </div>
  }
</div>
<router-outlet></router-outlet>