<div class="deltagare-tab-experiences" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
  <div class="deltagare-tab-experiences__tab-column" *ngIf="workExperiences$ | async as workExperiences">
    <h2>Arbetslivserfarenhet</h2>

    <ul class="deltagare-tab-experiences__experience-list" *ngIf="workExperiences?.length; else emptyText;">
      <li *ngFor="let workExperience of firstVisibleWorkExperiences(workExperiences)">
        <h3 class="deltagare-tab-experiences__subheading">{{ workExperience.employer }}</h3>
        <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
        <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
        {{ workExperience.profession }}
        <p>{{ workExperience.description }}</p>
      </li>
    </ul>
    <ui-expansion-panel
      *ngIf="hiddenWorkExperiences(workExperiences)?.length"
      class="deltagare-tab-experiences__accordion"
      [uiExpanded]="accordionExpanded"
      (click)="toggleAccordionExpanded()"
    >
      <span class="deltagare-tab-experiences__accordion-trigger" data-slot-trigger
        >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
      >
      <ul class="deltagare-tab-experiences__experience-list">
        <li *ngFor="let workExperience of hiddenWorkExperiences(workExperiences)">
          <h3 class="deltagare-tab-experiences__subheading">{{ workExperience.employer }}</h3>
          <digi-typography-time [afDateTime]="workExperience.dateFrom"></digi-typography-time> -
          <digi-typography-time [afDateTime]="workExperience.dateTo"></digi-typography-time><br />
          {{ workExperience.profession }}
          <p>{{ workExperience.description }}</p>
        </li>
      </ul>
    </ui-expansion-panel>
  </div>
  <div class="deltagare-tab-experiences__tab-column">
    <h2>Utbildning</h2>
    <dl>
      <dt>Högsta utbildningsnivå:</dt>
      <dd *ngIf="highestEducation$ | async as highestEducation">
        <ng-container *ngIf="highestEducation?.level; else emptyText">
          {{ highestEducation.level.description }}: {{ highestEducation.sunKod.description }}
        </ng-container>
      </dd>

      <ng-container *ngIf="educations$ | async as educations">
        <h3 class="deltagare-tab-experiences__subheading deltagare-tab-experiences__subheading--with-margin">
          Utbildningar:
        </h3>
        <ul class="deltagare-tab-experiences__experience-list" *ngIf="educations?.length; else emptyText">
          <li *ngFor="let education of educations">
            <h4 class="deltagare-tab-experiences__subheading">{{ education.organizer }}</h4>
            <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time> -
            <digi-typography-time [afDateTime]="education.dateFrom"></digi-typography-time><br />
            {{ education.education}}
            <p>{{ education.description }}</p>
          </li>
        </ul>
      </ng-container>
    </dl>
  </div>
  <div class="deltagare-tab-experiences__tab-column" *ngIf="driversLicense$ | async as driversLicense">
    <h2>Körkort</h2>
    <dl>
      <dt>Har körkort</dt>
      <dd>{{driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
      <ng-container *ngIf="driversLicense.licenses.length">
        <dt>Körkortsklasser</dt>
        <dd>{{driversLicense.licenses.join(', ')}}</dd>
        <dt>Tillgång till bil</dt>
        <dd>{{driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
      </ng-container>
    </dl>
  </div>
</div>

<ng-template #emptyText>
  <span>Info saknas</span>
</ng-template>
<ng-template #loadingRef>
  <ui-loader class="deltagare-tab-experiences__loader" uiType="padded"></ui-loader>
</ng-template>
