<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
  @if (featuredProject(); as project) {
    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full col-span-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
      <mat-card-header class="pb-4">
        <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 class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
      } @else {
        <div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
          <mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
        </div>
      }
      <mat-card-content class="grow pt-4 pb-4">
        <p>{{ project.introduction | translate }}</p>
        <mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
          @for(tech of project.technologies; track tech) {
            <mat-chip>{{tech}}</mat-chip>
          }
        </mat-chip-set>
      </mat-card-content>
      <mat-card-actions class="mt-auto">
        <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="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col h-full hover:-translate-y-[5px] hover:shadow-[0_4px_20px_rgba(0,0,0,0.15)]">
      <mat-card-header class="pb-4">
        <mat-card-title>{{ project.title | translate }}</mat-card-title>
      </mat-card-header>
       @if(project.images.length > 0) {
        <img mat-card-image class="w-full h-[clamp(150px,25vw,250px)] object-cover" [src]="project.images[0].url" [alt]="project.title | translate">
      } @else {
        <div class="flex justify-center items-center h-[clamp(150px,20vw,200px)] bg-[#f0f0f0]">
          <mat-icon class="text-[clamp(3rem,8vw,4rem)] w-[clamp(3rem,8vw,4rem)] h-[clamp(3rem,8vw,4rem)] text-[#666]">{{ project.icon }}</mat-icon>
        </div>
      }
      <mat-card-content class="grow pt-4 pb-4">
        <p>{{ project.shortDescription | translate }}</p>
        <mat-chip-set class="pt-fluid-sm" aria-label="Technologies">
          @for(tech of project.technologies; track tech) {
            <mat-chip>{{tech}}</mat-chip>
          }
        </mat-chip-set>
      </mat-card-content>
      <mat-card-actions class="mt-auto">
        <button mat-button (click)="openProjectDialog(project)">{{ 'PROJECTS.READ_MORE' | translate }}</button>
      </mat-card-actions>
    </mat-card>
  }
</div>
