<digi-typography>
  <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__name">
      <dt class="avrop-table__label">Namn:</dt>
      <dd *ngIf="avrop?.fullName; else emptyText">{{avrop?.fullName}}</dd>
    </dl>
    <dl class="avrop-row__tjanst">
      <dt class="avrop-table__label">Tjänst:</dt>
      <dd *ngIf="avrop?.tjanst; else emptyText">{{avrop?.tjanst}}</dd>
    </dl>
    <dl class="avrop-row__start">
      <dt class="avrop-table__label">Startdatum:</dt>
      <dd>
        <digi-typography-time
          *ngIf="avrop?.startDate; else emptyText"
          [afDateTime]="avrop?.startDate"
        ></digi-typography-time>
      </dd>
    </dl>
    <dl class="avrop-row__end">
      <dt class="avrop-table__label">Slutdatum:</dt>
      <dd>
        <digi-typography-time
          *ngIf="avrop?.endDate; else emptyText"
          [afDateTime]="avrop?.endDate"
        ></digi-typography-time>
      </dd>
    </dl>
    <dl class="avrop-row__translator">
      <dt class="avrop-table__label">Språkstöd/Tolk:</dt>
      <dd>{{avrop?.sprakstod || '- '}}/{{avrop?.tolkbehov || ' -'}}</dd>
    </dl>
    <dl class="avrop-row__address">
      <dt class="avrop-table__label">Utförande adress:</dt>
      <dd *ngIf="avrop?.utforandeAdress; else emptyText">{{avrop?.utforandeAdress}}</dd>
    </dl>
    <dl class="avrop-row__level">
      <dt class="avrop-table__label">Spår/nivå:</dt>
      <dd *ngIf="avrop?.trackCode; else emptyText">{{avrop?.trackCode}}</dd>
    </dl>
    <dl class="avrop-row__handledare" *ngIf="isLocked">
      <dt class="avrop-table__label">Vald handledare:</dt>
      <dd *ngIf="handledare?.fullName; else emptyText">{{handledare?.fullName}}</dd>
    </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>
