<ion-header translucent>
</ion-header>
<ion-content>
  <ion-item lines='none'>
    <ion-label position="stacked" style="min-height:30px;">{{"BREW_DATA_RATING" | translate }}&nbsp;<ion-badge
      style="vertical-align: top;">{{data.rating| toFixed: 2}}</ion-badge>
    </ion-label>
  </ion-item>
  <ion-item style="top:-10px;" lines="inset">

    <ion-range  [pinFormatter]="pinFormatter" [pin]="true" style='padding-left:15px;padding-right:15px;padding-bottom:0px;' (ionChange)="changedRating()" [(ngModel)]="data.rating" [max]="maxBrewRating" min="-1" snaps="true"
               [step]="settings.brew_rating_steps">

      @if (maxBrewRating=== 5 && settings.brew_rating_steps === 1) {
<div slot="end">
        <ngx-stars #brewStars [color]="'#BFB9B0'" [initialStars]="data.rating" [maxStars]="5" [readonly]="true"
                   [wholeStars]="true" class="ion-float-right brew-stars"></ngx-stars>
      </div>
}
    </ion-range>

  </ion-item>
  <ion-item lines="inset">
    <ion-label id='note' position="stacked">{{"BREW_DATA_NOTES" | translate }}</ion-label>
    <ion-textarea style='margin-top:20px;' [autoGrow]="true" aria-labelledby='note' [(ngModel)]="data.note" autocapitalize="sentences" autocomplete="true" autocorrect="true"
                  placeholder="{{'BREW.PLACE_HOLDER.BREW_DATA_NOTES' | translate}}" rows="5" spellcheck="true"></ion-textarea>
  </ion-item>
  <ion-row>
    <ion-col>
      <ion-button (click)="dismiss()" color="accent" expand="block" fill="outline"
                  tappable>{{"CANCEL" | translate}}</ion-button>
    </ion-col>
    <ion-col>
      <ion-button (click)="save()" color="accent" disable-double-click expand="block" tappable
                  type="submit">{{"SAVE" | translate}}</ion-button>
    </ion-col>
  </ion-row>
</ion-content>
