<!-- Semmet Angular: Rating — https://www.w3.org/WAI/ARIA/apg/patterns/radio/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> [value]="4" />
<<%= selector %> [readonly]="false" (valueChange)="saveRating($event)" />
-->
@if (readonly()) {
  <div class="<%= dasherize(name) %>" role="img" [attr.aria-label]="accessibleLabel()">
    @for (item of values(); track item) {
      <span class="<%= dasherize(name) %>__item" [class.<%= dasherize(name) %>__item--filled]="isFilled(item)" aria-hidden="true">★</span>
    }
  </div>
} @else {
  <div class="<%= dasherize(name) %>" role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
    <span [id]="instanceId + '-label'" class="<%= dasherize(name) %>__label">{{ label() }}</span>
    @for (item of values(); track item; let i = $index) {
      <span
        #ratingOption
        class="<%= dasherize(name) %>__item"
        role="radio"
        [class.<%= dasherize(name) %>__item--filled]="isFilled(item)"
        [attr.aria-label]="item + ' out of ' + max()"
        [attr.aria-checked]="isSelected(item)"
        [tabIndex]="isSelected(item) ? 0 : -1"
        (click)="select(item)"
        (keydown)="navigate($event, i)"
      >
        ★
      </span>
    }
  </div>
}
