<section class="grid gap-fluid-md max-w-app mx-4 mt-auto">
  <mat-card>
    <div class="flex flex-wrap gap-fluid-lg p-fluid-md items-start">
      <div class="flex-[1_1_min(100%,425px)] max-w-full flex justify-center">
        <img class="block w-full h-auto max-w-[425px] rounded-xl shadow-[0_6px_24px_rgba(0,0,0,0.25)] object-cover"
          [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
          draggable="false" oncontextmenu="return false;" priority />
      </div>

      <div class="flex-[999_1_min(100%,400px)]">
        <h1 class="mt-0 mb-2 text-[clamp(1.5rem,5vw,2.5rem)]">{{ 'ABOUT.HELLO' | translate }}</h1>
        <p class="opacity-90 my-2 mb-4 text-[clamp(1rem,2.5vw,1.15rem)]">
          {{ 'ABOUT.LEAD' | translate }}
        </p>

        <div class="flex flex-col gap-1 mb-2">
          <div class="flex items-center flex-wrap gap-[0.4rem]">
            <mat-icon aria-hidden="true">work</mat-icon>
            <span>{{ 'ABOUT.ROLE' | translate }}</span>
          </div>
          <div class="flex items-center flex-wrap gap-[0.4rem]">
            <mat-icon aria-hidden="true">location_on</mat-icon>
            <span>{{ 'ABOUT.LOCATION' | translate }}</span>
          </div>
          <div class="flex items-center flex-wrap gap-[0.4rem]">
            <mat-icon aria-hidden="true">email</mat-icon>
            <a href="" (click)="SharedFunctions.openMail($event)">
              {{ 'ABOUT.CONTACT_ME' | translate }}
            </a>
          </div>
          <div class="flex items-center flex-wrap gap-[0.4rem]">
            <mat-icon>data_object</mat-icon>
            <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
            <span>·</span>
            <mat-icon svgIcon="linkedin"></mat-icon>
            <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
          </div>
        </div>
      </div>
    </div>
  </mat-card>

  <mat-card class="p-[clamp(5px,2vw,15px)]">
    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.SKILLS' | translate }}</h2>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-fluid-sm ml-1 mb-2">
      <div>
        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.BACKEND_ARCH' | translate }}</h3>
        <mat-chip-set aria-label="Backend and Architecture">
          @for (s of skillsArchitecture; track s) {
          <mat-chip>{{ s | translate }}</mat-chip>
          }
        </mat-chip-set>
      </div>

      <div>
        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.INFRA_CLOUD' | translate }}</h3>
        <mat-chip-set aria-label="Infrastructure and Cloud">
          @for (s of skillsCore; track s) {
          <mat-chip>{{ s | translate }}</mat-chip>
          }
        </mat-chip-set>
      </div>

      <div>
        <h3 class="my-1 text-[0.95rem] opacity-85">{{ 'ABOUT.SECTION.SIM_ALGO' | translate }}</h3>
        <mat-chip-set aria-label="Simulation and Algorithms">
          @for (s of skillsEngineering; track s) {
          <mat-chip>{{ s | translate }}</mat-chip>
          }
        </mat-chip-set>
      </div>
    </div>
  </mat-card>

  <mat-card class="p-[clamp(5px,2vw,15px)]">
    <h2 class="mt-1 ml-2 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
    <div class="ml-1 grid gap-fluid-sm">
      @for (entry of xpKeys; track entry.key) {
      <div>
        <div class="grid grid-cols-[auto_1fr] gap-x-3">
          <div class="row-span-2 col-start-1 flex items-center">
            <img src="{{entry.logo}}" alt="" class="w-10 h-10 object-contain opacity-90 rounded-[10%] bg-logo-bg" aria-hidden="true" />
          </div>
          <div class="row-start-1 col-start-2 flex flex-wrap items-baseline gap-x-4 gap-y-1">
            <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.ROLE') | translate }}</strong>
            <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.TIME') | translate }}</span>
          </div>

          <div class="row-start-2 col-start-2 mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
            {{ (entry.key + '.COMPANY') | translate }}
          </div>

        </div>
        @if (!entry.no_highlights) {
          <div class="mt-[0.4rem] ml-[clamp(0.25rem,1vw,0.75rem)] pl-[clamp(0.8rem,2vw,1.2rem)]">
            <ul>
              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
              <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
            </ul>
          </div>
        }
      </div>

        @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
        {
          <mat-divider></mat-divider>
        }
      }
    </div>
  </mat-card>
  <mat-card class="p-[clamp(5px,2vw,15px)]">
    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>

    <div class="ml-1 grid gap-fluid-sm">
      @for (entry of projectKeys; track entry.key) {
      <div>
        <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.TITLE') | translate }}</strong>
        </div>
        <div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
          {{ (entry.key + '.DESCRIPTION') | translate }}
        </div>
        @if (entry.externalLink) {
        <div class="mt-[0.1rem] opacity-85">
          <a class="inline-flex items-center gap-[0.35rem] leading-none" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">open_in_new</mat-icon>
            {{ (entry.key + '.LINK_EXTERNAL') | translate }}
          </a>
        </div>
        }
        <div class="mt-[0.1rem] opacity-85">
          <a class="inline-flex items-center gap-[0.35rem] leading-none" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
            rel="noopener noreferrer">
            <mat-icon class="!text-[18px] !w-[18px] !h-[18px]">link</mat-icon>
            {{ (entry.key + '.LINK_INTERNAL') | translate }}
          </a>
        </div>
        <div>
          <ul>
            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
            <li class="my-1 text-[clamp(0.9rem,2vw,1rem)]">{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
          </ul>
        </div>
      </div>

      @if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
      {
      <mat-divider></mat-divider>
      }
      }
    </div>
  </mat-card>

  <mat-card class="p-[clamp(5px,2vw,15px)]">
    <h2 class="mt-1 ml-1 text-[clamp(1.2rem,4vw,1.8rem)]">{{ 'ABOUT.SECTION.EDUCATION' | translate }}</h2>

    <div class="ml-1 grid gap-fluid-sm">
      <div>
        @for (entry of educationKeys; track entry.key) {
        <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
          <strong class="text-[clamp(0.95rem,2.5vw,1.1rem)]">{{ (entry.key + '.WHERE') | translate }}</strong>
          <span class="opacity-75 text-[clamp(0.85rem,2vw,0.95rem)]">{{ (entry.key + '.WHEN') | translate }}</span>
        </div>
        <div class="mt-[0.1rem] opacity-85 text-[clamp(0.85rem,2vw,1rem)]">
          {{ (entry.key + '.WHAT') | translate }}
        </div>

        @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
        {
        <mat-divider class="!my-2"></mat-divider>
        }
        }
      </div>
    </div>
  </mat-card>
</section>
