Untitled

<div class="grid">
  <div class="col-12">
    <p-card>
      <div class="field grid">
        <p-avatar
          [image]="candidate.profilePic"
          size="large"
          shape="circle"
        ></p-avatar>

        <div class="col-12 md:col-10">
          <div class="flex flex-column">
            <h2 class="m-0 text-xl font-semibold">{{ candidate.name }}</h2>
          </div>
        </div>
      </div>
      <div class="field grid">
          <div class="flex align-items-center w-full">
            <div class="col-3">
              <span class="relative align-items-center mr-3 block">
                <label for="lastname4" class="col-12 mb-2 md:col-4 md:mb-0">
                  <i class="pi pi-cog text-gray-500"></i> Commitment</label
                >
            </span>
            </div>
            <div class="col-9">
              <div class="chip p-2 col-6 md:col-8 sm:col-12">
                <span class="text-700 font-semibold block">Full-time at ${{ candidate.fullTimePrice }} / month</span>
                <span class="text-700">Starts in 2 weeks</span>
              </div>
            </div>

          </div>
      </div>
      <div class="field grid">
          <div class="flex align-items-center w-full">
            <div class="col-3">
              <span class="relative align-items-center mr-3 block">
                <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">
                  <i class="pi pi-calendar text-gray-500"></i> Expert in</label
                >
            </span>
            </div>
            <div class="col-9">
              <div class="p-2">
                <span *ngFor="let skill of candidate.technicalSkills" class="chip mr-2 p-2">
                  {{ skill }}
                </span>
              </div>
            </div>
          </div>
       </div>
      <div class="card">
        <p-tabs value="0" scrollable>
          <p-tablist>
            <ng-template #previcon>
              <i class="pi pi-minus"></i>
            </ng-template>

            <p-tab value="interview" (click)="scrollToSection('interview')">
              <i class="pi pi-video text-gray-500"></i>
              <span class="font-bold whitespace-nowrap">AI interview</span>
            </p-tab>

            <p-tab value="works" (click)="scrollToSection('work-experience')">
              <i class="pi pi-briefcase text-gray-500"></i>

              <span class="font-bold whitespace-nowrap">Experince</span>
            </p-tab>

            <p-tab value="education" (click)="scrollToSection('education')">
              <i class="pi pi-graduation-cap text-gray-500"></i>

              <span class="font-bold whitespace-nowrap">Education</span>
            </p-tab>

            <ng-template #nexticon>
              <i class="pi pi-plus"></i>
            </ng-template>
          </p-tablist>
        </p-tabs>
      </div>
      <div class="content">
        <div id="interview" class="section mt-4">
          <h3>AI Interview</h3>
          <div class="video-container">
            <video width="100%" controls>
              <source type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
        <div class="transcription-container mt-5">
          <!-- <div
            *ngFor="
              let item of expanded
                ? candidate.interviews[0].transcript
                : candidate.interviews[0].transcript.slice(0, 3);
              let i = index
            "
          >
            <div class="grid dialogue">
              <div class="col-fixed" style="width: 100px">
                <div class="timestamp">
                  {{ item.relative_timestamp }}
                </div>
              </div>
              <div class="col">
                <div class="transcription-text">
                  {{ item.dialogue }}
                </div>
              </div>
            </div>
          </div>

          <a *ngIf="!expanded" (click)="expanded = true" class="show-more"
            >Show more</a
          >
          <a *ngIf="expanded" (click)="expanded = false" class="show-less"
            >Show less</a
          > -->
          <div class="text-container">
            <div [ngClass]="{ 'collapsed': !expanded }">
              <div class="grid dialogue" *ngFor="let item of candidate.interviews[0].transcript">
                <div class="col-fixed" style="width: 100px">
                  <div class="timestamp">
                    {{ item.relative_timestamp }}
                  </div>
                </div>
                <div class="col">
                  <div class="transcription-text">
                    {{ item.dialogue }}
                  </div>
                </div>
              </div>
            </div>

            <a class="show-more text-center" (click)="expanded = !expanded">
              {{ expanded ? 'Show less' : 'Show more' }}
            </a>
          </div>
        </div>

        <div id="work-experience" class="work-experience">
          <h2>Work Experience</h2>
          <p-timeline [value]="candidate.workExperience">
            <!-- Marker Template (Logo + Job Title) -->
            <ng-template #marker let-event>
              <div class="marker-container">
                <img
                  [src]="event.companyLogo"
                  [alt]="event.company"
                  class="company-logo"
                />
              </div>
            </ng-template>

            <!-- Content Template (Details + Duration + Description) -->
            <ng-template pTemplate="content" let-event>
              <div class="timeline-event">
                <div class="header">
                  <h3 class="role">
                    {{ event.role }}
                    <span class="badge">{{ event.company }}</span>
                  </h3>
                  <p class="duration">
                    {{ event.startDate }} - {{ event.endDate }}
                  </p>
                </div>
                <p class="description">{{ event.description }}</p>
              </div>
            </ng-template>
          </p-timeline>
        </div>

        <section id="education" class="section">
          <div id="work-experience" class="work-experience">
            <h2>Education</h2>
            <p-timeline [value]="candidate.education" align="left">
              <!-- Marker Template (Logo + Job Title) -->
              <ng-template #marker let-event>
                <div class="marker-container">
                  <img
                    [src]="event.schoolLogo"
                    [alt]="event.school"
                    class="company-logo"
                  />
                </div>
              </ng-template>

              <!-- Content Template (Details + Duration + Description) -->
              <ng-template pTemplate="content" let-event>
                <div class="timeline-event">
                  <div class="header">
                    <h3 class="role">
                      {{ event.degree }}
                    </h3>
                    <p class="duration">
                      {{ event.startDate }} - {{ event.endDate }}
                    </p>
                  </div>
                  <p class="description">{{ event.school }}</p>
                </div>
              </ng-template>
            </p-timeline>
          </div>
        </section>
      </div>
    </p-card>
  </div>
</div>