<vdr-action-bar>
    <vdr-ab-left>
        <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
        <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="collection-detail"></vdr-action-bar-items>
        <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
                *vdrIfPermissions="updatePermission"
                class="btn btn-primary"
                (click)="save()"
                [disabled]="(detailForm.invalid || detailForm.pristine) && !assetsChanged()"
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as category">
    <div class="clr-row">
        <div class="clr-col">
            <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
                <clr-toggle-wrapper>
                    <input
                        type="checkbox"
                        clrToggle
                        formControlName="visible"
                        id="visibility"
                        [vdrDisabled]="!(updatePermission | hasPermission)"
                    />
                    <label class="visible-toggle">
                        <ng-container *ngIf="detailForm.value.visible; else private">{{
                            'catalog.public' | translate
                        }}</ng-container>
                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>
                    </label>
                </clr-toggle-wrapper>
            </vdr-form-field>
            <vdr-form-field [label]="'common.name' | translate" for="name">
                <input
                    id="name"
                    type="text"
                    formControlName="name"
                    [readonly]="!(updatePermission | hasPermission)"
                    (input)="updateSlug($event.target.value)"
                />
            </vdr-form-field>
            <vdr-form-field
                [label]="'catalog.slug' | translate"
                for="slug"
                [errors]="{ pattern: ('catalog.slug-pattern-error' | translate) }"
            >
                <input
                    id="slug"
                    type="text"
                    formControlName="slug"
                    [readonly]="!(updatePermission | hasPermission)"
                />
            </vdr-form-field>
            <vdr-rich-text-editor
                formControlName="description"
                [readonly]="!(updatePermission | hasPermission)"
                [label]="'common.description' | translate"
            ></vdr-rich-text-editor>

            <section formGroupName="customFields" *ngIf="customFields.length">
                <label>{{ 'common.custom-fields' | translate }}</label>
                <vdr-tabbed-custom-fields
                    entityName="Collection"
                    [customFields]="customFields"
                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
                    [readonly]="!(updatePermission | hasPermission)"
                ></vdr-tabbed-custom-fields>
            </section>
            <vdr-custom-detail-component-host
                locationId="collection-detail"
                [entity$]="entity$"
                [detailForm]="detailForm"
            ></vdr-custom-detail-component-host>
        </div>
        <div class="clr-col-md-auto">
            <vdr-assets
                [assets]="category.assets"
                [featuredAsset]="category.featuredAsset"
                [updatePermissions]="updatePermission"
                (change)="assetChanges = $event"
            ></vdr-assets>
        </div>
    </div>
    <div class="clr-row" formArrayName="filters">
        <div class="clr-col">
            <label>{{ 'catalog.filters' | translate }}</label>
            <ng-container *ngFor="let filter of filters; index as i; trackBy:trackByFn">
                <vdr-configurable-input
                    (remove)="removeFilter(i)"
                    [position]="i"
                    [operation]="filter"
                    [operationDefinition]="getFilterDefinition(filter)"
                    [formControlName]="i"
                    [readonly]="!(updatePermission | hasPermission)"
                ></vdr-configurable-input>
            </ng-container>

            <div *vdrIfPermissions="updatePermission">
                <vdr-dropdown>
                    <button class="btn btn-outline" vdrDropdownTrigger>
                        <clr-icon shape="plus"></clr-icon>
                        {{ 'marketing.add-condition' | translate }}
                    </button>
                    <vdr-dropdown-menu vdrPosition="bottom-left">
                        <button
                            *ngFor="let filter of allFilters"
                            type="button"
                            vdrDropdownItem
                            (click)="addFilter(filter)"
                        >
                            {{ filter.description }}
                        </button>
                    </vdr-dropdown-menu>
                </vdr-dropdown>
            </div>
        </div>
        <div class="clr-col">
            <vdr-collection-contents
                [collectionId]="id"
                [parentId]="parentId$ | async"
                [updatedFilters]="updatedFilters$ | async"
                [previewUpdatedFilters]="livePreview"
                #collectionContents
            >
                <ng-template let-count>
                    <div class="contents-title">
                        {{ 'catalog.collection-contents' | translate }} ({{
                            'common.results-count' | translate: { count: count }
                        }})
                    </div>
                    <clr-checkbox-wrapper [class.disabled]="detailForm.get('filters')?.pristine">
                        <input
                            type="checkbox"
                            clrCheckbox
                            [ngModelOptions]="{ standalone: true }"
                            [disabled]="detailForm.get('filters')?.pristine"
                            [ngModel]="livePreview"
                            (ngModelChange)="toggleLivePreview()"
                        />
                        <label>{{ 'catalog.live-preview-contents' | translate }}</label>
                    </clr-checkbox-wrapper>
                </ng-template>
            </vdr-collection-contents>
        </div>
    </div>
</form>
