<clinical-header></clinical-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>
            {{result.description}}
          </label>
            </div>
        </div>
    </mat-card>

</div>
