<div
  class="app-layout-picker"
  role="radiogroup"
  [attr.aria-label]="ariaLabel()"
  [attr.aria-describedby]="formField?.describedBy() ?? null"
>
  @for (option of options(); track option.value) {
    <button
      type="button"
      class="app-layout-picker__card"
      [class.app-layout-picker__card--selected]="value === option.value"
      role="radio"
      [attr.aria-checked]="value === option.value"
      [disabled]="isDisabled"
      (click)="select(option.value)"
    >
      <span class="app-layout-picker__preview app-layout-picker__preview--{{ option.value }}" aria-hidden="true">
        <app-icon [name]="option.icon" [size]="20" />
      </span>
      <span class="app-layout-picker__label">{{ option.labelKey | translate }}</span>
    </button>
  }
</div>
@if (activeDescription(); as descKey) {
  <p class="app-layout-picker__desc">{{ descKey | translate }}</p>
}
