<form class="review-form card" (ngSubmit)="onSubmit()">
  <h3>{{ 'productDetails.reviewFormTitle' | translate }}</h3>

  @if (submittedSuccessfully) {
    <p class="success">{{ 'productDetails.reviewSuccess' | translate }}</p>
  }

  <label id="review-rating-label">{{ 'productDetails.reviewRatingLabel' | translate }}</label>
  <app-star-selector [rating]="rating" (ratingChange)="updateRating($event)" [attr.aria-describedby]="showRatingError ? 'review-rating-error' : null" />
  @if (showRatingError) {
    <p class="error" id="review-rating-error" role="alert">{{ 'productDetails.reviewRatingRequired' | translate }}</p>
  }

  <label for="review-title">{{ 'productDetails.reviewTitleLabel' | translate }}</label>
  <input id="review-title" name="title" [(ngModel)]="title" [placeholder]="'productDetails.reviewTitlePlaceholder' | translate" maxlength="120" (input)="hideSuccess()" />

  <label for="review-text">{{ 'productDetails.reviewTextLabel' | translate }}</label>
  <textarea id="review-text" name="text" [(ngModel)]="text" rows="4" [placeholder]="'productDetails.reviewTextPlaceholder' | translate" (input)="hideSuccess()" aria-required="true" [attr.aria-describedby]="showTextError ? 'review-text-error' : null" [attr.aria-invalid]="showTextError ? 'true' : null"></textarea>
  @if (showTextError) {
    <p class="error" id="review-text-error" role="alert">{{ 'productDetails.reviewTextRequired' | translate }}</p>
  }

  <label class="check">
    <input type="checkbox" name="anonymous" [(ngModel)]="anonymous" (change)="hideSuccess()" />
    <span>{{ 'productDetails.reviewAnonymous' | translate }}</span>
  </label>

  <p class="upload-placeholder">{{ 'productDetails.reviewUploadPlaceholder' | translate }}</p>

  <button type="submit" [disabled]="submitting || !rating || !text.trim()">
    @if (submitting) { {{ 'productDetails.submitting' | translate }} } @else { {{ 'productDetails.submitReview' | translate }} }
  </button>
</form>
