<div class="nutrition-table">
  <header class="nutrition-table__header">
    <h1 class="h5">Tabela nutricional (Porção)</h1>

    <div>
      <span class="h5">Calorias</span>
      <span class="h5">{{ energyTotal }}kcal</span>
    </div>
  </header>

  <table *ngIf="nutritionalTable.length" class="nutrition-table__table">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>% Valor Diário (VD)</th>
      </tr>
    </thead>

    <tbody>
      <ng-container *ngFor="let nutrient of nutritionalTable; index as i">
        <tr *ngIf="!maxResults || i < maxResults || showingAll">
          <td class="p5">{{ nutrient.name }}</td>
          <td class="p5">
            <span>{{ nutrient.quantity }}</span>
            <span>{{ getNutrientUnit(nutrient.unit) }}</span>
          </td>
          <td class="p5">{{ nutrient.vd }}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>

  <app-button
    *ngIf="maxResults && canShowAll"
    class="show-more"
    [title]="showingAll ? 'Exibir menos' : 'Exibir tudo'"
    (onClick)="showingAll = !showingAll"
  >
    {{ showingAll ? "Exibir menos" : "Exibir tudo" }}
  </app-button>
</div>
