<div class="item-container">
  <ng-container [ngSwitch]="showDate">
    <div class="date" *ngSwitchCase="true">{{ item.date | date }}</div>
    <div class="day" *ngSwitchDefault>
      <ng-container *ngIf="item.isAllDay; else exactHours">
        Ganztägig
      </ng-container>
      <ng-template #exactHours>
        <ng-container [ngSwitch]="item.timeWindow | inTimeWindow">
          <ng-container *ngSwitchCase="true">jetzt</ng-container>
          <ng-container *ngSwitchCase="false">{{ item.timeWindow | exactHours }}</ng-container>
        </ng-container>
      </ng-template>
    </div>
  </ng-container>

  <app-task-list-separator [item]="item"></app-task-list-separator>

  <div class="description">
    <div *ngIf="showHeadline" class="headline">
      <app-task-list-teaser-image *ngIf="item.hasTeaserImages" [teaserImage]="item.teaserImage"> </app-task-list-teaser-image>
      <h4 class="headline-text">{{ item.title }}</h4>
      <span class="camera-icon" *ngIf="item.requiresImageOnConfirmation"
        ><lib-icon height="21px" name="Camera_Icon" alt="camera"></lib-icon
      ></span>
      <span class="file-icon" *ngIf="item.hasAttachments || item.hasArticles"
        ><lib-icon height="21px" name="Attachment_Icon" alt="attachment"></lib-icon
      ></span>
    </div>
    <p class="text" innerHTML="{{ showFullText ? item.body : (item.body | parseTaskBodyHtml | truncateText: 10) }}" *ngIf="item.body"></p>
  </div>
</div>
