<msfa-layout>
  <section class="deltagare-card">
    <div *ngIf="deltagare$ | async as deltagare; else loadingRef">
      <digi-typography>
        <header class="deltagare-card__header">
          <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
          <h1>Deltagarinformation</h1>
        </header>
        <digi-navigation-tabs af-aria-label="Deltagarinformation">
          <digi-navigation-tab af-aria-label="Om deltagaren" af-id="deltagare-card-personuppgifter">
            <div class="deltagare-card__tab-contents">
              <div class="deltagare-card__tab-column">
                <h2>Personuppgifter</h2>
                <dl>
                  <dt>Namn:</dt>
                  <dd *ngIf="deltagare.fullName; else emptyDD">{{ deltagare.fullName }}</dd>
                  <dt>Personnummer:</dt>
                  <dd *ngIf="deltagare.ssn; else emptyDD">
                    <msfa-hide-text
                      symbols="********-****"
                      [changingText]="deltagare.ssn"
                      ariaLabelType="personnummer"
                    ></msfa-hide-text>
                  </dd>
                  <ng-container *ngFor="let address of deltagare.addresses">
                    <dt>{{address.type}}:</dt>
                    <dd>
                      <address>
                        {{ address.street }}<br />
                        {{ address.postalCode }} {{ address.city }}
                      </address>
                    </dd>
                  </ng-container>
                  <dt>Telefon:</dt>
                  <ng-container *ngIf="deltagare.phoneNumbers?.length; else emptyDD">
                    <ng-container *ngFor="let phoneNumber of deltagare.phoneNumbers">
                      <dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
                    </ng-container>
                  </ng-container>
                  <dt>E-postadress:</dt>
                  <dd *ngIf="deltagare.email; else emptyDD">
                    <a href="mailto:{{deltagare.email}}">{{ deltagare.email }}</a>
                  </dd>
                </dl>
              </div>
              <div class="deltagare-card__tab-column">
                <h2>Behov och språk</h2>
                <dl>
                  <dt>Funktionsnedsättningar:</dt>
                  <ng-container *ngIf="deltagare.disabilities.length; else emptyDD">
                    <dd *ngFor="let disability of deltagare.disabilities">
                      <span>{{ disability.title }}</span>
                      <digi-ng-popover
                        *ngIf="disability.description"
                        class="deltagare-card__popover"
                        [afRelativeIconSize]="true"
                        >{{ disability.description }}</digi-ng-popover
                      >
                    </dd>
                  </ng-container>
                </dl>
                <dl>
                  <dt>Tolkbehov:</dt>
                  <dd>
                    {{deltagare.avropInformation.tolkbehov ? 'Ja (' + deltagare.avropInformation.tolkbehov + ')' :
                    'Nej'}}
                  </dd>
                  <dt>Språkstöd:</dt>
                  <dd>
                    {{deltagare.avropInformation.sprakstod ? 'Ja (' + deltagare.avropInformation.sprakstod + ')' :
                    'Nej'}}
                  </dd>
                  <dt>Språk jag kan använda på jobbet:</dt>
                  <dd *ngIf="deltagare.workLanguages.length else emptyDD">{{ deltagare.workLanguages.join(', ')}}</dd>
                </dl>
              </div>
              <div class="deltagare-card__tab-column">
                <h2>Om tjänsten</h2>
                <dl>
                  <dt>Tillhörande tjänst:</dt>
                  <dd *ngIf="deltagare.avropInformation.tjanst; else emptyDD">
                    {{ deltagare.avropInformation.tjanst }}
                  </dd>
                  <dt>Datum för tjänstens början:</dt>
                  <dd *ngIf="deltagare.avropInformation.startDate; else emptyDD">
                    <digi-typography-time [afDateTime]="deltagare.avropInformation.startDate"></digi-typography-time>
                  </dd>
                  <dt>Datum för tjänstens slut:</dt>
                  <dd *ngIf="deltagare.avropInformation.endDate; else emptyDD">
                    <digi-typography-time [afDateTime]="deltagare.avropInformation.endDate"></digi-typography-time>
                  </dd>
                  <dt>Deltagandefrekvens:</dt>
                  <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
                    {{ deltagare.avropInformation.participationFrequency }}
                  </dd>
                  <dt>Nivå:</dt>
                  <dd *ngIf="deltagare.avropInformation.participationFrequency; else emptyDD">
                    {{ deltagare.avropInformation.trackName }}
                  </dd>
                  <dt>Utförande verksamhet:</dt>
                  <dd *ngIf="deltagare.avropInformation.utforandeVerksamhet; else emptyDD">
                    {{ deltagare.avropInformation.utforandeVerksamhet }}
                  </dd>
                  <dt>Utförande adress:</dt>
                  <dd *ngIf="deltagare.avropInformation.utforandeAdress; else emptyDD">
                    {{ deltagare.avropInformation.utforandeAdress }}
                  </dd>
                  <dt>Genomförandereferens:</dt>
                  <dd *ngIf="deltagare.avropInformation.genomforandeReferens; else emptyDD">
                    {{ deltagare.avropInformation.genomforandeReferens }}
                  </dd>
                </dl>
              </div>
            </div>
          </digi-navigation-tab>
          <digi-navigation-tab af-aria-label="Erfarenheter" af-id="deltagare-card-matchningsuppgifter">
            <div class="deltagare-card__tab-contents">
              <div class="deltagare-card__tab-column">
                <h2>Arbetslivserfarenhet</h2>
                <ng-container *ngIf="firstVisibleWorkExperiences$ | async as firstVisibleWorkExperiences;">
                  <ul
                    class="deltagare-card__experience-list"
                    *ngIf="firstVisibleWorkExperiences.length; else emptyText;"
                  >
                    <li *ngFor="let workExperience of firstVisibleWorkExperiences">
                      <h3 class="deltagare-card__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>
                </ng-container>
                <ng-container *ngIf="hiddenWorkExperiences$ | async as hiddenWorkExperiences">
                  <digi-ng-layout-expansion-panel
                    class="deltagare-card__accordion"
                    [afExpanded]="accordionExpanded"
                    (click)="toggleAccordionExpanded()"
                    *ngIf="hiddenWorkExperiences.length"
                  >
                    <span class="deltagare-card__accordion-trigger" data-slot-trigger
                      >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
                    >
                    <ul class="deltagare-card__experience-list">
                      <li *ngFor="let workExperience of hiddenWorkExperiences">
                        <h3 class="deltagare-card__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>
                  </digi-ng-layout-expansion-panel>
                </ng-container>
              </div>
              <div class="deltagare-card__tab-column">
                <h2>Utbildning</h2>
                <dl>
                  <dt>Högsta utbildningsnivå:</dt>
                  <dd *ngIf="deltagare.highestEducation.level; else emptyDD">
                    {{ deltagare.highestEducation.level.description }}: {{ deltagare.highestEducation.sunKod.description
                    }}
                  </dd>
                  <h3 class="deltagare-card__subheading deltagare-card__subheading--with-margin">Utbildningar:</h3>
                  <ul class="deltagare-card__experience-list" *ngIf="deltagare.educations.length; else emptyText">
                    <li *ngFor="let education of deltagare.educations">
                      <h4 class="deltagare-card__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>
                </dl>
              </div>
              <div class="deltagare-card__tab-column">
                <h2>Körkortsinformation</h2>
                <dl>
                  <dt>Har körkort</dt>
                  <dd>{{deltagare.driversLicense.licenses.length ? 'Ja' : 'Nej'}}</dd>
                  <ng-container *ngIf="deltagare.driversLicense.licenses.length">
                    <dt>Körkortsklasser</dt>
                    <dd>{{deltagare.driversLicense.licenses.join(', ')}}</dd>
                    <dt>Tillgång till bil</dt>
                    <dd>{{deltagare.driversLicense.accessToCar ? 'Ja' : 'Nej'}}</dd>
                  </ng-container>
                </dl>
              </div>
            </div>
          </digi-navigation-tab>

          <digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
            <div class="deltagare-card__select-report">
              <h3>Skapa ny rapport</h3>
              <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
              <form [formGroup]="reportPickerFormGroup">
                <digi-ng-form-select
                  [formControlName]="reportsFormControlName"
                  afLabel="Välj rapporttyp"
                  afPlaceholder="Välj rapporttyp"
                  [afSelectItems]="selectableReportTypes"
                  [afDisableValidStyle]="true"
                  [afRequired]="true"
                  [afInvalid]="reportsFormControl.invalid && reportsFormControl.touched"
                >
                </digi-ng-form-select>
                <digi-form-validation-message
                  af-variation="error"
                  *ngIf="reportsFormControl.invalid && reportsFormControl.touched"
                >
                  Du måste välja en rapporttyp
                </digi-form-validation-message>
              </form>
            </div>
            <div class="deltagare-card__cta-wrapper">
              <digi-ng-link-button
                afText="Skapa ny rapport"
                (click)="onFormSubmitted($event, reportsFormControl.value, deltagare.id)"
              ></digi-ng-link-button>
            </div>
            <div>
              <h3>Inskickade rapporter</h3>
              <msfa-reports
                *ngIf="reportsData$ | async as reportsData, else loadingRef"
                [reports]="reportsData.data"
                [paginationMeta]="reportsData?.meta"
                (paginated)="setNewPage($event)"
              ></msfa-reports>
            </div>
          </digi-navigation-tab>
        </digi-navigation-tabs>
      </digi-typography>
    </div>
  </section>

  <ng-template #loadingRef>
    <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagarinformation"></digi-ng-skeleton-base>
  </ng-template>
  <ng-template #emptyDD>
    <dd>
      <span aria-hidden="true">-</span>
      <span class="msfa__a11y-sr-only">Info saknas</span>
    </dd>
  </ng-template>
  <ng-template #emptyText>
    <span aria-hidden="true">-</span>
    <span class="msfa__a11y-sr-only">Info saknas</span>
  </ng-template>
</msfa-layout>
