Tasks/frontend/src/app/features/quiz/quiz-setup/quiz-setup.html

<div class="quiz-setup-container">
  <mat-card>
    <mat-card-header>
      <div class="header-content">
        <div class="header-title">
          <mat-icon class="header-icon">play_circle</mat-icon>
          <h1>Start New Quiz</h1>
        </div>
        <p class="subtitle">Configure your quiz settings and challenge yourself!</p>
      </div>
    </mat-card-header>

    <mat-card-content>
      <!-- Guest Warning -->
      @if (showGuestWarning()) {
      <div class="guest-warning">
        <mat-icon class="warning-icon">warning</mat-icon>
        <div class="warning-content">
          <p><strong>Limited Quizzes Remaining</strong></p>
          <p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
          <button mat-stroked-button color="primary" (click)="navigateToRegister()">
            Sign Up for Unlimited Access
          </button>
        </div>
      </div>
      }

      <!-- Loading State -->
      @if (isLoadingCategories()) {
      <div class="loading-container">
        <mat-spinner diameter="50"></mat-spinner>
        <p>Loading categories...</p>
      </div>
      }

      <!-- Setup Form -->
      @if (!isLoadingCategories()) {
      <form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">

        <!-- Category Selection -->
        <div class="form-section">
          <h2>
            <mat-icon>category</mat-icon>
            Select Category
          </h2>
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>Choose a category</mat-label>
            <mat-select formControlName="categoryId" required>
              @for (category of getAvailableCategories(); track category.id) {
              <mat-option [value]="category.id">
                <div class="category-option">
                  @if (category.icon) {
                  <mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
                  }
                  <span class="category-name">{{ category.name }}</span>
                  <span class="question-count">({{ category.questionCount }} questions)</span>
                </div>
              </mat-option>
              }
            </mat-select>
            @if (setupForm.get('categoryId')?.hasError('required') && setupForm.get('categoryId')?.touched) {
            <mat-error>Please select a category</mat-error>
            }
          </mat-form-field>

          @if (selectedCategory()) {
          <div class="category-preview">
            <mat-icon [style.color]="selectedCategory()?.color">{{ selectedCategory()?.icon }}</mat-icon>
            <div class="category-info">
              <h3>{{ selectedCategory()?.name }}</h3>
              <p>{{ selectedCategory()?.description }}</p>
            </div>
          </div>
          }
        </div>

        <!-- Question Count -->
        <div class="form-section">
          <h2>
            <mat-icon>format_list_numbered</mat-icon>
            Number of Questions
          </h2>
          <div class="question-count-selector">
            @for (count of questionCountOptions; track count) {
            <button type="button" mat-stroked-button [class.selected]="setupForm.get('questionCount')?.value === count"
              (click)="setupForm.patchValue({ questionCount: count })">
              {{ count }}
            </button>
            }
          </div>
          <p class="helper-text">Selected: {{ setupForm.get('questionCount')?.value }} questions</p>
        </div>

        <!-- Difficulty Selection -->
        <div class="form-section">
          <h2>
            <mat-icon>tune</mat-icon>
            Difficulty Level
          </h2>
          <div class="difficulty-selector">
            @for (difficulty of difficultyOptions; track difficulty.value) {
            <button type="button" mat-stroked-button class="difficulty-option"
              [class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
              (click)="setupForm.patchValue({ difficulty: difficulty.value })">
              <mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
              <span>{{ difficulty.label }}</span>
            </button>
            }
          </div>
        </div>

        <!-- Quiz Type Selection -->
        <div class="form-section">
          <h2>
            <mat-icon>mode</mat-icon>
            Quiz Mode
          </h2>
          <div class="quiz-type-selector">
            @for (type of quizTypeOptions; track type.value) {
            <mat-card class="quiz-type-card" [class.selected]="setupForm.get('quizType')?.value === type.value"
              (click)="setupForm.patchValue({ quizType: type.value })">
              <mat-icon class="type-icon">{{ type.icon }}</mat-icon>
              <h3>{{ type.label }}</h3>
              <p>{{ type.description }}</p>
            </mat-card>
            }
          </div>
        </div>

        <!-- Summary Card -->
        <div class="summary-section">
          <mat-card class="summary-card">
            <h3>
              <mat-icon>info</mat-icon>
              Quiz Summary
            </h3>
            <div class="summary-details">
              <div class="summary-item">
                <span class="label">Category:</span>
                <span class="value">{{ selectedCategory()?.name || 'Not selected' }}</span>
              </div>
              <div class="summary-item">
                <span class="label">Questions:</span>
                <span class="value">{{ setupForm.get('questionCount')?.value }}</span>
              </div>
              <div class="summary-item">
                <span class="label">Difficulty:</span>
                <span class="value">
                  {{ getSelectedDifficultyLabel() }}
                </span>
              </div>
              <div class="summary-item">
                <span class="label">Mode:</span>
                <span class="value">
                  {{ getSelectedQuizTypeLabel() }}
                </span>
              </div>
              <div class="summary-item">
                <span class="label">Estimated Time:</span>
                <span class="value">~{{ estimatedTime() }} minutes</span>
              </div>
            </div>
          </mat-card>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons">
          <button type="button" mat-stroked-button routerLink="/categories">
            <mat-icon>arrow_back</mat-icon>
            Back to Categories
          </button>
          <button type="submit" mat-raised-button color="primary" [disabled]="(setupForm.invalid && !isStartingQuiz())">
            @if (isStartingQuiz()) {
            <mat-spinner diameter="20"></mat-spinner>
            <span>Starting...</span>
            } @else {
            <ng-container>
              <mat-icon>play_arrow</mat-icon>
              <span>Start Quiz</span>
            </ng-container>
            }
          </button>
        </div>
      </form>
      }
    </mat-card-content>
  </mat-card>
</div>