<h2 mat-dialog-title>{{ project.title | translate }}</h2>
<mat-dialog-content #dialogContent>
  <div class="project-dialog-layout">
    <div class="project-info">
      <p class="introduction">{{ project.introduction | translate }}</p>

      <div class="features-list">
        <ul>
          @for(bullet of project.bulletPoints; track bullet) {
          <li>{{ bullet | translate }}</li>
          }
        </ul>
      </div>

      <div class="insight-grid">
        <div class="insight-card technical">
          <div class="insight-header">
            <mat-icon>settings_suggest</mat-icon>
            <h3>{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
          </div>
          <ul>
            @for(challenge of project.challenges; track challenge) {
            <li>{{ challenge | translate }}</li>
            }
          </ul>
        </div>

        <div class="insight-card softskills">
          <div class="insight-header">
            <mat-icon>psychology</mat-icon>
            <h3>{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
          </div>
          <ul>
            @for(learning of project.learnings; track learning) {
            <li>{{ learning | translate }}</li>
            }
          </ul>
        </div>
      </div>
    </div>

    @if (project.images.length > 0)
    {
    <div class="media-section">
      <swiper-container class="my-swiper" [attr.slides-per-view]="1" [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>
    </div>
    }

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

      <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>
    </div>
  </div>

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