<vdr-action-bar>
    <vdr-ab-right>
        <button
            class="btn btn-primary"
            (click)="save()"
            [disabled]="(!formValueChanged && !optionsChanged) || getVariantsToAdd().length === 0"
        >
            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}
        </button>
    </vdr-ab-right>
</vdr-action-bar>

<div *ngFor="let group of optionGroups; index as i" class="option-groups">
    <div class="name">
        <label>{{ 'catalog.option' | translate }}</label>
        <input clrInput [(ngModel)]="group.name" name="name" [readonly]="!group.isNew" />
    </div>
    <div class="values">
        <label>{{ 'catalog.option-values' | translate }}</label>
        <vdr-option-value-input
            #optionValueInputComponent
            [options]="group.values"
            [groupName]="group.name"
            [disabled]="group.name === ''"
            (add)="addOption(i, $event.name)"
            (remove)="removeOption(i, $event)"
        ></vdr-option-value-input>
    </div>
    <div>
        <button
            [disabled]="group.locked"
            class="btn btn-icon btn-danger-outline mt5" (click)="removeOptionGroup(group)">
            <clr-icon shape="trash"></clr-icon>
        </button>
    </div>
</div>
<button class="btn btn-primary-outline btn-sm" (click)="addOptionGroup()">
    <clr-icon shape="plus"></clr-icon>
    {{ 'catalog.add-option' | translate }}
</button>

<div class="variants-preview">
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <th>{{ 'catalog.variant' | translate }}</th>
                <th>{{ 'catalog.sku' | translate }}</th>
                <th>{{ 'catalog.price' | translate }}</th>
                <th>{{ 'catalog.stock-on-hand' | translate }}</th>
                <th></th>
            </tr>
        </thead>
        <tr *ngFor="let variant of generatedVariants" [class.disabled]="!variant.enabled || variant.existing">
            <td class="left">
                <clr-checkbox-wrapper *ngIf="!variant.existing">
                    <input
                        type="checkbox"
                        [(ngModel)]="variant.enabled"
                        name="enabled"
                        clrCheckbox
                        (ngModelChange)="formValueChanged = true"
                    />
                    <label>{{ 'common.create' | translate }}</label>
                </clr-checkbox-wrapper>
            </td>
            <td>
                {{ getVariantName(variant) | translate }}
            </td>
            <td>
                <div class="flex center">
                    <clr-input-container *ngIf="!variant.existing">
                        <input
                            clrInput
                            type="text"
                            [(ngModel)]="variant.sku"
                            [placeholder]="'catalog.sku' | translate"
                            name="sku"
                            required
                            (ngModelChange)="onFormChanged(variant)"
                        />
                    </clr-input-container>
                    <span *ngIf="variant.existing">{{ variant.sku }}</span>
                </div>
            </td>
            <td>
                <div class="flex center">
                    <clr-input-container *ngIf="!variant.existing">
                        <vdr-currency-input
                            clrInput
                            [(ngModel)]="variant.price"
                            name="price"
                            [currencyCode]="currencyCode"
                            (ngModelChange)="onFormChanged(variant)"
                        ></vdr-currency-input>
                    </clr-input-container>
                    <span *ngIf="variant.existing">{{ variant.price | localeCurrency: currencyCode }}</span>
                </div>
            </td>
            <td>
                <div class="flex center">
                    <clr-input-container *ngIf="!variant.existing">
                        <input
                            clrInput
                            type="number"
                            [(ngModel)]="variant.stock"
                            name="stock"
                            min="0"
                            step="1"
                            (ngModelChange)="onFormChanged(variant)"
                        />
                    </clr-input-container>
                    <span *ngIf="variant.existing">{{ variant.stock }}</span>
                </div>
            </td>
            <td>
                <vdr-dropdown *ngIf="variant.productVariantId as productVariantId">
                    <button class="icon-button" vdrDropdownTrigger>
                        <clr-icon shape="ellipsis-vertical"></clr-icon>
                    </button>
                    <vdr-dropdown-menu vdrPosition="bottom-right">
                        <button
                            type="button"
                            class="delete-button"
                            (click)="deleteVariant(productVariantId, variant.options)"
                            vdrDropdownItem
                        >
                            <clr-icon shape="trash" class="is-danger"></clr-icon>
                            {{ 'common.delete' | translate }}
                        </button>
                    </vdr-dropdown-menu>
                </vdr-dropdown>
            </td>
        </tr>
    </table>
</div>
