
<app-title-bar titleHeader="Meine Ziele"></app-title-bar>
<div class="information">
  <h3 class="choose-prompt">
      Los geht's!
  </h3>
  <div class="bonsai-logo">
    <app-logo-bonsai></app-logo-bonsai>
  </div>
  <p class="choose-question">
      Offene Ziele
  </p>
</div>
<div class="main-container">
    <div class="card" *ngFor="let goal of goals">
      <app-todo-checkbox [model]="goal.done" (modelChange)="goal.setDone($event)" [todoContent]="goal.description"></app-todo-checkbox>
      <h4>noch {{goal.daysLeft()}} Tage</h4>
      <hr style="max-width: 256px; width: 50%;">
      <div class="alternative"> 
        <h4>oder</h4>
      </div>
      <h2>{{goal.stake}} &euro; an</h2><img class="card-img" src="{{ goal.linkUrlToDonateImage }}" alt="Logo von Hilfsorganisation" />
      <button aria-label="lösche Ziel" (click)="deleteGoal(goal)" type="button" *ngIf="goal.done" class="delete-goal">
        <i style="font-size: 32px;" class="material-icons">delete</i>
      </button>
    </div>


</div>
<a role="navigation" class="add-goal-button"  routerLink="/goal"><i style="color: var(--color-highlight);" class="material-icons">add</i>Neues Ziel hinzufügen</a>

