<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="facet-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"
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as facet">
    <section class="form-block" formGroupName="facet">
        <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
            <clr-toggle-wrapper>
                <input
                    type="checkbox"
                    clrToggle
                    [vdrDisabled]="!(updatePermission | hasPermission)"
                    formControlName="visible"
                    id="visibility"
                />
                <label class="visible-toggle">
                    <ng-container *ngIf="detailForm.value.facet.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)="updateCode(facet.code, $event.target.value)"
            />
        </vdr-form-field>
        <vdr-form-field
            [label]="'common.code' | translate"
            for="code"
            [readOnlyToggle]="updatePermission | hasPermission"
        >
            <input
                id="code"
                type="text"
                [readonly]="!(updatePermission | hasPermission)"
                formControlName="code"
            />
        </vdr-form-field>

        <section formGroupName="customFields" *ngIf="customFields.length">
            <label>{{ 'common.custom-fields' | translate }}</label>
            <vdr-tabbed-custom-fields
                entityName="Facet"
                [customFields]="customFields"
                [customFieldsFormGroup]="detailForm.get(['facet', 'customFields'])"
                [readonly]="!(updatePermission | hasPermission)"
            ></vdr-tabbed-custom-fields>
        </section>
        <vdr-custom-detail-component-host
            locationId="facet-detail"
            [entity$]="entity$"
            [detailForm]="detailForm"
        ></vdr-custom-detail-component-host>
    </section>

    <section class="form-block" *ngIf="!(isNew$ | async)">
        <label>{{ 'catalog.facet-values' | translate }}</label>

        <table class="facet-values-list table" formArrayName="values" *ngIf="0 < getValuesFormArray().length">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ 'common.name' | translate }}</th>
                    <th>{{ 'common.code' | translate }}</th>
                    <ng-container *ngIf="customValueFields.length">
                        <th>{{ 'common.custom-fields' | translate }}</th>
                    </ng-container>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr class="facet-value" *ngFor="let value of values; let i = index" [formGroupName]="i">
                    <td class="align-middle">
                        <vdr-entity-info [entity]="value"></vdr-entity-info>
                    </td>
                    <td class="align-middle">
                        <input
                            type="text"
                            formControlName="name"
                            [readonly]="!(updatePermission | hasPermission)"
                            (input)="updateValueCode(facet.values[i]?.code, $event.target.value, i)"
                        />
                    </td>
                    <td class="align-middle"><input type="text" formControlName="code" readonly /></td>
                    <td class="" *ngIf="customValueFields.length">
                        <vdr-tabbed-custom-fields
                            entityName="FacetValue"
                            [customFields]="customValueFields"
                            [compact]="true"
                            [customFieldsFormGroup]="detailForm.get(['values', i, 'customFields'])"
                            [readonly]="!(updatePermission | hasPermission)"
                        ></vdr-tabbed-custom-fields>
                    </td>
                    <td class="align-middle">
                        <vdr-dropdown>
                            <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                                {{ 'common.actions' | translate }}
                                <clr-icon shape="caret down"></clr-icon>
                            </button>
                            <vdr-dropdown-menu vdrPosition="bottom-right">
                                <button
                                    type="button"
                                    class="delete-button"
                                    (click)="deleteFacetValue(facet.values[i]?.id, i)"
                                    [disabled]="!(updatePermission | hasPermission)"
                                    vdrDropdownItem
                                >
                                    <clr-icon shape="trash" class="is-danger"></clr-icon>
                                    {{ 'common.delete' | translate }}
                                </button>
                            </vdr-dropdown-menu>
                        </vdr-dropdown>
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <button
                type="button"
                class="btn btn-secondary"
                *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
                (click)="addFacetValue()"
            >
                <clr-icon shape="add"></clr-icon>
                {{ 'catalog.add-facet-value' | translate }}
            </button>
        </div>
    </section>
</form>
