<div class="project-grid">
  @if (featuredProject(); as project) {
    <mat-card class="project-card featured">
      <mat-card-header>
        <mat-card-title>{{ project.title | translate }}</mat-card-title>
        <mat-card-subtitle>{{ project.shortDescription | translate }}</mat-card-subtitle>
      </mat-card-header>
      @if(project.images.length > 0) {
        <img mat-card-image [src]="project.images[0]" [alt]="project.title | translate">
      } @else {
        <div class="icon-container">
          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
        </div>
      }
      <mat-card-content>
        <p>{{ project.introduction | translate }}</p>
        <mat-chip-set aria-label="Technologies">
          @for(tech of project.technologies; track tech) {
            <mat-chip>{{tech}}</mat-chip>
          }
        </mat-chip-set>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
      </mat-card-actions>
    </mat-card>
  }

  @for (project of otherProjects(); track project) {
    <mat-card class="project-card">
      <mat-card-header>
        <mat-card-title>{{ project.title | translate }}</mat-card-title>
      </mat-card-header>
       @if(project.images.length > 0) {
        <img mat-card-image [src]="project.images[0]" [alt]="project.title | translate">
      } @else {
        <div class="icon-container">
          <mat-icon class="fallback-icon">{{ project.icon }}</mat-icon>
        </div>
      }
      <mat-card-content>
        <p>{{ project.shortDescription | translate }}</p>
        <mat-chip-set aria-label="Technologies">
          @for(tech of project.technologies; track tech) {
            <mat-chip>{{tech}}</mat-chip>
          }
        </mat-chip-set>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
      </mat-card-actions>
    </mat-card>
  }
</div>
