<div class="card" *ngIf="customFieldsConfig.length">
    <div class="card-header">
        {{ 'common.custom-fields' | translate }}
    </div>
    <div class="card-block">
        <div class="card-text custom-field-form" [class.editable]="editable">
            <ng-container *ngFor="let customField of customFieldsConfig">
                <vdr-custom-field-control
                    entityName="Order"
                    [customFieldsFormGroup]="customFieldForm"
                    [compact]="true"
                    [readonly]="customField.readonly || !editable"
                    [customField]="customField"
                ></vdr-custom-field-control>
            </ng-container>
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-sm btn-secondary" (click)="editable = true" *ngIf="!editable">
            <clr-icon shape="pencil"></clr-icon>
            {{ 'common.edit' | translate }}
        </button>
        <button
            class="btn btn-sm btn-primary"
            (click)="onUpdateClick()"
            *ngIf="editable"
            [disabled]="customFieldForm.pristine || customFieldForm.invalid"
        >
            <clr-icon shape="check"></clr-icon>
            {{ 'common.update' | translate }}
        </button>
    </div>
</div>
