iwa_252490/project/frontend-angular/src/app/subjects/subjects.html

<div class="subjects-container">
  <div class="add-subject-section">
    <h1 class="section-title">Add New Subject</h1>
    <form name="form" (ngSubmit)="f.form.valid && addSubject()" #f="ngForm" novalidate class="subject-form">
      <div class="form-group">
        <input 
          type="text" 
          name="name" 
          placeholder="Subject Name" 
          [(ngModel)]="form.name" 
          #name="ngModel" 
          required 
          class="form-input"
        />
        <div class="error-message" *ngIf="f.submitted && name.invalid">
          Name is required
        </div>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn-primary">Add Subject</button>
        <div class="error-message" *ngIf="f.submitted && isAddFailed">
          Subject addition failed: {{ errorMessage }}
        </div>
      </div>
    </form>
  </div>

  <div class="subjects-list-section">
    <h2 class="section-title">Your Subjects</h2>
    <div class="empty-state" *ngIf="(subjectList?.length || 0) === 0">
      <p class="empty-message">You have no subjects yet</p>
    </div>
    <div class="subjects-grid" *ngIf="(subjectList?.length || 0) > 0">
      <div class="subject-card" *ngFor="let subject of subjectList">
        <a [routerLink]="['/subjects/', subject.id]" class="subject-link">
          <h3 class="subject-name">{{ subject.name }}</h3>
          <div class="subject-arrow">→</div>
        </a>
      </div>
    </div>
  </div>
</div>