<div class="task-list-item-wrapper">
  <div
    class="indicator invisible"
    [class.show]="(isTask$ | async) && !(hasUpdate$ | async)"
    [style.backgroundColor]="indicatorColor$ | async"
  ></div>
  <div class="date">
    @if (showDate) {
      {{ item?.taskDate || item?.publicationDate | date }}
    }
    @if (!showDate) {
      @switch (showTime$ | async) {
        @case (true) {
          {{ item?.timeFrom | date: 'HH:mm' }} - {{ item?.timeTo | date: 'HH:mm' }}
        }
        @case (false) {
          Ganztägig
        }
      }
    }
  </div>
  @if (itemType$ | async; as itemType) {
    <div class="icon invisible" [class.show]="hasIcon$ | async">
      @if (isInfoOrPreInfo$ | async) {
        <ui-icon icon="info" size="16px"></ui-icon>
      }
      @if (isPreInfo$ | async) {
        <ui-icon icon="calendar" size="16px"></ui-icon>
      }
      @if (hasComments$ | async) {
        <ui-icon icon="chat" size="16px"></ui-icon>
      }
    </div>
  }

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