<#assign layout = item.getPSLayout()/>
<#ibizinclude>
./@MACRO/PLAYOUT.vue.ftl
</#ibizinclude>
<#if layout.getLayout()=='FLEX'>
<i-col v-show="detailsModel.${item.name}.visible" ${tableAttr} class="app-layoutpanel-container<#if item.getPSSysCss()??> ${item.getPSSysCss().getCssName()}</#if>" style="${flexAttr}width:<#if item.getWidth() gt 0>${item.getWidth()?c}px</#if>;height:<#if item.getHeight() gt 0>${item.getHeight()?c}px<#else>100%</#if>;">
  <#if item.render??>
  ${item.render.code}
  <#else>
    <div style="height:100%;display: flex;<#if layout.getDir()!="">flex-direction: ${layout.getDir()};</#if><#if layout.getAlign()!="">justify-content: ${layout.getAlign()};</#if><#if layout.getVAlign()!="">align-items: ${layout.getVAlign()};</#if>">
      <@ibizindent blank=8>
      <#if item.getPSPanelItems()??>
      <#list item.getPSPanelItems() as panelItem>
      ${P.getPartCode(panelItem).code}
      </#list>
      </#if>
      </@ibizindent>
    </div>
  </#if>
</i-col>
<#else>
<i-col v-show="detailsModel.${item.name}.visible" ${tableAttr}  class="app-layoutpanel-container<#if item.getPSSysCss()??> ${item.getPSSysCss().getCssName()}</#if>" style="${flexAttr}width:<#if item.getWidth() gt 0>${item.getWidth()?c}px</#if>;height:<#if item.getHeight() gt 0>${item.getHeight()?c}px<#else>100%</#if>;">
  <#if item.render??>
  ${item.render.code}
  <#else>
    <row style="height:100%;">
      <@ibizindent blank=8>
      <#if item.getPSPanelItems()??>
      <#list item.getPSPanelItems() as panelItem>
      ${P.getPartCode(panelItem).code}
      </#list>
      </#if>
      </@ibizindent>
    </row>
  </#if>
</i-col>
</#if>