{{#eq item.psLayoutPos 'FLEX'}}
<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
  <AppFormGroup 
    v-show="state.detailsModel.{{item.codeName}}.visible" 
    name="{{item.codeName}}" 
    title="{{item.caption}}"
    {{#if item.psSysCss}}
    class="{{item.psSysCss.cssName}}"
    {{/if}}
    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
    {{#if item.psSysImage}}
    {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
    {{/if}}
    {{#if item.labelPSSysCss}}
    titleStyle="{{item.labelPSSysCss.cssName}}"
    {{/if}}
    :infoGroupMode="{{item.infoGroupMode}}"
    :titleBarCloseMode="{{item.titleBarCloseMode}}"
    :showCaption="{{item.showCaption}}"
    :uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
    @componentEvent="onComponentEvent">
    {{#eq item.psLayout.layout "FLEX"}}
    <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
      {{#each item.psDEFormDetails as | formDetail |}}
      {{>(lookup . 'formDetail.detailType') item=formDetail}}
      {{/each}}
    </div>
    {{else}}
    <a-row>
      {{#each item.psDEFormDetails as | formDetail |}}
      {{>(lookup . 'formDetail.detailType') item=formDetail}}
      {{/each}}
    </a-row>
    {{/eq}}
  </AppFormGroup>
</div>
{{else}}
<a-col
{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
  <AppFormGroup 
    v-show="state.detailsModel.{{item.codeName}}.visible" 
    name="{{item.codeName}}" 
    title="{{item.caption}}"
    {{#if item.psSysCss}}
    class="{{item.psSysCss.cssName}}"
    {{/if}}
    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
    {{#if item.psSysImage}}
    {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
    {{/if}}
    {{#if item.labelPSSysCss}}
    titleStyle="{{item.labelPSSysCss.cssName}}"
    {{/if}}
    :infoGroupMode="{{item.infoGroupMode}}"
    :titleBarCloseMode="{{item.titleBarCloseMode}}"
    :showCaption="{{item.showCaption}}"
    :uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
    @componentEvent="onComponentEvent">
    {{#eq item.psLayout.layout "FLEX"}}
    <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
      {{#each item.psDEFormDetails as | formDetail |}}
      {{>(lookup . 'formDetail.detailType') item=formDetail}}
      {{/each}}
    </div>
    {{else}}
    <a-row>
      {{#each item.psDEFormDetails as | formDetail |}}
      {{>(lookup . 'formDetail.detailType') item=formDetail}}
      {{/each}}
    </a-row>
    {{/eq}}
  </AppFormGroup>
</a-col>
{{/eq}}