<div class="date">
  <ng-container *ngIf="showDate">
    {{ item?.taskDate || item?.publicationDate | date }}
  </ng-container>
  <ng-container *ngIf="!showDate">
    <ng-container [ngSwitch]="showTime$ | async">
      <ng-container *ngSwitchCase="true"> {{ item?.timeFrom | date: 'HH:mm' }} - {{ item?.timeTo | date: 'HH:mm' }} </ng-container>
      <ng-container *ngSwitchCase="false">
        Ganztägig
      </ng-container>
    </ng-container>
  </ng-container>
</div>
<ng-container *ngIf="itemType$ | async; let itemType">
  <div class="indicator" *ngIf="(isTask$ | async) && !(hasUpdate$ | async)" [style.backgroundColor]="indicatorColor$ | async"></div>
  <div class="icon" *ngIf="hasIcon$ | async">
    <ui-icon icon="info" *ngIf="isInfoOrPreInfo$ | async" size="16px"></ui-icon>
    <ui-icon icon="calendar" size="16px" *ngIf="isPreInfo$ | async"></ui-icon>
    <ui-icon icon="chat" size="16px" *ngIf="hasComments$ | async"></ui-icon>
  </div>
</ng-container>

<ui-tshirt class="shirt-size" [effort]="item?.effort"></ui-tshirt>
<div class="task-content">
  <div class="task-content-title">
    <b>{{ item?.title }}</b>
    <ui-icon class="icon" icon="camera" [style.transform]="'rotateX(0deg)'" size="16px" *ngIf="item.requiresImageOnConfirmation"></ui-icon>
    <ui-icon class="icon" icon="attachment" size="16px" *ngIf="hasAttachments$ | async"></ui-icon>
    <ui-icon class="icon icon-update-comment" icon="refresh" size="16px" *ngIf="showUpdateIcon$ | async"></ui-icon>
  </div>
  <div>{{ item?.category | replace: '##':' / ' }}</div>
  <div class="task-content-text">{{ item?.text | stripHtmlTags | substr: 70 }}</div>
</div>
