<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>
<vdr-form-field [label]="'catalog.option-name' | translate" for="name">
    <input
        id="name"
        type="text"
        #nameInput="ngModel"
        [(ngModel)]="name"
        required
        (input)="updateCode($event.target.value)"
    />
</vdr-form-field>
<vdr-form-field [label]="'common.code' | translate" for="code">
    <input id="code" type="text" #codeInput="ngModel" required [(ngModel)]="code" pattern="[a-z0-9_-]+" />
</vdr-form-field>
<clr-checkbox-wrapper>
    <input type="checkbox" clrCheckbox [(ngModel)]="updateVariantName" />
    <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>
</clr-checkbox-wrapper>
<section *ngIf="customFields.length">
    <label>{{ 'common.custom-fields' | translate }}</label>
    <vdr-tabbed-custom-fields
        entityName="ProductOption"
        [customFields]="customFields"
        [customFieldsFormGroup]="customFieldsForm"
        [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
    ></vdr-tabbed-custom-fields>
</section>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button
        type="submit"
        (click)="update()"
        [disabled]="
            nameInput.invalid ||
            codeInput.invalid ||
            (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)
        "
        class="btn btn-primary"
    >
        {{ 'catalog.update-product-option' | translate }}
    </button>
</ng-template>
