<ng-container *transloco="let t; prefix:'review-modal'">
  <div>
      <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">{{t('title')}}</h4>
          <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">

          </button>
      </div>
      <div class="modal-body">
          <form [formGroup]="reviewGroup">

            <!--Not in sync with one at the top of the detail page, bad UX for now -->
            <!--<ngx-stars [initialStars]="review.rating" (ratingOutput)="updateRating($event)" [size]="2"
                       [maxStars]="5" [color]="starColor"></ngx-stars>-->

              <div class="row g-0 mt-2">
                  <label for="review" class="form-label">{{t('review-label')}}</label>
                  <textarea id="review" class="form-control" formControlName="reviewBody" rows="3" [minlength]="minLength"
                            [class.is-invalid]="reviewGroup.get('reviewBody')?.invalid && reviewGroup.get('reviewBody')?.touched" aria-describedby="body-validations"
                  ></textarea>
                @if (reviewGroup.dirty || reviewGroup.touched) {
                  <div id="body-validations" class="invalid-feedback">
                    @if (reviewGroup.get('reviewBody')?.errors?.required) {
                      <div>{{t('required')}}</div>
                    }
                    @if (reviewGroup.get('reviewBody')?.errors?.minlength) {
                      <div>{{t('min-length', {count: minLength})}}</div>
                    }
                  </div>
                }
              </div>
          </form>

      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" (click)="delete()">{{t('delete')}}</button>
          <button class="btn btn-secondary" (click)="close()">{{t('close')}}</button>
          <button type="submit" class="btn btn-primary" (click)="save()">{{t('save')}}</button>
      </div>
  </div>
</ng-container>


