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

        <vdr-ab-right>
            <vdr-action-bar-items locationId="product-detail"></vdr-action-bar-items>
            <button
                class="btn btn-primary"
                *ngIf="isNew$ | async; else updateButton"
                (click)="create()"
                [disabled]="detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0"
            >
                {{ 'common.create' | translate }}
            </button>
            <ng-template #updateButton>
                <button
                    *vdrIfPermissions="updatePermissions"
                    class="btn btn-primary"
                    (click)="save()"
                    [disabled]="(detailForm.invalid || detailForm.pristine) && !assetsChanged()"
                >
                    {{ 'common.update' | translate }}
                </button>
            </ng-template>
            <vdr-action-bar-dropdown-menu locationId="product-detail"></vdr-action-bar-dropdown-menu>
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>

<form class="form" [formGroup]="detailForm">
    <vdr-page-detail-layout>
        <vdr-page-detail-sidebar>
            <vdr-card>
                <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
                    <clr-toggle-wrapper *vdrIfPermissions="updatePermissions">
                        <input
                            type="checkbox"
                            clrToggle
                            name="enabled"
                            [formControl]="detailForm.get(['enabled'])"
                        />
                        <label>{{ 'common.enabled' | translate }}</label>
                    </clr-toggle-wrapper>
                </vdr-form-field>
            </vdr-card>
            <ng-container *ngIf="!(isNew$ | async)">
                <vdr-card *vdrIfMultichannel [title]="'common.channels' | translate">
                    <vdr-form-item *vdrIfDefaultChannelActive>
                        <div class="flex channel-assignment">
                            <div class="mb-2">
                                <ng-container *ngFor="let channel of productChannels$ | async">
                                    <vdr-chip
                                        *ngIf="!isDefaultChannel(channel.code)"
                                        icon="times-circle"
                                        (iconClick)="removeFromChannel(channel.id)"
                                    >
                                        <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
                                        {{ channel.code | channelCodeToLabel }}
                                    </vdr-chip>
                                </ng-container>
                            </div>
                            <button class="button-small" (click)="assignToChannel()">
                                <clr-icon shape="layers"></clr-icon>
                                {{ 'common.assign-to-channel' | translate }}
                            </button>
                        </div>
                    </vdr-form-item>
                </vdr-card>
            </ng-container>
            <vdr-card *ngIf="entity?.optionGroups.length" [title]="'catalog.product-options' | translate">
                <div class="options">
                    <vdr-chip
                        *ngFor="let optionGroup of entity?.optionGroups | sort : 'id'"
                        [colorFrom]="optionGroup.code"
                        [invert]="true"
                    >
                        {{ optionGroup.name }}
                    </vdr-chip>
                </div>
                <div>
                    <a [routerLink]="['options']" class="button-small mt-2" *vdrIfPermissions="updatePermissions">
                        <clr-icon shape="pencil"></clr-icon>
                        {{ 'catalog.edit-options' | translate }}
                    </a>
                </div>
            </vdr-card>
            <vdr-card [title]="'catalog.facets' | translate">
                <div class="facets">
                    <vdr-facet-value-chip
                        *ngFor="let facetValue of facetValues$ | async"
                        [facetValue]="facetValue"
                        [removable]="updatePermissions | hasPermission"
                        (remove)="removeProductFacetValue(facetValue.id)"
                    ></vdr-facet-value-chip>
                </div>
                <div>
                    <button
                        class="button-small mt-2"
                        *vdrIfPermissions="updatePermissions"
                        (click)="selectProductFacetValue()"
                    >
                        <clr-icon shape="plus"></clr-icon>
                        {{ 'catalog.add-facets' | translate }}
                    </button>
                </div>
            </vdr-card>
            <vdr-card *ngIf="entity$ | async as entity">
                <vdr-page-entity-info [entity]="entity"></vdr-page-entity-info>
            </vdr-card>
        </vdr-page-detail-sidebar>

        <vdr-page-block>
            <button type="submit" hidden x-data="prevents enter key from triggering other buttons"></button>
            <vdr-card>
                <div class="form-grid">
                    <div>
                        <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
                            <input
                                id="name"
                                type="text"
                                formControlName="name"
                                [readonly]="!(updatePermissions | hasPermission)"
                                (input)="updateSlug($event.target.value)"
                            />
                        </vdr-form-field>
                        <div *ngIf="(isNew$ | async) === false && detailForm.get(['name'])?.dirty">
                            <clr-checkbox-wrapper>
                                <input
                                    clrCheckbox
                                    type="checkbox"
                                    id="auto-update"
                                    formControlName="autoUpdateVariantNames"
                                />
                                <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>
                            </clr-checkbox-wrapper>
                        </div>
                    </div>
                    <vdr-form-field
                        [label]="'catalog.slug' | translate"
                        for="slug"
                        [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
                    >
                        <input
                            id="slug"
                            type="text"
                            formControlName="slug"
                            [readonly]="!(updatePermissions | hasPermission)"
                        />
                    </vdr-form-field>
                    <vdr-form-field
                        class="form-grid-span"
                        [label]="'common.description' | translate"
                        for="slug"
                        [errors]="{ pattern: 'catalog.slug-pattern-error' | translate }"
                    >
                        <vdr-rich-text-editor
                            formControlName="description"
                            [readonly]="!(updatePermissions | hasPermission)"
                        ></vdr-rich-text-editor>
                    </vdr-form-field>
                </div>
            </vdr-card>
            <vdr-card [title]="'common.custom-fields' | translate" *ngIf="customFields.length">
                <vdr-tabbed-custom-fields
                    entityName="Product"
                    [customFields]="customFields"
                    [customFieldsFormGroup]="detailForm.get('customFields')"
                    [readonly]="!(updatePermissions | hasPermission)"
                ></vdr-tabbed-custom-fields>
            </vdr-card>
            <vdr-custom-detail-component-host
                locationId="product-detail"
                [entity$]="entity$"
                [detailForm]="detailForm"
            ></vdr-custom-detail-component-host>
            <vdr-card [title]="'catalog.assets' | translate">
                <vdr-assets
                    [assets]="assetChanges.assets || entity?.assets"
                    [featuredAsset]="assetChanges.featuredAsset || entity?.featuredAsset"
                    [updatePermissions]="updatePermissions"
                    (change)="assetChanges = $event"
                ></vdr-assets>
            </vdr-card>

            <vdr-card [title]="'catalog.product-variants' | translate" [paddingX]="isNew$ | async">
                <div *ngIf="isNew$ | async; else variantList">
                    <vdr-generate-product-variants
                        (variantsChange)="createVariantsConfig = $event"
                    ></vdr-generate-product-variants>
                </div>
                <ng-template #variantList>
                    <vdr-product-variant-list
                        [productId]="this.id"
                        dataTableId="product-detail-variants-list"
                        [hideLanguageSelect]="true"
                    ></vdr-product-variant-list>
                </ng-template>
                <div class="mx-3" *ngIf="(isNew$ | async) === false">
                    <a class="button" [routerLink]="['manage-variants']">
                        <clr-icon shape="add-text"></clr-icon>
                        {{ 'catalog.manage-variants' | translate }}</a
                    >
                </div>
            </vdr-card>
        </vdr-page-block>
    </vdr-page-detail-layout>
</form>
