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

<<%= selector %> label="Escolha um plano" />
-->
<div role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
  <span [id]="instanceId + '-label'">{{ label() }}</span>
  @for (option of options; track option.id; let i = $index) {
    <div
      #radio
      role="radio"
      [attr.aria-checked]="selectedId() === option.id"
      [tabIndex]="selectedId() === option.id ? 0 : -1"
      (click)="select(option.id)"
      (keydown)="navigateGroup($event, i)"
    >
      {{ option.label }}
    </div>
  }
</div>
