<digi-typography *ngIf="avrop">
  <div
    class="avrop-row"
    [ngClass]="{'avrop-row--locked': isLocked, 'avrop-row--deletable': handledareConfirmed && !isSubmitted}"
  >
    <div class="avrop-row__select" *ngIf="!isLocked">
      <digi-form-checkbox
        af-label="Välj deltagare"
        [afChecked]="isSelected"
        (change)="emitToggle($event.target.checked)"
      ></digi-form-checkbox>
    </div>
    <dl class="avrop-row__description-list">
      <div class="avrop-row__name">
        <dt>Namn:</dt>
        <dd><ng-container *ngIf="avrop.fullName; else emptyText">{{avrop.fullName}}</ng-container></dd>
      </div>
      <div class="avrop-row__tjanst">
        <dt>Tjänst:</dt>
        <dd><ng-container *ngIf="avrop.tjanst; else emptyText">{{avrop.tjanst}}</ng-container></dd>
      </div>
      <div class="avrop-row__start">
        <dt>Startdatum:</dt>
        <dd>
          <digi-typography-time
            *ngIf="avrop.startDate; else emptyText"
            [afDateTime]="avrop.startDate"
          ></digi-typography-time>
        </dd>
      </div>
      <div class="avrop-row__end">
        <dt>Slutdatum:</dt>
        <dd>
          <digi-typography-time
            *ngIf="avrop.endDate; else emptyText"
            [afDateTime]="avrop.endDate"
          ></digi-typography-time>
        </dd>
      </div>
      <div class="avrop-row__translator">
        <dt>Språkstöd/Tolk:</dt>
        <dd>{{avrop.sprakstod || '- '}}/{{avrop.tolkbehov || ' -'}}</dd>
      </div>
      <div class="avrop-row__address">
        <dt>Utförande adress:</dt>
        <dd *ngIf="avrop.utforandeAdress; else emptyText">{{avrop.utforandeAdress + ', ' + avrop.kommun}}</dd>
      </div>
      <div class="avrop-row__level">
        <dt>Spår/nivå:</dt>
        <dd *ngIf="avrop.trackName; else emptyText">{{avrop.trackName}}</dd>
      </div>
      <div class="avrop-row__genomforandereferens">
        <dt>Genomförandereferens:</dt>
        <dd *ngIf="avrop.genomforandeReferens; else emptyText">{{avrop.genomforandeReferens}}</dd>
      </div>
      <div class="avrop-row__handledare" *ngIf="isLocked">
        <dt>Vald handledare:</dt>
        <dd *ngIf="handledare?.fullName; else emptyText">{{handledare?.fullName}}</dd>
      </div>
    </dl>
    <div *ngIf="isLocked" class="avrop-row__delete">
      <digi-button
        *ngIf="handledareConfirmed && !isSubmitted"
        [attr.af-variation]="ButtonVariation.TERTIARY"
        (afOnClick)="emitDelete()"
      >
        Ta bort
        <digi-icon-x slot="icon"></digi-icon-x>
      </digi-button>
    </div>
  </div>

  <ng-template #emptyText>
    <span aria-hidden="true">-</span>
    <span class="msfa__a11y-sr-only">Info saknas</span>
  </ng-template>
</digi-typography>
