<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>{{ 'ORDER_RATING_TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card>
    <ion-item lines="none">
      <ion-label class="ion-text-center">
        <p class="fontSize13">{{ 'ORDER_RATING_TITLE2' | translate }}</p>
      </ion-label>
    </ion-item>

    <div class="ion-text-center">
      <img src="../../assets/img/rating-shopping.png" class="imageRating" />
    </div>

    <ion-item lines="none">
      <ion-grid>
        <ion-row>
          <ion-col>
            <ion-item class="ion-text-center" lines="none">
              <ion-textarea
                class="ion-text-center"
                type="text"
                placeholder="{{ 'PLACEHOLDER_TEXTAREA_RATING' | translate }}"
                [(ngModel)]="commentaryRating"
                name="commentaryRating"
              ></ion-textarea>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>

    <div class="ion-text-center">
      <ionic5-star-rating
        activeIcon="star"
        defaultIcon="star-outline"
        activeColor="#3cd5d2"
        defaultColor="#3cd5d2"
        readonly="false"
        (ratingChanged)="logRatingChange($event)"
      >
      </ionic5-star-rating>
    </div>

    <ion-button class="ion-margin-top" color="primary" shape="round" expand="block" fill="solid" (click)="sendRating(commentaryRating)">
      {{ 'BUTTON_SEND' | translate }}
    </ion-button>
  </ion-card>
</ion-content>