<narik-input  
        [placeHolder]='"login.userName_placeHolder" | translate'
        [(ngModel)]="loginModel.userName"
        name="name"
        [label]="'login.userName' | translate"
        type='text'>
    </narik-input>

   <narik-autocomplete
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [minLenToShowAutoComplete]="2"
        [isLazyLoadData]="true"
        [dataInfo]="item.dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.city">
    </narik-autocomplete>

    <narik-select
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.cityId">
    </narik-select>

    <narik-radio-group
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.cityId">
    </narik-radio-group>

    <narik-checkbox
        [name]="name"
        [disabled]="false"
        [options]="options"
        [(ngModel)]="entity.isActive"
        label="{{ label | translate }}">
    </narik-checkbox>

    <narik-checkbox-list
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [(ngModel)]="entity.selectedItems">
    </narik-checkbox-list>

    <narik-data-table [fields]="fields" [pagingInfo]="config?.pagingInfo" [dataSource]="dataSource"
        selectMode="Multiple"
        (rowDoubleClick)="editEntity($event)"
        (rowCommandClick)="rowCommandClick($event)"
        [rowCommands]="config?.rowCommands"
        [rowCommandType]="config?.rowCommandType"
        [(selectedItem)]="selectedEntity" [(selectedItems)]="selectedItems">
    </narik-data-table>

     <narik-date-picker
        [options]="options"
        [disabled]="false"
        [name]="name"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [(ngModel)]="entity.date"
        label="{{ label | translate }}">
    </narik-date-picker>

    <narik-dynamic-form
        [layoutGap]="config?.options?.layoutGap || 10"
        [columnsCount]="config?.options?.columnsCount || 1"
        [groupFields]="config?.options?.groupFields"
        [activeTabGuard]="config?.options?.activeTabGuard != false"
        [activeAutoFocus]="config?.options?.activeAutoFocus != false"
        [defaultFocusField]="config?.options?.defaultFocusField"
        [model]="currentEntity"
        [fields]="fields">
    </narik-dynamic-form>

    <narik-toolbar toolbarKey="detailToolBar">
    </narik-toolbar>

    <narik-data-table-select
        [options]="options"
        [name]="name"
        [disabled]="false"
        [required]="true"
        placeHolder="{{ placeHolder | translate }}"
        [dataInfo]="dataInfo"
        label="{{ label | translate }}"
        [fields]="fields"
        [isLazyLoadData]="true"
        [(ngModel)]="entity.productId">
    </narik-data-table-select>

    <narik-button
        [cssClass]="'item-full-width'"
        (nClick)="login()"
        [isBusy]='isBusy'
        label='{{"login.button" | translate}}'
        color="primary">
    </narik-button>

    <narik-busy-indicator [isBusy]="isBusy">
    </narik-busy-indicator>