<div class="variants-editor">
  <div class="variants-editor__attributes">
    <h5>{{ 'adminProducts.variantAttributes' | translate }}</h5>
    <p class="variants-editor__hint">{{ 'adminProducts.variantAttributesHint' | translate }}</p>

    @for (attr of attributes; track attr.key) {
      <div class="attribute-card">
        <div class="attribute-card__head">
          <strong>{{ attr.label }}</strong>
          @if (attr.isColor) {
            <span class="attribute-card__tag">{{ 'adminProducts.colorAttribute' | translate }}</span>
          }
          <button type="button" class="attribute-card__remove" (click)="removeAttribute(attr.key)" [attr.aria-label]="('adminProducts.removeAttribute' | translate) + ' ' + attr.label">&times;</button>
        </div>

        <div class="attribute-card__values">
          @for (value of attr.values; track value) {
            <span class="value-chip">
              @if (attr.isColor) {
                <span class="value-chip__swatch" [style.background]="toCssColor(value)"></span>
              }
              <span class="value-chip__label">{{ attr.isColor ? '' : value }}</span>
              <button type="button" (click)="removeValue(attr.key, value)" [attr.aria-label]="('adminProducts.removeValue' | translate) + ' ' + value">&times;</button>
            </span>
          }
        </div>

        <div class="attribute-card__add">
          @if (attr.isColor) {
            <input type="color" [(ngModel)]="newColorByAttribute[attr.key]" [attr.aria-label]="'adminProducts.pickColor' | translate" />
          } @else {
            <app-input [(ngModel)]="newValueByAttribute[attr.key]" [placeholder]="'adminProducts.newValuePlaceholder' | translate" />
          }
          <app-button variant="secondary" size="sm" (click)="addValue(attr.key)">{{ 'adminProducts.addValue' | translate }}</app-button>
        </div>
      </div>
    }

    <div class="attribute-card attribute-card--new">
      <app-input [(ngModel)]="newAttributeName" [placeholder]="'adminProducts.newAttributePlaceholder' | translate" />
      <label class="attribute-card__color-toggle">
        <input type="checkbox" [(ngModel)]="newAttributeIsColor" />
        {{ 'adminProducts.colorAttribute' | translate }}
      </label>
      <app-button variant="secondary" size="sm" (click)="addAttribute()">{{ 'adminProducts.addAttribute' | translate }}</app-button>
    </div>

    @if (attributes.length > 0) {
      <app-button variant="primary" size="sm" (click)="generateVariants()">{{ 'adminProducts.generateVariants' | translate }}</app-button>
    }
  </div>

  @if (variants.length > 0) {
    <div class="variants-editor__list">
      <h5>{{ 'adminProducts.variantsList' | translate }}</h5>
      @for (variant of variants; track variant.id) {
        <div class="variant-card">
          <div class="variant-card__combo">
            @for (key of variant.attributes | keyvalue; track key.key) {
              <span class="value-chip">
                @if (isColorAttribute(key.key)) {
                  <span class="value-chip__swatch" [style.background]="toCssColor(key.value)"></span>
                }
                {{ attributeLabel(key.key) }}: {{ key.value }}
              </span>
            }
            <button type="button" class="variant-card__remove" (click)="removeVariant(variant.id)">{{ 'adminProducts.removeRow' | translate }}</button>
          </div>

          <div class="variant-card__fields">
            <label>
              <span>{{ 'backoffice.sku' | translate }}</span>
              <app-input [ngModel]="variant.sku" (ngModelChange)="updateVariantSku(variant.id, $event)" />
            </label>
            <label>
              <span>{{ 'adminProducts.remaining' | translate }}</span>
              <app-input type="number" [ngModel]="variant.remaining" (ngModelChange)="updateVariantRemaining(variant.id, +$event)" />
            </label>
            <label>
              <span>{{ 'adminProducts.variantImage' | translate }}</span>
              <app-image-field [value]="variant.image" (valueChange)="updateVariantImage(variant.id, $event)" />
            </label>
          </div>

          <div class="variant-card__prices">
            @for (priceRow of variant.prices; track priceRow.currency) {
              <div class="price-row">
                <span class="price-row__currency">{{ priceRow.currency }}</span>
                <app-input type="number" [ngModel]="priceRow.price" (ngModelChange)="updatePrice(variant, priceRow.currency, +$event)" />
                <button type="button" (click)="removePrice(variant, priceRow.currency)" [attr.aria-label]="('adminProducts.removeRow' | translate) + ' ' + priceRow.currency">&times;</button>
              </div>
            }
            @if (availableCurrencies(variant).length > 0) {
              <div class="price-row price-row--add">
                @for (currency of availableCurrencies(variant); track currency) {
                  <app-button variant="secondary" size="sm" (click)="addPrice(variant, currency)">+ {{ currency }}</app-button>
                }
              </div>
            }
          </div>
        </div>
      }
    </div>
  }
</div>
