{{#if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_USERID"))}}
<AppLoginInput 
    class="app-login-user" 
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"
    defaultIcon="user-outlined"/>
{{else if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_PASSWORD"))}}
<AppLoginInput 
    class="app-login-password" 
    name="{{item.name}}"
    defaultType="password"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"
    defaultIcon="key-outlined"/>
{{else if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_ORGPICK"))}}  
<AppLoginOrg 
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"
    defaultIcon="ios-key"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_VERIFICATIONCODE"))}}
<AppLoginNoteVerify
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_LOGINMSG"))}}
<AppLoginMessage
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "APP_APPTITLE"))}}
<AppPresetTitle
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "VIEW_PAGECAPTION"))}}
<AppPresetCaption 
    v-if="model.showCaption && !noViewCaption"
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails">
    \{{model.caption}}
</AppPresetCaption>
{{else if (and item.psEditor (eq item.psEditor.predefinedType "FIELD_TEXT_DYNAMIC"))}}
<AppPresetText
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "FIELD_QRCODE"))}}
<AppPresetQrcode
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "AUTH_ORGPICK"))}}
<AppIndexOrgSelect
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>  
{{else if (and item.psEditor (eq item.psEditor.predefinedType "FIELD_IMAGE"))}}
<AppFieldImageDynamic
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>
{{else if (and item.psEditor (eq item.psEditor.predefinedType "FIELD_CAROUSEL"))}}
<AppRawItemCarousel
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam, data.index) }"
    {{else}}
    @component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
    {{/if}}
    type="FIELD_CAROUSEL"
    :data="store.layoutData"
    :layoutModelDetails="store.layoutModelDetails"/>
{{else if item.psEditor}}
<AppPanelField
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails">
{{#if (or (eq item.psEditor.editorStyle "DEFAULT") (not item.psEditor.editorStyle))}}
    {{> @macro/editors/include-editor.hbs type=item.psEditor.editorType item=item editor=item.psEditor ctrlType="panel" isMultiData=isMultiData}}
{{else}}
    {{> @macro/editors/include-editor.hbs type=(concat item.psEditor.editorType '_' item.psEditor.editorStyle) item=item editor=item.psEditor ctrlType="panel" isMultiData=isMultiData}}
{{/if}}    
</AppPanelField>
{{else}}
<AppPanelField
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    :value="store.layoutData[`{{item.name}}_${data.index}`]"
    {{else}}
    :value="store.layoutData.{{item.name}}"
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails">
    <AppSpan
        name="{{item.name}}"
        {{#if isMultiData}}
        :value="store.layoutData[`{{item.name}}_${data.index}`]"
        {{else}}
        :value="store.layoutData.{{item.name}}"
        {{/if}}
        />
</AppPanelField>
{{/if}}