<#assign selfContent>
<#if item.render??>
${item.render.code}
<#else>
<app-rawitem
    :viewparams="viewparams" 
    :context="context"
    contentStyle="<#if item.getPSSysCss()??>${item.getPSSysCss().getCssName()}</#if>"
    sizeStyle="<#if item.getRawItemHeight() gt 0>height: ${item.getRawItemHeight()?c}px;</#if><#if item.getRawItemWidth() gt 0>width: ${item.getRawItemWidth()?c}px;</#if>"
    contentType="<#if item.getContentType?? && item.getContentType()??>${item.getContentType()}</#if>"
    <#if item.getHtmlContent?? && item.getHtmlContent()??>
    :htmlContent='`${item.getHtmlContent()}`'
    </#if>
    <#if item.getPSSysImage?? && item.getPSSysImage()??>
    <#assign img=item.getPSSysImage()>
    <#if img.getCssClass()?? && (img.getCssClass()?length gt 0)>
    imageClass="${img.getCssClass()}"</#if></#if>>
    <#if item.getContentType?? && item.getContentType() == 'RAW'>
        ${item.getRawContent()}
    </#if>
</app-rawitem>
</#if>
</#assign>

<#ibizinclude>
./@MACRO/PLAYOUT.vue.ftl
</#ibizinclude>
<#if item.getParentLayoutMode()=='FLEX'>
<div v-show="detailsModel.${item.name}.visible" style="${flexAttr}<#if item.getWidth() gt 0>width: ${item.getWidth()?c}px;</#if><#if item.getHeight() gt 0>height: ${item.getHeight()?c}px;</#if>" class="app-layoutpanel-rowitem">
    ${content}
</div>
<#else>
<i-col v-show="detailsModel.${item.name}.visible" ${tableAttr} style="<#if item.getWidth() gt 0>width: ${item.getWidth()?c}px;</#if><#if item.getHeight() gt 0>height: ${item.getHeight()?c}px;</#if>" class="app-layoutpanel-rowitem">
    ${content}
</i-col>
</#if>