<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="toolbar">
      <ion-title>
        Allowance
      </ion-title>
      <button class="top-add-button" (click)="createAllowance()">Add Goal</button>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="content" *ngIf="allowance$ | async as allowance">
    <div class="bar">
      <div class="distribution">Allowance distribution</div>
      <div class="allowance-bar">
        <span
          *ngFor="let goal of allowance"
          class="partition"
          [style.--partition-color]="goal.colour"
          [style.width.%]="getPartitionSize(goal, allowance)"
        ></span>
      </div>
      <div class="legend">
        <div class="legend-item" [style.--legend-color]="goal.colour" *ngFor="let goal of allowance">
          <div class="circle"></div>
          <div class="title">{{ goal.name }}</div>
        </div>
      </div>
    </div>
    <div
      class="goal"
      [style.--used-color]="goal.colour"
      [ngClass]="{'other-goals': goal.id !== 0}"
      *ngFor="let goal of allowance"
    >
      <div class="main" *ngIf="goal.id === 0; else other_goal">
        <div class="title">
          <div class="name">Main Allowance</div>
          <div class="icon" (click)="updateAllowance(goal.id)">
            <mat-icon>settings</mat-icon>
          </div>
        </div>
        <div class="progress">{{ goal.progress }} SP</div>
        <div class="buttons">
          <button class="add-button" (click)="addAllowance(goal.id)">Add</button>
          <!-- <button class="move-button">Move</button> -->
          <button class="spend-button" (click)="spendAllowance(goal.id)">Spend</button>
        </div>
      </div>
      <ng-template #other_goal>
        <div class="color-wrapper">
          <div>
            <div class="title">
              <div class="name">{{ goal.name }}</div>
              <div class="icon" (click)="updateAllowance(goal.id)">
                <mat-icon>settings</mat-icon>
              </div>
            </div>
            <div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
            <div class="buttons">
              <button class="add-button" (click)="addAllowance(goal.id)">Add</button>
              <!-- <button class="move-button">Move</button> -->
              <button class="spend-button" [disabled]="!canFinishGoal(goal)" (click)="completeGoal(goal.id)">Finish goal</button>
            </div>
          </div>
          <div class="color" [style.--background]="hexToRgb(goal.colour)" [style.width.%]="getPercentage(goal)"></div>
        </div>
      </ng-template>
    </div>
  </div>
</ion-content>
