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

@if (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>
}

<hr />

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

@if (info?.link) {
  <hr />
  <div class="link">
    <div class="link-heading">Titelinformationen</div>
    <hr />
    <div class="link-item">
      @if (showVlbtixIcon$ | async) {
        <ui-icon icon="vlbtix" size="19px"></ui-icon>
      }
      <div class="grow">Digitale Titelübersicht</div>
      <button class="link-cta" type="button" (click)="openUrl(info.link)">Öffnen</button>
    </div>
  </div>
}

@if (info?.attachments > 0 || info?.articles?.length > 0) {
  <hr />
  <div class="attachments">
    <div class="attachments-heading">Dateianhang</div>
    <hr />
    @for (attachment of attachments$ | async; track attachment) {
      <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 />
    }
    @if (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>
    }
  </div>
}

@if (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>
}

@if ((type$ | async) === 'Task') {
  <hr />
}
