<h2 mat-dialog-title>{{ project.title | translate }}</h2>
<mat-dialog-content #dialogContent>
  <div class="flex flex-col gap-6">
    <div>
      <p class="text-lg leading-relaxed opacity-90 mb-4">{{ project.introduction | translate }}</p>

      <div class="mb-6">
        <ul class="pl-5">
          @for(bullet of project.bulletPoints; track bullet) {
          <li class="mb-2">{{ bullet | translate }}</li>
          }
        </ul>
      </div>

      <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] sm-dialog:grid-cols-1 gap-4 mb-4">
        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
          <div class="flex items-center gap-3 mb-3 text-link">
            <mat-icon class="!text-[24px] !w-6 !h-6">settings_suggest</mat-icon>
            <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.TECHNICAL' | translate }}</h3>
          </div>
          <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
            @for(challenge of project.challenges; track challenge) {
            <li class="mb-1">{{ challenge | translate }}</li>
            }
          </ul>
        </div>

        <div class="p-5 rounded-xl bg-black/[.03] border border-black/[.05] dark:bg-white/[.05] dark:border-white/10">
          <div class="flex items-center gap-3 mb-3 text-link">
            <mat-icon class="!text-[24px] !w-6 !h-6">psychology</mat-icon>
            <h3 class="m-0 text-sm uppercase tracking-wider font-semibold">{{ 'PROJECTS.SECTION.LEARNINGS' | translate }}</h3>
          </div>
          <ul class="m-0 pl-5 text-[0.95rem] leading-relaxed opacity-85">
            @for(learning of project.learnings; track learning) {
            <li class="mb-1">{{ learning | translate }}</li>
            }
          </ul>
        </div>
      </div>
    </div>

    @if (project.images.length > 0)
    {
    <div class="my-4 rounded-xl overflow-hidden bg-black">
      <swiper-container class="my-swiper rounded-xl" [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 class="rounded-xl overflow-hidden flex flex-col bg-[#222]">
          <img class="w-full h-auto !max-h-[clamp(300px,60vh,512px)] object-contain block shrink-0" [src]="img.url" [alt]="project.title | translate" />
          @if (img.source) {
          <div class="text-xs text-[#aaa] bg-[#2a2a2a] p-2 text-right border-t border-[#444]">
            {{ img.source }}
          </div>
          }
        </swiper-slide>
        }
      </swiper-container>
    </div>
    }

    <div class="flex flex-col gap-4 pt-4 border-t border-black/10 dark:border-white/10">
      <div class="flex flex-wrap">
        <mat-chip-set aria-label="Technologies">
          @for(tech of project.technologies; track tech) {
          <mat-chip>{{tech}}</mat-chip>
          }
        </mat-chip-set>
      </div>

      <div class="flex flex-wrap gap-fluid-sm mt-6">
        @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>
