<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="toolbar">
      <ion-title>
        Tasks
      </ion-title>
      <button class="add-button" (click)="createTask()">Add task</button>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="content">
    <!-- <div class="icon">
      <mat-icon>filter_alt</mat-icon>
    </div> -->
    <div class="list">
      <div class="task" *ngFor="let task of tasks$ | async">
        <button (click)="completeTask(task.id)">Done</button>
        <div (click)="updateTask(task.id)" class="item">
          <div class="text">
            <div class="name">
              {{ task.name }}
              <span class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</span>
            </div>
          </div>
          <div
            class="reward"
            [ngClass]="{ 'negative': task.reward < 0 }"
          >{{ task.reward.toFixed(2) }} SP</div>
        </div>
      </div>
    </div>
  </div>
</ion-content>
