{{#if (and item.psRawItem (eq item.psRawItem.predefinedType "STATIC_IMAGE"))}}
<AppRawItemImage
    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}}
    {{#if item.psRawItem.psSysImage}}
        {{#if item.psRawItem.psSysImage.imagePath}}
    imgUrl="{{item.psRawItem.psSysImage.imagePath}}"
        {{/if}}
        {{#if item.psRawItem.psSysImage.cssClass}}
    imageClass="{{item.psRawItem.psSysImage.cssClass}}"
        {{/if}}
    {{/if}}
    :layoutModelDetails="store.layoutModelDetails"/>
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "STATIC_CAROUSEL"))}}
<AppRawItemCarousel
    name="{{item.name}}"
    type="STATIC_CAROUSEL"
    {{#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}}
    :value="[
    {{#if item.psRawItem.psRawItemParams}}
    {{#each item.psRawItem.psRawItemParams as | param |}}
        {
            {{#if param.key}}
            key: `{{param.key}}`,
            {{/if}}
            {{#if param.value}}
            value: `{{param.value}}`,
            {{/if}}
            {{#if param.psSysImage.imagePath}}
            imgValue: `{{param.psSysImage.imagePath}}`,
            type: 'img',
            {{else if param.psSysImage.cssClass}}
            imgValue: `{{param.psSysImage.cssClass}}`,
            type: 'icon',
            {{/if}}
        }{{#unless @last}},{{/unless}}
    {{/each}}
    {{/if}}
    ]"
    :data="store.layoutData"
    :layoutModelDetails="store.layoutModelDetails"/>
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "STATIC_VIDEOPLAYER"))}}
<AppRawItemVideo
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    {{/if}}    
    :layoutModelDetails="store.layoutModelDetails"
    :videoParams="[
    {{#if item.psRawItem.psRawItemParams}}
    {{#each item.psRawItem.psRawItemParams as |param|}}
        {
            {{#if param.key}}
            key: `{{param.key}}`,
            {{/if}}
            {{#if param.value}}
            value: `{{param.value}}`,
            {{/if}}
        }{{#unless @last}},{{/unless}}
    {{/each}}
    {{/if}}    
    ]"/>
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "NAV_POS"))}}
<AppNavPos 
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    {{/if}}    
    :layoutModelDetails="store.layoutModelDetails"
    :navData="store.layoutModelDetails['{{item.name}}']?.navData"/>
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "NAV_BREADCRUMB"))}}
 <AppIndexNavBreadcrumb
    name="{{item.name}}"
    {{#if isMultiData}}
    :index="data.index"
    {{/if}}    
    :layoutModelDetails="store.layoutModelDetails"
    :userParams="[
    {{#if item.psRawItem.psRawItemParams}}
    {{#each item.psRawItem.psRawItemParams as |param|}}
        {
            {{#if param.key}}
            key: `{{param.key}}`,
            {{/if}}
            {{#if param.value}}
            value: `{{param.value}}`,
            {{/if}}
            {{#if param.psSysImage.imagePath}}
            imgValue: `{{param.psSysImage.imagePath}}`,
            type: 'img',
            {{else if param.psSysImage.cssClass}}
            imgValue: `{{param.psSysImage.cssClass}}`,
            type: 'icon',
            {{/if}}
        }{{#unless @last}},{{/unless}}
    {{/each}}
    {{/if}}    
    ]"
    :indexViewTag="model.codeName"/>
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "STATIC_TEXT"))}}
<AppPresetText 
    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.psRawItem (eq item.psRawItem.predefinedType "NAV_TABS"))}}
<AppIndexNavTabs
    name="{{item.name}}"
    {{#if isMultiData}} 
    :index="data.index"
    {{/if}} 
    :layoutModelDetails="store.layoutModelDetails" />     
{{else if (and item.psRawItem (eq item.psRawItem.predefinedType "AUTH_USERINFO"))}}
<AppIndexUserInfo 
    name="{{item.name}}"
    {{#if isMultiData}} 
    :index="data.index"
    {{/if}} 
    :userParams="[
    {{#if item.psRawItem.psRawItemParams}}
    {{#each item.psRawItem.psRawItemParams as |param|}}
        {
            {{#if param.key}}
            key: `{{param.key}}`,
            {{/if}}
            {{#if param.value}}
            value: `{{param.value}}`,
            {{/if}}
            {{#if param.psSysImage.imagePath}}
            imgValue: `{{param.psSysImage.imagePath}}`,
            type: 'img',
            {{else if param.psSysImage.cssClass}}
            imgValue: `{{param.psSysImage.cssClass}}`,
            type: 'icon',
            {{/if}}
        }{{#unless @last}},{{/unless}}
    {{/each}}
    {{/if}}    
    ]"
    :layoutModelDetails="store.layoutModelDetails" />
{{else}}
<AppPresetText 
    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" />
{{/if}}