<vdr-action-bar>
    <vdr-ab-left>
        <vdr-language-selector
            [disabled]="isNew$ | async"
            [availableLanguageCodes]="availableLanguages$ | async"
            [currentLanguageCode]="languageCode$ | async"
            (languageCodeChange)="setLanguage($event)"
        ></vdr-language-selector>
    </vdr-ab-left>

    <vdr-ab-right>
        <button
            class="btn btn-primary"
            *ngIf="(isNew$ | async); else: updateButton"
            (click)="create()"
            [disabled]="detailForm.invalid || detailForm.pristine"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button
                class="btn btn-primary"
                (click)="save()"
                [disabled]="
                    (detailForm.invalid || detailForm.pristine) && !assetsChanged() && !variantAssetsChanged()
                "
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm" *ngIf="(product$ | async) as product">
    <clr-tabs>
        <clr-tab>
            <button clrTabLink (click)="navigateToTab('details')">
                {{ 'catalog.product-details' | translate }}
            </button>
            <clr-tab-content *clrIfActive="(activeTab$ | async) === 'details'">
                <div class="clr-row">
                    <div class="clr-col">
                        <section class="form-block" formGroupName="product">
                            <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
                                <input
                                    id="name"
                                    type="text"
                                    formControlName="name"
                                    (input)="updateSlug($event.target.value)"
                                />
                            </vdr-form-field>
                            <vdr-form-field [label]="'catalog.slug' | translate" for="slug">
                                <input id="slug" type="text" formControlName="slug" />
                            </vdr-form-field>
                            <vdr-rich-text-editor
                                formControlName="description"
                                [label]="'common.description' | translate"
                            ></vdr-rich-text-editor>

                            <section formGroupName="customFields" *ngIf="customFields.length">
                                <label>{{ 'common.custom-fields' | translate }}</label>
                                <ng-container *ngFor="let customField of customFields">
                                    <vdr-custom-field-control
                                        *ngIf="customFieldIsSet(customField.name)"
                                        [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
                                        [customField]="customField"
                                    ></vdr-custom-field-control>
                                </ng-container>
                            </section>

                            <div class="facets">
                                <vdr-facet-value-chip
                                    *ngFor="let facetValue of (facetValues$ | async)"
                                    [facetValue]="facetValue"
                                    (remove)="removeProductFacetValue(facetValue.id)"
                                ></vdr-facet-value-chip>
                                <button class="btn btn-sm btn-secondary" (click)="selectProductFacetValue()">
                                    <clr-icon shape="plus"></clr-icon>
                                    {{ 'catalog.add-facets' | translate }}
                                </button>
                            </div>
                        </section>
                    </div>
                    <div class="clr-col-md-auto">
                        <vdr-product-assets
                            [assets]="product.assets"
                            [featuredAsset]="product.featuredAsset"
                            (change)="assetChanges = $event"
                        ></vdr-product-assets>
                    </div>
                </div>
            </clr-tab-content>
        </clr-tab>
        <clr-tab>
            <button clrTabLink (click)="navigateToTab('variants')">
                {{ 'catalog.product-variants' | translate }}
            </button>
            <clr-tab-content *clrIfActive="(activeTab$ | async) === 'variants'">
                <section class="form-block" *ngIf="!(isNew$ | async)">
                    <vdr-generate-product-variants
                        *ngIf="(variants$ | async)?.length === 0; else: variants"
                        [product]="product"
                    ></vdr-generate-product-variants>

                    <ng-template #variants>
                        <vdr-product-variants-list
                            [variants]="variants$ | async"
                            [facets]="facets$ | async"
                            [productVariantsFormArray]="detailForm.get('variants')"
                            [taxCategories]="taxCategories$ | async"
                            (assetChange)="variantAssetChange($event)"
                            (selectionChange)="selectedVariantIds = $event"
                        >
                            <button
                                class="btn btn-sm btn-secondary"
                                [disabled]="selectedVariantIds.length === 0"
                                (click)="selectVariantFacetValue(selectedVariantIds)"
                            >
                                <clr-icon shape="plus"></clr-icon>
                                {{ 'catalog.add-facets' | translate }}
                            </button>
                        </vdr-product-variants-list>
                    </ng-template>
                </section>
            </clr-tab-content>
        </clr-tab>
    </clr-tabs>
</form>
