<article
  class="food-card"
  [ngStyle]="{
    cursor: type === 'select' ? 'pointer' : 'default'
  }"
  (click)="handleSelectClick()"
>
  <div class="food-informations">
    <h2 class="food__name h4">{{ food.name.replaceAll(",", "") }}</h2>

    <ng-container *ngIf="canEditFood; else readOnly">
      <div class="row">
        <app-input-number
          [value]="food.quantity"
          [min]="0"
          [max]="999999"
          [suffix]="units[food.type][food.quantity > 1 ? 'plural' : 'singular']"
          (valueChange)="handleQuantityChange($event)"
        ></app-input-number>

        <p class="food__data p5 row">
          <span>-</span>
          {{ getCalories() }}kcal
        </p>
      </div>
    </ng-container>

    <ng-template #readOnly>
      <p class="food__data p5">
        {{ food.quantity }}{{ units[food.type][food.quantity > 1 ? 'plural' : 'singular'] }} - {{ getCalories() }}kcal
      </p>
    </ng-template>
  </div>

  <div *ngIf="showButtons" class="food-actions">
    <ng-container *ngIf="type === 'view'">
      <app-button
        *ngIf="showEditOption"
        type="icon"
        [iconSize]="16"
        icon="pencil"
        title="Editar alimento"
        (onClick)="handleEditClick()"
      ></app-button>
      <app-button
        *ngIf="showDeleteOption"
        type="icon"
        [iconSize]="16"
        icon="close"
        title="Remover alimento"
        (onClick)="handleDeleteClick()"
      ></app-button>
    </ng-container>

    <ng-container *ngIf="type === 'select'">
      <div class="radio" [ngClass]="{ 'radio--checked': isSelected }"></div>
    </ng-container>
  </div>
</article>
