<vdr-action-bar>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="global-settings-detail"></vdr-action-bar-items>
        <button
            class="btn btn-primary"
            (click)="save()"
            *vdrIfPermissions="'UpdateSettings'"
            [disabled]="detailForm.invalid || detailForm.pristine"
        >
            {{ 'common.update' | translate }}
        </button>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm">
    <vdr-form-field [label]="'common.available-languages' | translate" for="availableLanguages">
        <ng-select
            [items]="languageCodes"
            [addTag]="false"
            [hideSelected]="true"
            multiple="true"
            appendTo="body"
            formControlName="availableLanguages"
        >
            <ng-template ng-label-tmp let-item="item" let-clear="clear">
                <span class="ng-value-icon left" (click)="clear.call(null, item)" aria-hidden="true">
                    ×
                </span>
                <span class="ng-value-label">{{ 'lang.' + item | translate }} ({{ item }})</span>
            </ng-template>
            <ng-template ng-option-tmp let-item="item">
                {{ 'lang.' + item | translate }} ({{ item }})
            </ng-template>
        </ng-select>
    </vdr-form-field>
    <vdr-form-field
        [label]="'settings.global-out-of-stock-threshold' | translate"
        for="outOfStockThreshold"
        [tooltip]="'settings.global-out-of-stock-threshold-tooltip' | translate"
    >
        <input
            id="outOfStockThreshold"
            type="number"
            formControlName="outOfStockThreshold"
            [readonly]="!('UpdateSettings' | hasPermission)"
        />
    </vdr-form-field>
    <vdr-form-field
        [label]="'settings.track-inventory-default' | translate"
        for="enabled"
        [tooltip]="'catalog.track-inventory-tooltip' | translate"
    >
        <clr-toggle-wrapper>
            <input
                type="checkbox"
                clrToggle
                name="enabled"
                formControlName="trackInventory"
                [vdrDisabled]="!('UpdateSettings' | hasPermission)"
            />
        </clr-toggle-wrapper>
    </vdr-form-field>
    <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)"
                entityName="GlobalSettings"
                [customFieldsFormGroup]="detailForm.get('customFields')"
                [customField]="customField"
            ></vdr-custom-field-control>
        </ng-container>
    </section>
</form>
