<admin-header></admin-header>

<div class="rec-container">
  <mat-card>
     <mat-radio-group aria-label="Select an option">
          <label style="text-align: left;"><strong>Select infant age range:</strong></label>
          <mat-radio-button (click)="showFirst()" value="1">0 to 5.9 months</mat-radio-button>
          <mat-radio-button (click)="showSecond()" value="2">6 to 11.9 Months</mat-radio-button>
          <mat-radio-button (click)="showThird()" value="3">12 to 24 Months</mat-radio-button>
     </mat-radio-group>
  </mat-card>

  <mat-card *ngFor="let result of results; let i = index">
    <div class="item-container">
      <img class="image" src="{{result.imageUrl}}">
      <div>
        <label><strong>{{result.foodItemGroupName}}</strong></label><br>
        <label><strong *ngIf="showBracketFirst">{{ result.firstBracketIntake }} {{ ageMessage }}</strong></label>
        <label><strong *ngIf="showBracketSecond">{{ result.secondBracketIntake }} {{ ageMessage }}</strong></label>
        <label><strong *ngIf="showBracketThird">{{ result.thirdBracketIntake }} {{ ageMessage }}</strong></label>
        <label><strong *ngIf="showNone">{{ ageMessage }}</strong></label>
        <br>
        <label id = "post" *ngIf="!show[i]">
          {{result.description}}
        </label>
        <div  *ngIf="show[i]">
        <textarea id="w3review" name="result[i].id" rows="4" cols="80" [(ngModel)]="result.description">

        </textarea>
        <button class="btn btn-primary" (click)="updateDescription(result,i)">update</button>
        </div>
        <!--<button style='background-color:light grey' (click)=changeDescription(descript)> Update Description</button>-->
        <div>
          <i title="Edit" class="fa fa-edit" (click)="editPost(result,i)" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </mat-card>
</div>

