<h2 mat-dialog-title>{{ project.title | translate }}</h2>
<mat-dialog-content #dialogContent>
  <p>{{ project.introduction | translate }}</p>

  <ul>
    @for(bullet of project.bulletPoints; track bullet) {
      <li>{{ bullet | translate }}</li>
    }
  </ul>

  @if (project.images.length > 0)
  {
    <swiper-container
      class="my-swiper"
      [attr.slides-per-view]="1.2"
      [attr.space-between]="12"
      [attr.navigation]="true"
      [attr.pagination]="true"
      [attr.keyboard]="true"
      style="width: 100%;"
    >
      @for (img of project.images; track img) {
        <swiper-slide>
          <img
            class="slide-img"
            [src]="img.url"
            [alt]="project.title | translate"
          />
          @if (img.source) {
            <div class="slide-source">
              {{ img.source }}
            </div>
          }
        </swiper-slide>
      }
    </swiper-container>
  }

  <mat-chip-set aria-label="Technologies">
    @for(tech of project.technologies; track tech) {
      <mat-chip>{{tech}}</mat-chip>
    }
  </mat-chip-set>

  <div class="link-section">
    @for(link of project.links; track link)
    {
      <a mat-button href="{{link.url}}" target="_blank" rel="noopener noreferrer">
        <mat-icon>open_in_new</mat-icon>
        {{ link.name | translate }}
      </a>
    }

    @if(project.assets)
    {
      <a mat-button href="{{project.assets}}" rel="noopener noreferrer">
        <mat-icon>download</mat-icon>
        {{ 'PROJECTS.DOWNLOAD' | translate}}
      </a>
    }
  </div>

</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>{{ 'PROJECTS.CLOSE' | translate }}</button>
</mat-dialog-actions>
