<div class="header">
  <ui-tshirt [effort]="info?.effort"></ui-tshirt>
  <h1>{{ info?.title }}</h1>
  <ui-icon *ngIf="showUpdateIcon$ | async" icon="refresh" size="22px"></ui-icon>
</div>
<div class="status">
  <div class="indicator" [style.backgroundColor]="indicatorColor$ | async"></div>
  <span class="status-text">{{ status$ | async }}</span>
</div>

<div class="body">
  <page-task-info [info]="info" showTaskDate="true"></page-task-info>
</div>

<div class="camera-preview" *ngIf="cameraPreview$ | async; let cameraPreview">
  <img [isaBlobImage]="cameraPreview" />
</div>

<div class="actions">
  <button *ngIf="showStartEditCta$ | async" class="btn-cta" type="button" (click)="startEdit()" [disabled]="editDisabled$ | async">
    Jetzt bearbeiten
  </button>
  <button *ngIf="showCompleteEditCta$ | async" class="btn-cta" type="button" (click)="completeEdit()" [disabled]="editDisabled$ | async">
    Bearbeitung abschließen
  </button>
  <button *ngIf="showOpenSuccessorCta$ | async" class="btn-cta" type="button" (click)="close(info.successor?.id)">
    Zur neuen Aufgabe
  </button>
  <div *ngIf="showCameraCta$ | async" [disabled]="editDisabled$ | async">
    <ng-container>
      <div class="camera-hint">Bitte fotografieren Sie die Präsentation, um die<br />Aufgabe abschließen zu können</div>
      <input uiCapture #captureInput id="file-input" capture="camera" type="file" (fileChanged)="cameraCapture($event)" />
      <label class="btn-camera" for="file-input" (click)="openCamera($event)">Kamera öffnen</label>
    </ng-container>
  </div>
  <ng-container *ngIf="showResetEditCta$ | async">
    <button class="btn-cta-secondary" type="button" (click)="edit()">Erneut bearbeiten</button>
    <button class="btn-cta" type="button" (click)="close()">Fenster schließen</button>
  </ng-container>
</div>
