<div class="info-header">
  <h5>
    {{ dayOfWeek }}
  </h5>
  <span class="info-header-container">
    <span class="muted">
      <ng-container *ngIf="checkSameDay(); else notToday">{{ date | date: 'EEEE, dd. MMMM yyyy' }}</ng-container>
      <ng-template #notToday>{{ date | date: 'dd. MMMM yyyy' }}</ng-template>
    </span>
    <div>{{ info?.category | replace: '##':' / ' }}</div>
  </span>
</div>

<ng-container *ngIf="showUpdateComment$ | async">
  <hr />
  <div class="update-comment">
    <div class="update-comment-heading">
      Kommentar
    </div>

    <ui-icon icon="refresh" size="19px"></ui-icon>
    <div class="grow">
      {{ info.updateComment }}
    </div>
  </div>
</ng-container>

<hr />

<div class="info-body">
  <div class="time-span">{{ timeSpan }}</div>
  <div class="indicator" *ngIf="type$ | async; let type" [ngClass]="type">
    <div class="task-indicator" *ngIf="type === 'Task'" [style.backgroundColor]="indicatorColor$ | async">&nbsp;</div>
    <ui-icon icon="info" size="16px" *ngIf="type !== 'Task'"></ui-icon>
  </div>
  <button class="teaser" *ngIf="teaser$ | async; let teaser" (click)="openImage(undefined, teaser)">
    <img [isaBlobImage]="teaser" />
  </button>
  <div class="content">
    <div [innerHTML]="info.text"></div>
    <div class="task-date" *ngIf="showTaskDate && !!taskDate">Zu erledigen {{ taskDate }}</div>
  </div>
</div>

<ng-container *ngIf="info?.link">
  <hr />
  <div class="link">
    <div class="link-heading">Titelinformationen</div>
    <hr />
    <div class="link-item">
      <ui-icon icon="vlbtix" size="19px" *ngIf="showVlbtixIcon$ | async"></ui-icon>
      <div class="grow">Digitale Titelübersicht</div>

      <button class="link-cta" type="button" (click)="openUrl(info.link)">
        Öffnen
      </button>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="info?.attachments > 0 || info?.articles?.length > 0">
  <hr />
  <div class="attachments">
    <div class="attachments-heading">Dateianhang</div>
    <hr />
    <ng-container *ngFor="let attachment of attachments$ | async">
      <div class="attachments-item">
        <ui-icon icon="attachment" size="19px"></ui-icon>
        <div class="grow">
          {{ attachment.name }}
        </div>

        <button class="attachments-cta" type="button" (click)="openFile(attachment)">
          Öffnen
        </button>
      </div>
      <hr />
    </ng-container>
    <ng-container *ngIf="info?.articles?.length > 0">
      <div class="attachments-item">
        <ui-icon icon="attachment" size="19px"></ui-icon>
        <div class="grow">
          Artikelliste
        </div>

        <button class="copy-article-cta" type="button" (click)="copyArticleList()">
          EAN-Liste kopieren
        </button>
        <button class="open-article-cta" type="button" (click)="openArticleList()">
          Öffnen
        </button>
      </div>
    </ng-container>
  </div>
</ng-container>

<ng-container *ngIf="showNotes$ | async">
  <hr />
  <div class="notes">
    <div class="notes-heading">
      <div>Notizen</div>
      <div class="muted">{{ (notes$ | async)?.length }} Notizen</div>
    </div>
    <hr />
    <ui-notes [notes]="notes$ | async" (add)="addNote($event)" [value]="noteValue" (valueChange)="setNoteValue($event)"></ui-notes>
  </div>
</ng-container>

<hr *ngIf="(type$ | async) === 'Task'" />
