<div class="attribute-selector">
  @for (attribute of attributes(); track attribute.id) {
    <div class="attribute-selector__row">
      <span class="attribute-selector__label">{{ attribute.nombre }}:</span>

      <div class="attribute-selector__options">
        @for (option of attribute.options; track option.id) {
          @if (isColorOption(option)) {
            <button
              type="button"
              class="attribute-selector__swatch"
              [class.attribute-selector__swatch--selected]="hasSelectedOption(attribute, option)"
              [class.attribute-selector__swatch--disabled]="!availableOptions()[attribute.id][option.id]"
              [style.background-color]="getOptionSwatchColor(option)"
              [attr.aria-label]="option.label"
              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
              [title]="option.label"
              [disabled]="!availableOptions()[attribute.id][option.id]"
              (click)="selectAttributeOption(attribute, option)"
            >
              <span class="visually-hidden">{{ option.label }}</span>
            </button>
          } @else {
            <button
              type="button"
              class="attribute-selector__text-option"
              [class.attribute-selector__text-option--selected]="hasSelectedOption(attribute, option)"
              [class.attribute-selector__text-option--disabled]="!availableOptions()[attribute.id][option.id]"
              [attr.aria-pressed]="hasSelectedOption(attribute, option)"
              [disabled]="!availableOptions()[attribute.id][option.id]"
              (click)="selectAttributeOption(attribute, option)"
            >
              {{ option.label }}
            </button>
          }
        }
      </div>
    </div>
  }
</div>
